<template>
  <div class="qualifications">
    <head-form
      title="集团资质"
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      :isExcel="false"
      @handle-search="handleSearch"
    />
    <div style="margin-bottom: 20px;">
      <!--certificateList-->
      <div class="item_ckquery" :style="height?'height:'+height+'':'height: 60px'">
        <template v-for="(item,index) in certificateList">
          <el-tooltip  popper-class="certificateTips" placement="bottom" effect="light" :disabled="isShowTooltip" :key="index">
            <span class="span" @mouseover="onMouseOver('isOverflow'+index)" :class="{'color_text':queryParams.qualificationType === item.qualificationType}">
              <span :ref="`isOverflow`+index" @click="changeType(item.qualificationType)">
              {{item.qualificationName}}（{{item.companyCount}}）
            </span>
            </span>
            <span slot="content" :class="{'color_text':queryParams.qualificationType === item.qualificationType}">
              {{item.qualificationName}}（{{item.companyCount}}）
            </span>
          </el-tooltip>
        </template>
      </div>
      <el-divider v-if="certificateList.length > 10 && !height" @click="moreClick()">更多<span></span></el-divider>
    </div>
    <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','combineName'],
    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,
          qualificationType:''
        },
        forData: [
          {label: '资质名称', prop: 'qualificationName'},
          {label: '拥有该资质成员', prop: 'companyCount', slot: true},
        ],
        formData: [
          // { type: 1, fieldName: 'qualificationType', value: '', placeholder: '筛选', options:[],width:260},
        ],
        tableData:[],
        tableDataTotal:0,
        title:'',
        rowData:'',
        certificateList:[],
        height:'',
        isShowTooltip: false
      }
    },
    created() {
      this.getCertificateList()
    },
    methods: {
      onMouseOver (str) { // 内容超出，显示文字提示内容
        const tag = this.$refs[str]
        const parentWidth = tag[0].parentNode.offsetWidth // 获取元素父级可视宽度
        const contentWidth = tag[0].offsetWidth // 获取元素可视宽度
        this.isShowTooltip = contentWidth <= parentWidth
      },
      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
          this.certificateList=res.data;
          this.queryParams.qualificationType=res.data[0].qualificationType;
          this.handleQuery()
          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.combineName+'-'+data.qualificationName+'（共'+ data.companyCount +'条）'
        this.rowData = data
        this.isDetails = true
      },
      changeType(value){
        this.queryParams.qualificationType=value;
        this.queryParams.pageNum=1;
        this.queryParams.pageSize=20;
        this.handleQuery()
      },
      moreClick(){
        this.height='auto'
      },

    }
  }
</script>
<style lang="scss">
  .certificateTips.is-light{
    /*padding: 12px;*/
    /*width: 318px;*/
    /*box-sizing: border-box;*/
    /*font-size: 14px;*/
    /*line-height: 20px;*/
    color: #333333;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.08);
    .popper__arrow {
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
      border-top-color: rgba(0, 0, 0, 0.08) !important;
    }
  }
</style>
<style lang="scss" scoped>
  .qualifications{
    background: #ffffff;
    border-radius: 4px;
    padding: 16px;
    .headForm{
      margin-bottom: 14px;
      .common-title{
        margin-right: 24px;
      }
    }
    .item_ckquery{
      position: relative;
      margin-bottom: 10px;
      overflow: hidden;
      .span{
        color: #232323;
        margin-bottom: 4px;
        height: 25px;
        line-height: 25px;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        width: 19%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span{
          padding: 0 10px;
          /*display: inline-block;*/
          /*padding-right: 20px;*/
        }
      }
      .span:hover{
        background: #F3F4F5;
        border-radius: 4px;
        color:#0081FF;
      }
      .color_text{
        background: #F3F4F5;
        border-radius: 4px;
        color: #0081FF;
      }
      .select-active{
        color: #0081FF;
      }
    }
    ::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;
      }
    }
    ::v-deep .el-divider{
      /*width: calc(100% - 107px);*/
      margin-top: 12px;
      .el-divider__text{
        cursor: pointer;
        span{
          display: inline-block;
          width: 16px;
          height: 16px;
          position: relative;
          top: 2px;
          background: url('../../../../assets/images/down.png');
          background-size:  16px 16px;
        }
        &:hover{
          color: #0081FF;
          span{
            background: url('../../../../assets/images/down1.png');
            background-size:  16px 16px;
          }
        }
      }
    }
  }
</style>
