<template>
  <div class="client-details">
    <el-dialog
      :visible.sync="drawer"
      size="80%"
      :title="title"
      custom-class="client-dialog"
      :with-header="false"
      @closed="cancel">
      <head-detail-form
        :form-data="formData"
        :query-params="queryParams"
        :total="tableDataTotal"
        :amountTotal="amountTotal"
        @handle-search="handleSearch"
      />
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
      <tables
        v-else
        :indexFixed="true"
        :tableLoading="tableLoading"
        :tableData="tableData"
        :forData="forData"
        :tableDataTotal="tableDataTotal"
        :queryParams="queryParams"
        @sort-change="sortChange"
        @handle-current-change="handleCurrentChange"
      >
        <template slot="sourceType" slot-scope="scope">
          <div class="flex-box">
            <div class="a-link" @click="linkTo(scope)" v-if="scope.row.sourceId&&scope.row.sourceType=='中标业绩'" v-html="scope.row.sourceType" style="cursor: pointer"></div>
            <span v-else-if="scope.row.sourceId&&(scope.row.sourceType=='中标公示'||scope.row.sourceType=='四库业绩'||scope.row.sourceType=='荣誉奖项')" @click="linkTo1(scope)" class="a-link" style="cursor: pointer" v-html="scope.row.sourceType"></span>
            <span v-else  v-html="scope.row.sourceType || '--'"></span>
          </div>
        </template>
      </tables>
    </el-dialog>
  </div>
</template>

<script>
import mixin from '../../mixins/mixin'
import { supplierProjectPage,getSelect,bidWinMergeDetail,skyProjectDetail,awardDetail } from '@/api/detail/party-a/dealings'
import HeadDetailForm from "../../component/HeadDetailForm"
import skeleton from '@/views/project/projectList/component/skeleton'

export default {
  props: [
    'data',
    'company-id',
    'title'
  ],
  components: {
    HeadDetailForm,skeleton
  },
  mixins: [mixin],
  data() {
    return {
      isSkeleton:true,
      drawer: false,
      queryParams: {
        companyId: this.data.companyId,
        companyName: this.data.companyName.replace(/<font color='red'>/g,'').replace(/<\/font>/g,''),
        cid: this.companyId,
        pageNum: 1,
        pageSize: 20
      },
      formData: [
        { type: 4, fieldName: 'projects', value: '', placeholder: '合作项目类型', options: []},
        { type: 4, fieldName: 'sources', value: '', placeholder: '数据来源', options: []},
        { type: 6, fieldName: 'money', value: '', placeholder: '合同金额', startMoney: 'amountStart', endMoney: 'amountEnd' },
        { type: 3, fieldName: 'keys', value: '', placeholder: '输入合作项目/工程名称查询', options: [], width: 260},
      ],
      forData: [
        {label: '项目名称', prop: 'projectName', fixed: true},
        {label: '公布时间', prop: 'time', width: '120',sortable:'custom',descending: '3', ascending: '4'},
        {label: '本次合同金额（万元）', prop: 'amount', width: '180',sortable:'custom',descending: '1', ascending: '2'},
        {label: '项目类型', prop: 'projectType', width: '130'},
        {label: '数据来源', prop: 'sourceType', width: '90', slot: true}
      ],
      //列表
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      amountTotal: 0
    }
  },
  created() {
    this.drawer = true
    this.handleQuery()
    this.handleOption()
  },
  methods: {
    async handleOption(){
      let res = await getSelect({})
      if(res.code==200){
        let data = res.data.projects
        for (var i=0;i<data.length;i++){
          this.formData[0].options.push({
            name: data[i],
            value: data[i],
          })
        }
        let data1 = res.data.sources
        for (var i=0;i<data1.length;i++){
          this.formData[1].options.push({
            name: data1[i],
            value: data1[i],
          })
        }
      }
    },
    async handleQuery(params) {
      this.tableLoading = true
      let param = params?params:this.queryParams
      let res = await supplierProjectPage(param)
      this.tableLoading = false
      if(res.code==200){
        this.tableData = res.rows
      }
      this.isSkeleton = false;
      this.tableDataTotal = res.total
      this.amountTotal = res.totalAmount
    },
    handlePic(url, isPic){
      isPic ? url = 'https://imgs.jiansheku.com/'+url : ''
      if(url){
        window.open(url, "_blank")
      }
    },
    linkTo(scope){
      this.drawer = false
      this.$router.push(`/biddetail/${scope.row.sourceId}`)
    },
    linkTo1(scope){
      let url = ""
      switch (scope.row.sourceType) {
        case '中标公示':
          bidWinMergeDetail({sourceId:scope.row.sourceId}).then(res=>{
            if(res.data&&res.data.sourceUrl){
              url = res.data.sourceUrl
              window.open(url, "_blank")
            }
          })
          break;
          case '荣誉奖项':
          awardDetail({sourceId:scope.row.sourceId}).then(res=>{
            if(res.data&&res.data.sourceUrl){
              url = res.data.sourceUrl
              window.open(url, "_blank")
            }
          })
          break;
          case '四库业绩':
          skyProjectDetail({sourceId:scope.row.sourceId}).then(res=>{
            if(res.data&&res.data.sourceUrl){
              url = res.data.sourceUrl
              window.open(url, "_blank")
            }
          })
          break;
        default:
          break;
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
  .client-details {
    ::v-deep .client-dialog{
      width: 80%;
      min-width: 900px;
      background: #FFFFFF;
      .el-dialog__body{
        padding-top: 0;
      }
      .fixed-table{
        .el-table__header-wrapper,.el-table__fixed-header-wrapper{
          top: 0;
        }
      } 
      .el-dialog__header{
        border-bottom: 1px solid #E1E1E1;
      }
      .el-dialog__title{
        font-size: 16px;
        color: #232323;
        font-weight: bold;
        margin-right: 4px;
      }
    }
    .tip-img{
      width: 14px;
      height: 14px;
      margin-right: 4px;
      cursor: pointer;
    }
  }
</style>
