<template>
  <div class="app-container">
    <div class="filter-container" style="justify-content: space-between;padding: 0 10px;">
        <div class="filter-container">
            <div class="container_item">
                <el-input v-model="query.descrip"  class="filter-item input_item"   />
            </div>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="getData">
                {{ $t('table.search') }}
            </el-button>

        </div>
    </div>
   <div class="industry-data" >
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="level1-table" :style="{'height':tableHeight+'px'}">
            <div class="table-tit"></div>
            <div class="table-cnt">
              <div class="layout-table table-fixed">
                <div class="thead">
                  <span class="td col">抵(质)押品大类编号</span>
                  <span class="td col">
                    <span class="col-name">中文名称</span>
                    <span class="col-name">英文名称</span>
                    <span class="btn">
                        <el-button v-if="permission.includes('kikulist_general_ategory')" type="text" v-waves @click="handleCreate('1')">
                            <template slot class="ss" >
                            <div class="slot-cnt">
                                <img src="@/assets/images/add1.png" alt="">
                                <span>新增大类</span>
                            </div>
                            </template>
                        </el-button>
                    </span>

                  </span>
                </div>
                <div class="tbody">
                  <div class="tr"
                    v-for="(item,index) in tableData"
                    :key="item.id"
                    :class="{'active': tab_index === index}"  @click="rowClick(item,index)">
                    <span class="td col" > {{ item.colCode }}</span>
                    <span class="td col">
                      <span class="col-name" :title="item.chineseName" style="border-right:1px solid #C0C4CC;"> {{ item.chineseName }}</span>
                      <span class="col-name" :title="item.englishName" > {{ item.englishName }}</span>
                      <span class="btn">
                        <img v-if="permission.includes('kikulist_update')" @click.stop="handleUpdate(item,1)" class="imgs" style="margin:0 5px 0 10px;"
                        :src="tab_index === index ? selectModifyImg:modifyImg" alt="">
                        <img v-if="permission.includes('kikulist_del')" @click.stop="handleDelete(item,1)" class="imgs" style="margin:0 10px 0 5px;"
                        :src="tab_index === index ? selectDelimg:delImg" alt="">
                      </span>
                    </span>
                  </div>
                </div>
                <div class="tpage">
                  <pagination :total="listQuery.total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getData"/>
                </div>
              </div>
            </div>
          </div>
        </el-col>
         <el-col :span="12">
          <div class="level-table" :style="{'height':tableHeight+'px'}" >
            <div class="table-tit">
              <span class="btn">
                <el-button @click="handleCreate('2')" v-if="rowData.colCode && permission.includes('kikulist_fine_class')" type="text">
                    <template slot class="ss" >
                    <div class="slot-cnt">
                        <img src="@/assets/images/add1.png" alt="">
                        <span>新增细类</span>
                    </div>
                    </template>
                </el-button>
              </span>
            </div>
            <div class="table-cnt">
              <div class="layout-table table-fixed">
                <div class="thead1">
                  <template>
                    <span class="td col" :title="rowData.colCode+'-'+rowData.chineseName">
                      {{rowData.colCode}}-{{rowData.chineseName}}
                    </span>
                  </template>
                  <span class="td col"></span>
                </div>
                <div class="tbody">
                  <el-table
                    :data="childrenData"
                    fit
                    stripe
                    style="width: 100%;color: #212121;"
                    :max-height="tableHeight"
                    ref="childrenData"
                >

                    <el-table-column prop="colCode" label="抵(质)押品细类编号" width="150px" align="left"></el-table-column>
                    <el-table-column prop="chineseName" label="中文名称" width="180px" show-overflow-tooltip align="left"></el-table-column>
                    <el-table-column prop="englishName" label="英文名称"  show-overflow-tooltip align="left"> </el-table-column>
                    <el-table-column  align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <img
                        v-if="permission.includes('kikulist_update')"
                        @click="handleUpdate(scope.row,2)"
                        class="imgs"
                        style="width: 27px;height: 27px;margin:0 5px 0 10px;cursor: pointer;"
                        src="@/assets/images/v3/v3_dataModify.png" alt="">
                      <img
                        v-if="permission.includes('kikulist_del')"
                        @click="handleDelete(scope.row,2)"
                        class="imgs" style="width: 27px;height: 27px;margin:0 10px 0 5px;cursor: pointer;"
                        src="@/assets/images/v3/v3_dataDel.png" alt="">
                        <!-- <div  v-if="permission.includes('kikulist_update')" @click="handleUpdate(scope.row,2)" class="operate" style="margin-right:10px;" ></div>
                        <div  v-if="permission.includes('kikulist_del')" @click="handleDelete(scope.row,2)" class="operate"  ></div> -->
                    </template>
                    </el-table-column>
                </el-table>
                </div>
                <div class="tpage">
                  <pagination  :total="listQuery.total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getChildren"/>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>



    <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogVisible"
        v-el-drag-dialog
        :close-on-click-modal="false"
        width="499px">
        <div class="add_info">
            <div class="add_l">
                <span>{{currentType==1?'抵(质)押品大类编号':'抵(质)押品细类编号'}}：</span>
                <span>{{currentType==1?'抵(质)押品大类':'抵(质)押品细类'}}中文名称：</span>
                <span>{{currentType==1?'抵(质)押品大类':'抵(质)押品细类'}}英文名称：</span>
                <span v-if="currentType==2">公允值评估法：</span>
            </div>
            <div class="add_r">
                <el-input :disabled="true" v-model="form.colCode"  class="unabled is-disabled"    />
                <el-input :disabled="handleType==3?true:false" v-model="form.chineseName" :class="{'unabled is-disabled': handleType==3}" class="filter-item input_item flex-input"   />
                <el-input :disabled="handleType==3?true:false" v-model="form.englishName" :class="{'unabled is-disabled': handleType==3}" class="filter-item input_item flex-input"    />
                <el-select
                  v-if="currentType==2"
                  v-model="form.fairValueType"
                  :disabled="handleType==3"
                  :placeholder="handleType==3 ? '' : '请选择'"
                  :class="{'unabled is-disabled': handleType==3}"
                  class="filter-item input_item flex-input">
                    <el-option
                    v-for="item in fairValueTypeList"
                    :key="item.code"
                    :label="item.desc"
                    :value="item.code">
                    </el-option>
                </el-select>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="sbumitData">
                {{ $t('table.sbumit') }}
            </el-button>
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="dialogVisible=false">
                {{ $t('table.cancel') }}
            </el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from 'vuex'
import waves from '@/directive/waves' // waves directive
// import { parseTime } from '@/utils'
import Pagination from '../businessparameters/components/Pagination.vue' // secondary package based on el-pagination
import http from '@/api/http'

export default {
  name: '',
  components: { Pagination },
  directives: { waves, elDragDialog },

  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      total: 0,
      pageSize:99,
      pageNum:1,
      tableHeight: 0,
      cWidth:0,
      tabw:0,
      listQuery:{
        total: 0,
        pageSize:99,
        pageNum:1,
      },
      dialogVisible:false,
      tableData:[],
      childrenData:[],
      rowData:{},
      getIndex:'',
      form:{},
      handleType:1,
      currentType:1,
      updateVisible:false,
      textMap: {
        create1: '新增大类',
        create2: '新增细类',
        update1: '编辑大类',
        update2: '编辑细类',
        delete:'是否删除',
        delete1: '删除大类',
        delete2: '删除细类'
      },
      dialogStatus: '',
      query:{},
      tab_index:0,
      bigCode:'',
      fairValueTypeList:[{code:1,desc:'市价重估'},{code:2,desc:'成本法'},{code:3,desc:'收益法'},{code:4,desc:'人工'}],
      select1:0,
      selectDelimg:require('@/assets/images/v3/v3_dataSd.png'), //选中删除
      delImg:require('@/assets/images/v3/v3_dataDel.png'),
      modifyImg:require('@/assets/images/v3/v3_dataModify.png'),
      selectModifyImg:require('@/assets/images/v3/v3_dataSm.png') //选中编辑
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
      this.cWidth = window.innerWidth- 210
      this.tabw = (this.cWidth-464)/4
    })
  },
  methods: {
    getData() {
        http.post(`/collateral/list`,{code:0,...this.query}).then((res)=>{
          this.tableData = res.data;
          this.total = res.data.length || 0;
          this.childrenData = []
          this.rowData = {}
          this.tab_index = 0
          if (res.data.length !== 0) {
            this.rowClick(res.data[0],0)
          }
        }).catch(err=>{});
    },
    // 数据字典主索引 行row点击
    rowClick(row, index) {
        this.rowData = row
        this.tab_index = index
        this.bigCode = row.colCode || 0
        this.getChildren()
    },
    getChildren(){
        if(this.bigCode){
            http.post(`/collateral/list`,{code:this.bigCode}).then((res)=>{
                this.childrenData = res.data;
                this.$nextTick(function(){
                    this.$refs.childrenData.setCurrentRow(this.childrenData[0])
            })
            }).catch(err=>{});
        }

    },
    childRowClick(row, column, event){
        let cur = this.childrenData.findIndex(item=>{
           return item === row
        })
       this.$nextTick(()=>{
           this.$refs.childrenData.setCurrentRow(this.childrenData[cur])
       })
    },
    sbumitData(){
        if(!this.form.colCode){
          this.$message.error('请输入抵(质)押品编号')
          return false
        }
        if(!this.form.chineseName){
          this.$message.error('请输入中文名称')
          return false
        }
        if(!this.form.englishName){
          this.$message.error('请输入英文名称')
          return false
        }
        if (this.currentType == 2) {
          if(!this.form.fairValueType){
            this.$message.error('请选择公允值评估法')
            return false
          }
        }
        let url = ''
        if(this.handleType==1){
            this.form.colPcode = this.dialogStatus == 'create1' ?  '0' : this.rowData.colCode
            url = `/collateral/add`
        }else if(this.handleType ==2){
            url = `/collateral/update`
        }else if(this.handleType==3){
            url =`/collateral/delById`
        }
        http.post(url,this.form).then((res)=>{
            this.$message.success('提交成功！');

            if (this.dialogStatus === 'create2'
            || this.dialogStatus === 'update2'
            || this.dialogStatus === 'delete2') {
              this.getChildren()
            } else {
              this.getData();
            }
            // this.getData();
            // this.getChildren()
            this.dialogVisible = false;
        }).catch(err=>{});
    },
    handleCreate(type){
      this.dialogVisible = true
      let par;
      console.log('type------', type);
      this.handleType = 1
      this.currentType = type
      if(type==1){
        this.dialogStatus = 'create1'
        par={code:0}
      }else{
        this.dialogStatus = 'create2'
        par={code:this.rowData.colCode}
      }
      http.post(`/collateral/getNextCode`,par).then((res)=>{
        this.form = {
          colCode:res.data.code
        }
        this.dialogVisible = true
      }).catch(err=>{});

    },
    handleUpdate(row,type){
         http.post(`/collateral/getId`,{id:row.id}).then((res)=>{
            this.form = res.data
            this.handleType = 2
            this.currentType = type
            if(type==1){
                this.dialogStatus = 'update1'
            }else{
                this.dialogStatus = 'update2'
            }
            this.dialogVisible = true
        }).catch(err=>{});
        // this.form = {
        //     colCode:row.colCode,
        //     colPcode:row.colPcode,
        //     chineseName:row.chineseName,
        //     englishName:row.englishName,
        //     id:row.id
        // }

    },
    handleDelete(row,type){
        this.form = {
            colCode:row.colCode,
            colPcode:row.colPcode,
            chineseName:row.chineseName,
            englishName:row.englishName,
            id:row.id
        }
        this.handleType = 3
        if(type==1){
            this.dialogStatus = 'delete1'
        }else{
            this.form = Object.assign(this.form, { fairValueType: row.fairValueType })
            this.dialogStatus = 'delete2'
        }
        this.currentType = type
        this.dialogVisible = true
    },
    pagination(page,limin){
        this.pageSize = limin
        this.pageNum = page
        this.getData()
    },

    headerStyle() {
      return 'tableStyle'
    }

  }
}
</script>
<style lang='scss' scoped>
@import '@/styles/mixin.scss';
::v-deep .el-table__header-wrapper .gutter{
    background:unset !important
}

::v-deep .el-table__body{
    tr.current-row{
        background: linear-gradient(#4574BE, #4574BE) no-repeat, #7e9ed1 !important;
        animation: identSel .3s;
        color: #FFFFFF;
        border: 1px solid #3D5596;
        transition: all .3s;
        td{
            background: unset !important;
            .operate{
                width: 27px;
                height: 27px;
                &:first-child{
                    background:url("~@/assets/images/v3/v3_dataSm.png") no-repeat;
                    background-size: 100%;
                }
                &:last-child{
                    background:url("~@/assets/images/v3/v3_dataSd.png") no-repeat;
                    background-size: 100%;
                }
            }
        }

    }
    .el-table__row{
        td{
            &:last-child{
                .cell{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    // cursor: pointer;
    // background: linear-gradient(#4574BE, #4574BE) no-repeat, #7e9ed1 !important;
    // color: #FFFFFF;
}
.operate{
    width: 27px;
    height: 27px;
    &:first-child{
        background:url("~@/assets/images/v3/v3_dataModify.png") no-repeat;
        background-size: 100%;
    }
    &:last-child{
        background:url("~@/assets/images/v3/v3_dataDel.png") no-repeat;
        background-size: 100%;
    }
}
  .row-style{
    border: 1px solid #3D5596 !important;
    }
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }

  .add_info{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      .add_l{
          display: flex;
          align-items: flex-end;
          flex-direction: column;
          span{
              font-size: 14px;
                font-family: "SourceHanSansCN";
                font-weight: 500;
                color: #212121;
                display: inline-block;
                line-height: 40px;
                padding:0 5px;
          }
      }
      .add_r{
          display: flex;
          justify-content: flex-start;
          flex-direction: column;
          .input_item{
              width: 295px !important;
              margin-bottom: 4px;
              margin-top: 6px;
          }
      }
  }
@keyframes identSel {
  0% { background-size: 0% 100%; }
  25% { background-size: 25% 100%; }
  50% { background-size: 50% 100%; }
  75% { background-size: 75% 100%; }
  100% { background-size: 100% 100%; }
}
::v-deep .el-table {
    thead{
        color:#212121;
    }
    .el-table__header{
        th{
            .cell{
                font-size: 14px;
            }
        }
    }
}

.industry-data {
  .level1-table {
    overflow: hidden;
    height: 100%;
    .table-cnt {
      width: 100%;
      height: 100%;
      .table-fixed {
        width: 100%;
        .thead {
          height: 36px;
          display: flex;
          font-size: 14px;
          font-family: 'SourceHanSansCN';
          .td:first-child {
            width: 130px;
            @include flex-center;
            color:#212121;
            font-weight: bold;
          }
          .td:last-child {
            color:#212121;
            flex: 1;
            display: flex;
            font-weight: bold;
            .col-name {
              width: calc(100% - 90px);
              padding-left: 10px;
              @include flex-left;
            }
            .btn {
            //   width: 90px;
              @include flex-center;
              .slot-cnt {
                font-family: 'SourceHanSansCN';
                font-weight: bold;
                color: #3D5596;
                @include flex-center;
              }
              img {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                margin-right: 2px;
              }
            }
          }
        }
        .tbody {
          padding-right: 2px;
          height: calc(100% - 90px);
          overflow-x: hidden;
          overflow-y: scroll;
           border: 1px solid #9EAACA;
          &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 6px;
            background-color: #A6A6A6;
          }
          &::-webkit-scrollbar-track {
            background-color: #F1F1F1;
          }
        }
      }

      .layout-table {
        font-size: 13px;
        font-family: 'SourceHanSansCN';
        height: 100%;
        .thead .tr {
          display: flex;
        }
        .tbody .tr {
          display: flex;
          background: #F8FAFB;
          border-bottom: 1px solid #C0C4CC;
          cursor: pointer;
          // &:last-child {
          //   border-bottom: none;
          // }
          &.active {
            // background: #4574BE;
            background: linear-gradient(#4574BE, #4574BE) no-repeat, #7e9ed1;
            // background-size: 50% 100%;
            border: none;
            box-sizing: border-box;
            color: #FFFFFF;
            transition: all .3s;
            animation: identSel .3s;
          }
        }
        .tbody .td {
          height: 54px;
        }
        .tbody .td:first-child {
          width: 130px;
          font-size: 13px;
          border-right: 1px solid #C0C4CC;
          @include flex-center;
        }
        .tbody .td:last-child {
          flex: 1;
          display: flex;
          border-right: 1px solid #C0C4CC;
          .col-name {
            width: calc(100% - 60px);
            padding-left: 10px;
            @include flex-left;
            display: table-cell;
            vertical-align:middle;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            line-height: 56px;
            border-right: 1px solid #C0C4CC;
          }
          .btn {
            width: 100px;
            @include flex-center;
            .slot-cnt {
              font-family: 'SourceHanSansCN';
              font-weight: bold;
              color: #3D5596;
              @include flex-center;
            }
            img {
              width: 27px;
              height: 27px;
              border-radius: 50%;
              margin-right: 2px;
              cursor: pointer;
            }
          }
        }
        .tpage {
          height: 54px;
          border: 1px solid #9EAACA;
          border-top: none;
          background: #F8FAFB;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
        }
      }
    }
  }
  .level-table {
    overflow: hidden;
    height: 100%;
    .table-tit {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .btn {
        // width: 90px;
        @include flex-center;
        .slot-cnt {
          font-family: 'SourceHanSansCN';
          font-weight: bold;
          color: #3D5596;
          @include flex-center;
        }
        img {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          margin-right: 2px;
        }
      }
    }
    .table-cnt {
      width: 100%;
      height: 100%;
      .table-fixed {
        width: 100%;
        // padding-right: 2px;
        .thead1 {
          height: 36px;
          padding-left: 10px;
          font-size: 13px;
          color: #3D5596;
          background-color: #D4EBFE;
          font-family: 'SourceHanSansCN';
          @include flex-left;
          .td:first-child {
            width: calc(100% - 5px);
            height: 36px;
            line-height: 36px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .thead {
          height: 36px;
          display: flex;
          font-size: 14px;
          font-family: 'SourceHanSansCN';
          .td:first-child {
            width: 100px;
            @include flex-center;
          }
          .td:last-child {
            flex: 1;
            display: flex;
            .col-name {
              width: calc(100% - 90px);
              padding-left: 10px;
              @include flex-left;
            }
            .btn {
              width: 90px;
              @include flex-center;
              .slot-cnt {
                font-family: 'SourceHanSansCN';
                font-weight: bold;
                color: #3D5596;
                @include flex-center;
              }
              img {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                margin-right: 2px;
              }
            }
          }
        }
        .tbody {
          padding-right: 2px;
          height: calc(100% - 88px);
          overflow-x: hidden;
          overflow-y: scroll;
          border: 1px solid #EAEDF0;
          border-bottom-color: #9EAACA;
          &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 6px;
            background-color: #A6A6A6;
          }
          &::-webkit-scrollbar-track {
            background-color: #F1F1F1;
          }
        }
      }

      .layout-table {
        border: 1px solid #9EAACA;
        font-size: 13px;
        font-family: 'SourceHanSansCN';
        height: calc(100% - 36px);
        .thead .tr {
          display: flex;
        }
        .tbody .tr {
          display: flex;
          background: #F8FAFB;
          border-bottom: 1px solid #C0C4CC;
          cursor: pointer;
          &:nth-child(even) {
            background: #FFFFFF;
          }
          &:nth-child(odd) {
            background: #F5F5F5;
          }
          &.active {
            // background: #4574BE;
            background: linear-gradient(#4574BE, #4574BE) no-repeat, #7e9ed1;
            // background-size: 50% 100%;
            border: none;
            box-sizing: border-box;
            color: #FFFFFF;
            transition: all .3s;
            animation: identSel .3s;
          }
        }
        .tbody .td {
          height: 36px;
        }
        .tbody .td:first-child {
          width: 100px;
          font-size: 13px;
          @include flex-center;
        }
        .tbody .td:last-child {
          flex: 1;
          display: flex;
          .col-name {
            width: calc(100% - 60px);
            padding-left: 10px;
            display: table-cell;
            vertical-align:middle;
            @include flex-left;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            line-height: 36px;
          }
          .btn {
            width: 60px;
            @include flex-center;
            .slot-cnt {
              font-family: 'SourceHanSansCN';
              font-weight: bold;
              color: #3D5596;
              @include flex-center;
            }
            img {
              width: 27px;
              height: 27px;
              border-radius: 50%;
              margin-right: 2px;
            }
          }
        }
        .tpage {
          height: 52px;
          border: 1px solid #EAEDF0;
          border-top: none;
          background: #F8FAFB;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
<style>
.tab1 /deep/.outer-table.el-table,
.tab1 /deep/.outer-table  .el-table__body-wrapper{
    overflow: inherit;
}
.tab1 /deep/.outer-table .el-table__body{
    border-collapse: collapse;
}
.tab1 /deep/.row-style{
    border: 1px solid #409EFF;
    box-shadow: inset 0px 0px 6px 0px rgba(64, 158, 255, .6);
}
.tab1 /deep/.cell-style{
    border-bottom: 1px solid  #409EFF;
}
.unabled {
    border: none !important;
}
.el-select.is-disabled .el-input__inner {
    cursor: default !important;
    color: #707070 !important;
    -webkit-box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 40%) inset !important;
    box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 40%) inset !important;
    background: #e6e6e6 !important;
    font-family: "SourceHanSansCN";
    font-size: 13px;
}
</style>
