<template>
  <div class="qualification-container">
    <div class="title_wrap">
      <div class="enterprise_title">
        资质资格
      </div>
    </div>
    <div class="label-item">
      <span class="color">建筑业企业资质 31</span>
      <span>工程设计资质 31</span>
    </div>
    <div class="table-item">
      <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="150" prop="code"></el-table-column>
        <el-table-column label="资质名称" min-width="200" prop="expenseName"></el-table-column>
        <el-table-column label="发证日期" width="150" prop="date"></el-table-column>
        <el-table-column label="有效期" width="150" prop="time"></el-table-column>
        <el-table-column label="发证机关" min-width="200" prop="fzjg"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import skeleton from '../component/skeleton';
  export default {
    name: "qualification",
    components: {
      skeleton,
    },
    data() {
      return {
        tableData:[
          {
            code:'D123456489',
            expenseName:'冶金工程施工总承包一级',
            date:'2020-08-01',
            time:'2020-08-01',
            fzjg:'住房和城乡建设部',
          },
          {
            code:'D123456489',
            expenseName:'冶金工程施工总承包二级',
            date:'2020-08-01',
            time:'2020-08-01',
            fzjg:'住房和城乡建设部',
          },
          {
            code:'D123456489',
            expenseName:'冶金工程施工总承包san级',
            date:'2020-08-01',
            time:'2020-08-01',
            fzjg:'住房和城乡建设部',
          },
          {
            code:'D323156489',
            expenseName:'冶金工程施工总承包san级',
            date:'2020-08-01',
            time:'2020-08-01',
            fzjg:'住房和城乡建设部',
          },
        ],
        isSkeleton:false,
      }
    },
    created() {

    },
    //计算集
    computed: {

    },
    //方法集
    methods: {
      handleSearch(){

      },
      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;
      }
      .color{
        background: rgba(0, 129, 255, 0.1);
        border: 1px solid rgba(0, 129, 255, 0.1);
        color: #0081FF;
      }
    }
    .table-item{
      padding: 16px;
    }
  }
</style>
