<template>
  <div class="client-details">
    <el-drawer
      :visible.sync="drawer"
      size="40%"
      custom-class="client-drawer"
      :with-header="false"
      @closed="cancel">
      <div class="head">
        <img class="tip-img" src="@/assets/images/icon.png" />
        <span>{{title}}</span>
      </div>
      <div class="cooperate-name" id="focus01">
        <el-input clearable @clear="changeSelect" style="width: 300px;" @focus="clickFocus('focus01')" @blur="clickFocus('focus01')" v-model="queryParams.companyName" placeholder="成员名称查询"></el-input>
        <span @click="changeSelect">搜索</span>
      </div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
      <tables
        v-if="!isSkeleton"
        :tableLoading="tableLoading"
        :tableData="tableData"
        :forData="forData"
        :tableDataTotal="tableDataTotal"
        :queryParams="queryParams"
        :MaxPage=500
        @handle-current-change="handleCurrentChange"
        style="margin: 12px;"
      >
        <template slot="companyName" slot-scope="scope">
          <div @click="cancel">
            <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.companyId)}`:`/company/${encodeStr(scope.row.companyId)}`" tag="a" class="a-link" v-if="scope.row.companyId&&scope.row.companyName" v-html="scope.row.companyName"></router-link>
          </div>
          <!--<div v-else v-html="scope.row.companyName || '&#45;&#45;'"></div>-->
        </template>
      </tables>
    </el-drawer>
  </div>
</template>

<script>
  import mixin from '../../party-a/mixins/mixin'
  import {memberCertificateList} from '@/api/detail/groupAccount/groupAccount'

export default {
  props: [
    'data',
    'title'
  ],
  components: { },
  mixins: [mixin],
  data() {
    return {
      drawer: false,
      isSkeleton:true,
      queryParams: {
        id: this.data.id,
        pageNum: 1,
        pageSize: 10,
        companyName:''
      },
      forData: [
        {label: '拥有该资质成员', prop: 'companyName', slot: true},
        {label: '成员共有资质（个）', prop: 'certificateCount'},
      ],
      //列表
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      amountTotal: 0
    }
  },
  created() {
    this.drawer = true;
    this.handleQuery()
  },
  methods: {
    async handleQuery(params) {
      this.isSkeleton = true
      let param = params?params:this.queryParams;
      console.log(param)
      let res = await memberCertificateList(param)
      this.isSkeleton = false
      if(res.code==200){
        this.tableData = res.rows
      }
      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.id}`)
    },
    cancel() {
      this.$emit('cancel')
    },
    changeSelect(){
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    clickFocus(e){
      document.getElementById(e).classList.toggle('span-ba')
    },
    //分页
    handleCurrentChange(e){
      this.queryParams.pageNum = e
      this.handleQuery()
    },
  }
}
</script>

<style lang="scss" scoped>
  .client-details {
    ::v-deep .client-drawer{
      background: #FFFFFF;
    }
    .head{
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #E1E1E1;
    }
    .tip-img{
      width: 17px;
      height: 17px;
      margin: 0 8px -2px 12px;
    }
    .cooperate-name {
      display: flex;
      border-radius: 2px 0px 0px 2px;
      border: 1px solid #D9D9D9;
      line-height: 34px;
      height: 34px;
      width: 300px;
      float: right;
      margin: 12px;
      span {
        width: 80px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        background: #F5F5F5;
        text-align: center;
        color: #0081FF;
        border: 1px solid #EFEFEF;
        border-left: 0;
        cursor: pointer;
      }
      &.span-ba{
        border: 1px solid #0081FF;
        span{
          color: #ffffff;
          background: #0081FF;
          border: 1px solid #0081FF;
        }
      }
      ::v-deep .el-input{
        flex: 1;
      }
      ::v-deep .el-input__inner {
        border: 0;
        line-height: 32px;
        height: 32px;
        position: absolute;
        top: 0;
        padding-right: 22px;
        font-size: 12px;
        padding-left: 8px;
      }
    }
  }
</style>
