<template>
  <div class="client-details">
    <el-drawer
      :visible.sync="drawer"
      size="60%"
      custom-class="client-drawer"
      :with-header="false"
      @closed="cancel">
      <head-detail-form
        :title="title"
        :form-data="formData"
        :query-params="queryParams"
        :total="tableDataTotal"
        :amountTotal="amountTotal"
        @handle-search="handleSearch"
      />
      <tables
        :indexFixed="true"
        :tableLoading="tableLoading"
        :tableData="tableData"
        :forData="forData"
        :tableDataTotal="tableDataTotal"
        :queryParams="queryParams"
        @handle-current-change="handleCurrentChange"
        style="margin: 12px;"
      >
        <template slot="projectAllName" slot-scope="scope">
          <div class="flex-box">
            <img class="tip-img" src="@/assets/images/detail/ico_pdf.png" v-if="scope.row.sourceUrl" @click="handlePic(scope.row.sourceUrl)"/>
            <router-link to="" tag="a" class="a-link" v-if="scope.row.id&&scope.row.projectAllName" v-html="scope.row.projectAllName"></router-link>
            <span v-else v-html="scope.row.projectAllName || '--'"></span>
          </div>
        </template>
        <template slot="province" slot-scope="scope">
          {{scope.row.province}}{{`${scope.row.city?'-'+scope.row.city:''}`}}
        </template>
      </tables>
    </el-drawer>
  </div>
</template>

<script>
import mixin from '../../mixins/mixin'
import { supplierProjectPage } from '@/api/detail/party-a/dealings'
import HeadDetailForm from "../../component/HeadDetailForm"

export default {
  props: {
    'data': {
      type: Object,
      default: () => {
        return {}
      }
    },
    'company-id': {
      type: Number,
      default: () => {
        return 0
      }
    },
    'title': {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  components: {
    HeadDetailForm
  },
  mixins: [mixin],
  data() {
    return {
      drawer: false,
      queryParams: {
        cid: this.data.companyId,
        unitId: this.companyId,
        pageNum: 1,
        pageSize: 10
      },
      formData: [
        { type: 3, fieldName: 'keys', value: '', placeholder: '输入合作项目/工程名称查询', options: []},
      ],
      forData: [
        {label: '合作项目/工程名称', prop: 'projectAllName', width: '720', fixed: true, slot: true},
        {label: '项目/工程金额（万元）', prop: 'winBidAmount', width: '160'},
        {label: '合作时间', prop: 'winBidTime', width: '100'},
        {label: '项目地区', prop: 'province', width: '160', slot: true},
        {label: '项目类型', prop: 'boundType', width: '130'},
        {label: '工期（天）', prop: 'period', width: '90'},
        {label: '下浮率', prop: 'lowerRate', width: '90'}
      ],
      //列表
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      amountTotal: 0
    }
  },
  created() {
    this.drawer = true
    this.handleQuery()
  },
  methods: {
    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.tableDataTotal = res.total
      this.amountTotal = res.totalAmount
    },
    handlePic(url){
      window.open(url, "_blank")
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
  .client-details {
    ::v-deep .client-drawer{
      background: #FFFFFF;
    }
    .tip-img{
      width: 14px;
      height: 14px;
      margin-right: 4px;
      cursor: pointer;
    }
  }
</style>
