<template>
    <div>
        <div class="apt_stan_header">
            <span v-for="(item,index) in list" class="apt_stan_header_span" :class="activeIndex==index?'active_span':''" :key="index" @click="changeActiveIndex(index)">{{item.name}}</span>
        </div>
        <div class="apt_stan_content">
            <div class="apt_stan_content_header">
                <el-select v-model="value" value-key="id" @change="selectChange" placeholder="请选择" :style="{'width':selectwidth}">
                    <el-option
                    v-for="item in list[activeIndex].list"
                    :key="item.id"
                    :label="item.name"
                    :value="item">
                    </el-option>
                </el-select>
                <el-select v-model="value1" value-key="id" @change="selectChange1" v-if="options1&&options1.length>0" placeholder="请选择" :style="{'width':selectwidth1}">
                    <el-option
                    v-for="item in options1"
                    :key="item.name"
                    :label="item.name"
                    :value="item">
                    </el-option>
                </el-select>
                <el-select v-model="value2" value-key="id" @change="selectChange2" v-if="options2&&options2.length>0" placeholder="请选择" :style="{'width':selectwidth2}">
                    <el-option
                    v-for="item in options2"
                    :key="item.name"
                    :label="item.name"
                    :value="item">
                    </el-option>
                </el-select>
                <el-select v-model="value3" value-key="id" @change="selectChange3" v-if="options3&&options3.length>0" placeholder="请选择" :style="{'width':selectwidth3}">
                    <el-option
                    v-for="item in options3"
                    :key="item.name"
                    :label="item.name"
                    :value="item">
                    </el-option>
                </el-select>
            </div>
            <div style="padding:16px;">
                <el-table :data="info.list" :span-method="objectSpanMethod" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}" v-horizontal-scroll="'hover'"
                class="table-item1 fixed-table" border highlight-current-row>

                    <el-table-column :resizable="false" label="资质名称" fixed >
                        <template slot-scope="scope">
                            {{scope.row.name}}
                        </template>
                    </el-table-column>

                    <el-table-column :resizable="false" label="等级" width="274">
                        <template slot-scope="scope">
                            {{scope.row.level||"--"}}
                        </template>

                    </el-table-column>
                    <el-table-column :resizable="false" label="可承包工程范围" >
                        <template slot-scope="scope">
                            {{scope.row.contractScope||"--"}}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="apt_stan_content_text_box" v-html="info.remark||'--'"></div>

            </div>
        </div>
    </div>
</template>

<script>
  import list from '@/assets/json/certs.json'
  import { standard } from '@/api/supplier/assistant.js'

  export default {
    data(){
        return{
            list,
            activeIndex:0,
            options1: [],
            options2: [],
            options3: [],
            value: '',
            value1: '',
            value2: '',
            value3: '',
            info:"",
          selectwidth:'120px',
          selectwidth1:'120px',
          selectwidth2:'120px',
          selectwidth3:'120px',
        }
    },
    mounted(){
        this.choose()
    },
    methods:{
      choose() {
        this.value = this.list[this.activeIndex].list[0]
        this.selectwidth = this.value.name.length * 14 + 50 + 'px'
        this.options1 = this.list[this.activeIndex].list[0].list
        if (this.options1) {
          this.value1 = this.list[this.activeIndex].list[0].list[0]
          this.options2 = this.list[this.activeIndex].list[0].list[0].list
          if (this.options2) {
            this.value2 = this.list[this.activeIndex].list[0].list[0].list[0]
            this.options3 = this.list[this.activeIndex].list[0].list[0].list[0].list
            if (this.options3) {
              this.value3 = this.list[this.activeIndex].list[0].list[0].list[0].list[0]
              standard({ id: this.value3.id }).then(res => {
                this.info = res.data
              })
            } else {
              standard({ id: this.value2.id }).then(res => {
                this.info = res.data
              })
            }
          } else {
            standard({ id: this.value1.id }).then(res => {
              this.info = res.data
            })
          }
        } else {
          standard({ id: this.value.id }).then(res => {
            this.info = res.data
          })
        }
      },
      flitterData(arr) {
        let spanOneArr = []
        let concatOne = 0
        arr.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1)
          } else {
            if (item.name === arr[index - 1].name) {
              spanOneArr[concatOne] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            }
          }
        })
        return {
          one: spanOneArr
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.flitterData(this.info.list).one[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      selectChange() {
        this.selectwidth = this.value.name.length * 14 + 50 + 'px'
        if (this.value.list && this.value.list.length > 0) {
          this.options1 = this.value.list
          this.value1 = ''
        } else {
          this.options1 = []
          standard({ id: this.value.id }).then(res => {
            this.info = res.data
          })
        }
        this.value2 = ''
        this.options2 = []
        this.selectwidth1 = '120px'
        this.selectwidth2 = '120px'
        this.selectwidth3 = '120px'
      },
      selectChange1() {
        this.info = ''
        this.selectwidth1 = this.value1.name.length * 14 + 50 + 'px'
        if (this.value1.list && this.value1.list.length > 0) {
          this.options2 = this.value1.list
          this.value2 = ''
        } else {
          this.options2 = []
          standard({ id: this.value1.id }).then(res => {
            this.info = res.data
          })
        }
        this.selectwidth2 = '120px'
        this.selectwidth3 = '120px'
      },
      selectChange2() {
        this.info = ''
        this.selectwidth2 = this.value2.name.length * 14 + 50 + 'px'
        if (this.value2.list && this.value2.list.length > 0) {
          this.options3 = this.value2.list
          this.value3 = ''
        } else {
          this.options3 = []
          standard({ id: this.value2.id }).then(res => {
            this.info = res.data
          })
        }
        this.selectwidth3 = '120px'
      },
      selectChange3() {
        this.info = ''
        this.selectwidth3 = this.value3.name.length * 14 + 50 + 'px'
        standard({ id: this.value3.id }).then(res => {
          this.info = res.data
        })
      },
      changeActiveIndex(index) {
        this.info = ''
        this.activeIndex = index
        this.value = ''
        this.options1 = []
        this.value2 = ''
        this.options2 = []
        this.value3 = ''
        this.options3 = []
        this.choose()
      }
    }
  }
</script>

<style lang="scss" scoped>
    .apt_stan_header{
        border-radius: 0px 0px 4px 4px;
        display: flex;
        padding: 16px;
        background: #FFFFFF;
        .apt_stan_header_span{
            cursor: pointer;
            font-size: 14px;
            color: #3D3D3D;
            height: 32px;
            border-radius: 4px;
            padding: 5px 12px;
            margin-right: 12px;
            display: inline-block;
            background: #F3F4F5;
        }
        .active_span{
            background: #F6F9FC;
            color: #0081FF;
        }
    }
    .apt_stan_content{
        margin-top: 16px;
        background: #FFFFFF;
        border-radius: 4px 4px 0px 0px;
        .apt_stan_content_header{
            padding: 16px;
            border-width: 0px 0px 1px 0px;
            border-style: solid;
            border-color: #EEEEEE;
        }
        ::v-deep .el-input__inner{
            border: none;
        }
        .apt_stan_content_text_box{
            border-radius: 0px 0px 4px 4px;
            padding: 16px;
            background: #FFFFFF;
            border: 1px solid #E6EAF1;
            color: #3D3D3D;
            font-size: 12px;
            margin-top: 16px;
        }
    }
</style>
