<template>
  <div>
    <div class="content">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <div class="message">
        <div class="flex-between" >
          <div>招标文件：<span @click="download(bidDetail.fileUrl)">{{bidDetail.fileName}}</span></div>
          <div>开标信息：<span>开标一览表</span></div>
        </div>
        <div class="flex upload">
          <div>变更信息：</div>
          <ul class="title">
            <li class="flex">
              <div>公告标题.pdf</div>
              <button>下载</button>
            </li>
            <li class="flex">
              <div>公告标题.pdf</div>
              <button>下载</button>
            </li>
          </ul>
        </div>
        <!-- 投标文件 -->
        <div>
          <div>投标文件：</div>
          <dataTable :table-data="bids" :columns="bidTitle" :is-pageobj="false" :is-index="true">
            <el-table-column slot="operate" label="文件" align="center" fixed="right">
              <template slot-scope="scope">
                <ul class="flex file">
                  <li v-for="(file,index) in scope.row.files" :key="index">{{ file }}下载</li>
                </ul>
              </template>
            </el-table-column>
          </dataTable>
        </div>
        <!-- 评审信息 -->
        <div style="margin-top:100px">
          <div class="flex-between">
            <h5>评审信息</h5>
            <el-button type="primary" size="small" @click='jump'>澄清质询查看</el-button>
          </div>
          <dataTable :table-data="review" :columns="reviewTitle" :is-index="true">
            <el-table-column slot="operate" label="资格审查" align="center" fixed="right">
              <template slot-scope="scope">
                <div v-if="scope.row.qualification">通过</div>
                <div v-else>未通过</div>
              </template>
            </el-table-column>
            <el-table-column slot="operate" label="符合性审查" align="center" fixed="right">
              <template slot-scope="scope">
                <div v-if="scope.row.conformity">通过</div>
                <div v-else>未通过</div>
              </template>
            </el-table-column>
            <el-table-column slot="operate" label="" align="center" fixed="right">
              <template slot-scope="scope">
                <div v-if="scope.row.bidRejection">通过</div>
                <div v-else>未通过</div>
              </template>
            </el-table-column>
            <el-table-column slot="operate" label="结论" align="center" fixed="right">
              <template slot-scope="scope">
                <div v-if="scope.row.conclusion">通过</div>
                <div v-else>未通过</div>
              </template>
            </el-table-column>
          </dataTable>
        </div>
        <!-- 排名信息 -->
        <div>
          <h5>排名信息</h5>
          <dataTable :table-data="rank" :columns="rankTitle" :is-pageobj="false" :is-index="true">
          </dataTable>
        </div>
        <div class="flex">
          <div>评标附件：</div>
          <ul class="upload">
            <li class="flex">
              <div>评价附件.pdf</div>
              <button>下载</button>
            </li>
          </ul>
        </div>
      <!--  <div class="button">
          <el-button @click="back">返回</el-button>
          <el-button @click="fail">流标</el-button>
          <el-button type="primary">评标结束</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
	import {
	  companyRank,
	  CompanyEvaluatec,
	  bidBookDownload
	} from '@api/purchaser/bid'
import dataTable from '@components/nopageTable.vue'
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
export default {
  components: {
    dataTable,
    dataBreadcrumb
  },
  data() {
    return {
		bidDetail:"",
		projectId:2,
      rankTitle: [{
        label: '投标人名称',
        prop: 'companyName'
      },
      {
        label: '投标价(元)',
        prop: 'price'
      },
      {
        label: '商务评分',
        prop: 'commercialGrade'
      },
      {
        label: '技术评分',
        prop: 'skillGrade'
      },
      {
        label: '价格评分',
        prop: 'priceGrade'
      },
      {
        label: '评标价(元)',
        prop: 'evaluationPrice'
      },
      {
        label: '排名',
        prop: 'rank'
      },
      {
        label: '最终得分',
        prop: 'finalScore'
      },
      {
        slot: 'operate'
      }
      ],
      rank: [],
     bidTitle: [{
       label: '投标人',
       prop: 'name'
     },
     {
       slot: 'operate'
     }
     ],
      bids: [{
        name: '上海致远有限公司',
        files: ['313121.zip', '546465.zip']
      }],
      breads: ['招标管理', '招标项目管理', '工作台'],
      review: [],
      reviewTitle: [{
        label: '投标人名称',
        prop: 'companyName'
      },
      {
        slot: 'operate'
      }
      ], // 操作列
    }
  },
  created() {
    this.getcompanyRank()
    this.getCompanyEvaluatec()
	this.getbidBookDownload();
  },
  methods: {
	  download(url){
		window.open(url)  
	  },
	  back(){
		  this.$router.go(-1)
	  },
	  jump(){
		  this.$router.push('/purchaser/bid/bidEvaluation/review/clear')
	  },
    examine() {
      this.$router.push('/admin/bid/bidingDetail')
    },
    fail() {
      this.$router.push('/purchaser/bid/bidEvaluation/projectManager/fail')
    },
	// 查投标公司评审信息
	async getCompanyEvaluatec() {
	  try {
	    let projectId=localStorage.getItem("projectId");
	    const {
	      data,
	      code
	    } = await CompanyEvaluatec(projectId)
	    if (code === 200) {
	      this.review = data
	    }
	  } catch (e) {
	    console.log(e)
	  }
	},
	// 查看投标公司排名信息
	async getcompanyRank() {
	  try {
	  let projectId=localStorage.getItem("projectId");
	    const {
	      data,
	      code
	    } = await companyRank(projectId)
	    if (code === 200) {
			
	      this.rank = data
	    }
	  } catch (e) {
	    console.log(e)
	  }
	},
	// 查看招标文件
	async getbidBookDownload() {
	  try {
		  let projectId=localStorage.getItem("projectId")
	    const {
	      data,
	      code
	    } = await bidBookDownload(projectId)
	    if (code === 200) {
			this.bidDetail=data
	    }
	  } catch (e) {
	    console.log(e)
	  }
	},
	//	
  }
}
</script>

<style scoped>
	.file>li {
		margin-right: 10px;
		color: #113DEE
	}

	.message {
		margin-left: 50px;
		margin-bottom: 50px;

	}

	.message span {
		color: #113DEE
	}

	.message>div {
		margin-bottom: 15px;
	}

	.title>li {
		margin-bottom: 10px;
	}

	.upload button {
		border: 1px solid #000000;
		background: #fff;
		width: 50px;
		height: 20px;
		margin-left: 10px;
	}
	h5 {
		font-weight: bold;
		margin-bottom: 20px;
	}
	.button{
		width:280px;
		margin:80px auto 30px
	}
</style>

