<template>
  <div class="qualifications">
    <head-form
      title="集团资质"
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      :isExcel="false"
      @handle-search="handleSearch"
    />
    <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
    <tables
      v-if="!isSkeleton"
      :defaultSort="defaultSort"
      :tableLoading="tableLoading"
      :tableData="tableData"
      :MaxPage=500
      :forData="forData"
      :tableDataTotal="tableDataTotal"
      :queryParams="queryParams"
      @handle-current-change="handleCurrentChange"
      @sort-change="sortChange"
    >
      <template slot="companyCount" slot-scope="scope">
        <div style="cursor: pointer;color: #0081FF;" @click="handleClick($event, scope.row)" v-html="scope.row.companyCount || '--'"></div>
      </template>
    </tables>
    <qualifications-detail
      v-if="isDetails"
      :data="rowData"
      :title="title"
      @cancel="isDetails=false" />
  </div>
</template>

<script>
  import mixin from '../../party-a/mixins/mixin'
  import {certificateList,certificateCount} from '@/api/detail/groupAccount/groupAccount'
  import QualificationsDetail from './qualificationsDetail'
  export default {
    name: 'qualifications',
    props: ['customerId','name'],
    mixins: [mixin],
    components:{
      QualificationsDetail
    },
    data(){
      return{
        isSkeleton:true,
        tableLoading:false,
        isDetails: false,
        defaultSort: {prop: 'time', order: 'descending'},
        queryParams: {
          combineId:this.customerId,
          pageNum: 1,
          pageSize: 20
        },
        forData: [
          {label: '资质名称', prop: 'qualificationName'},
          {label: '拥有该资质成员', prop: 'companyCount', slot: true},
        ],
        formData: [
          { type: 1, fieldName: 'qualificationType', value: '', placeholder: '筛选', options:[],width:260},
        ],
        tableData:[],
        tableDataTotal:0,
        title:'',
        rowData:''
      }
    },
    created() {
      this.handleQuery()
      this.getCertificateList()
    },
    methods: {
      handleQuery(params){
        this.isSkeleton = true
        let data = params ? params : this.queryParams
        certificateList(data).then(res=>{
          this.isSkeleton = false
          if(res.code === 200){
            this.tableData = res.rows
            this.tableDataTotal = res.total
          }else {
            this.tableData = []
          }
        })
      },
      getCertificateList(){
        certificateCount({combineId: this.queryParams.combineId}).then(res=>{
          let data = res.data
          for(let i=0; i<data.length; i++){
            this.formData[0].options.push({
              name:  data[i].qualificationName+ '（' + data[i].companyCount + '）',
              value: data[i].qualificationType,
            })
          }
        })
      },
      handleClick(e, data) {
        this.title=this.name+'-'+data.qualificationName+'（共'+ data.companyCount +'条）'
        this.rowData = data
        this.isDetails = true
      },
    }
  }
</script>

<style lang="scss" scoped>
  .qualifications{
    background: #ffffff;
    border-radius: 4px;
    padding: 16px;
    .headForm{
      margin-bottom: 14px;
      .common-title{
        margin-right: 24px;
      }
    }
    ::v-deep .el-table{
      .has-gutter{
        tr{
          th:nth-last-child(2){
            border-right:0;
          }
          td:nth-last-child(2){
            border-right:0;
          }
        }
      }
      .el-table__cell.gutter{
        background: #F0F3FA;
      }
    }
  }
</style>
