<template>
  <div class="qualification-container">
    <div class="title_wrap">
      <div class="enterprise_title">
        资质资格
      </div>
    </div>
    <div class="label-item">
      <span @click="handleColor(item.qualificationParamNameCn)" v-for="item in statisticList" :class="{'color':stateColor == item.qualificationParamNameCn}">{{item.qualificationParamNameCn ? item.qualificationParamNameCn : item.qualificationParamName}} {{item.qualificationMount}}</span>
    </div>
    <div class="table-item">
      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
      <el-table
        v-if="!isSkeleton"
        element-loading-text="Loading"
        :data="tableData"
        row-key="id"
        :span-method="objectSpanMethod"
        default-expand-all
        border
        highlight-current-row
      >
        <el-table-column label="序号" width="60" align="left" type="index"></el-table-column>
        <el-table-column label="资质编号" width="200" prop="certificateNo"></el-table-column>
        <el-table-column label="资质名称" min-width="200" prop="certName"></el-table-column>
        <el-table-column label="发证日期" width="180" prop="issueDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.issueDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="有效期" width="180" prop="validityDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.validityDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发证机关" min-width="200" prop="authority"></el-table-column>
      </el-table>
      <div class="pagination-box" v-if="show_page && tableDataTotal>queryParams.pageSize">
        <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </div>
    </div>
  </div>
</template>

<script>
  import skeleton from '../component/skeleton';
  import { statistic } from '@/api/detail/party-a/index';
  import { certPage,certChangePage,recordAreaList,recordWebSiteList,liceList } from '@/api/detail/party-a/qualification';
  export default {
    name: "qualification",
    components: {
      skeleton,
    },
    // props: ['companyId'],
    data() {
      return {
        tableData:[],
        isSkeleton:true,
        statisticList:[],
        queryParams:{
          pageNum:1,
          pageSize:10
        },
        companyId:'6034',
        stateColor:'',
        tableDataTotal: null,
        show_page:true,
        MaxPage:500,
      }
    },
    created() {
      this.getStatistic()
    },
    //计算集
    computed: {

    },
    //方法集
    methods: {
      async getStatistic() {
        let params = {
          ...this.queryParams,
          companyId: this.companyId,
          category:''
        };
        let res = await statistic(params);
        if (res.code == 200) {
          let data=res.data.newQualification
          let arr=[]
          for(let i=0; i<data.length; i++){
            if(data[i].qualificationMount !=0){
              arr.push(data[i])
            }
          }
          let removerList=['资质变更','备案地','备案网站','安许证']

          let arrList=arr.filter(function (item) {
            return !removerList.includes(item.qualificationParamNameCn)
          })
          this.statisticList = arrList;


          this.stateColor=this.statisticList[0].qualificationParamNameCn;
          this.getCertPage()

          // if(this.stateColor === '资质变更'){
          //   this.getCertChangePage()
          // }
          // if(this.stateColor === '备案地'){
          //   this.getRecordArea()
          // }
          // if(this.stateColor === '备案网站'){
          //   this.getRecordWebSite()
          // }
          // if(this.stateColor === '安许证'){
          //   this.getLice()
          // }

        }
      },

      async getCertPage(){
        this.isSkeleton = true
        let params = {
          ...this.queryParams,
          companyId: this.companyId,
          category:this.stateColor
        };
        let res = await certPage(params);
        if (res.code == 200) {
          this.tableData=res.rows;
          this.isSkeleton = false
        }
      },
      //资质变更
      async getCertChangePage(){
        this.isSkeleton = true
        let params = {
          ...this.queryParams,
          cid: this.companyId,
        };
        let res = await certChangePage(params);
        if (res.code == 200) {
          this.tableData=res.rows;
          this.isSkeleton = false
        }
      },
      async getRecordArea(){
        this.isSkeleton = true
        let params = {
          ...this.queryParams,
          cid: this.companyId,
        };
        let res = await recordAreaList(params);
        if (res.code == 200) {
          this.tableData=res.data;
          this.isSkeleton = false
        }
      },
      async getLice(){
        this.isSkeleton = true
        let params = {
          ...this.queryParams,
          cid: this.companyId,
        };
        let res = await liceList(params);
        if (res.code == 200) {
          this.tableData=res.data;
          this.isSkeleton = false
        }
      },
      async getRecordWebSite(){
        this.isSkeleton = true
        let params = {
          ...this.queryParams,
          cid: this.companyId,
        };
        let res = await recordWebSiteList(params);
        if (res.code == 200) {
          this.tableData=res.data;
          this.isSkeleton = false
        }
      },
      handleColor(value){
        this.queryParams.pageNum=1
        this.stateColor=value;
        if(this.stateColor === '资质变更'){
          this.getCertChangePage()
        }else if(this.stateColor === '备案地'){
          this.getRecordArea()
        }else if(this.stateColor === '备案网站'){
          this.getRecordWebSite()
        }else if(this.stateColor === '安许证'){
          this.getLice()
        }else {
          this.getCertPage()
        }
      },
      // 重置页数
      handleSizeChange(val) {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = val
        this.querySubmit()
      },
      // 跳转指定页数
      handleCurrentChange(val) {
        if(this.MaxPage<val){
          this.show_page = false
          this.$nextTick(() => {
            this.queryParams.pageNum = 1
            this.$message.warning(`对不起，最多只能访问${this.MaxPage}页`)
            this.show_page = true
          })
        }else {
          this.queryParams.pageNum = val
          this.getCertPage()
          window.scrollTo(0, 0);
        }
      },
      flitterData(arr) {
        let spanOneArr = []
        let concatOne = 0
        arr.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1)
          } else {
            if (item.code === arr[index - 1].code) {
              spanOneArr[concatOne] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            }
          }
        })
        return {
          one: spanOneArr
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1) {
          const _row = this.flitterData(this.tableData).one[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .qualification-container{
    .title_wrap{
      border-bottom: 0;
    }
    .label-item{
      padding: 0 16px;
      span{
        display: inline-block;
        height: 38px;
        border-radius: 4px;
        line-height: 38px;
        border: 1px solid #DCDFE6;
        color: #232323;
        font-size: 14px;
        margin-right: 8px;
        padding: 0 12px;
        margin-bottom: 8px;
        cursor: pointer;
      }
      .color{
        background: rgba(0, 129, 255, 0.1);
        border: 1px solid rgba(0, 129, 255, 0.1);
        color: #0081FF;
      }
    }
    .table-item{
      padding:8px 16px 16px 16px;
    }
  }
</style>
