<template>
  <div class="app-container">
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        fit
        stripe
        highlight-current-row
        style="width: 100%;border-radius: 10px 10px 0 0;"
        :max-height="tableHeight">
      <!-- :header-cell-class-name="headerStyle" :max-height="tableHeight"-->
        <el-table-column prop="countryCode" :label="$t('riskFactor.customerLevel')" align="right" width="150" >
            <el-table-column prop="productCode" :label="$t('riskFactor.product')" width="238" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="englishDescription" width="119"></el-table-column> -->
        </el-table-column>
        <!-- AA级含以上 -->
        <el-table-column prop="chineseDescription" :label="$t('riskFactor.aLevel')">
            <el-table-column prop="aaUpFinanceRatio" :label="$t('riskFactor.financingProportion')" align="left" >
              <template slot-scope="scope">
                <el-input v-model="scope.row.aaUpFinanceRatio"
                @input="scope.row.aaUpFinanceRatio = scope.row.aaUpFinanceRatio.replace(/[^\d|.]/g,'')"
                @blur="tableFeeBlur($event,'tableData',scope.$index,'aaUpFinanceRatio',2)"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="aaUpRpn" :label="$t('riskFactor.riskFactor')" align="left">
               <template slot-scope="scope">
                <el-input v-model="scope.row.aaUpRpn"
                @input="scope.row.aaUpRpn = scope.row.aaUpRpn.replace(/[^\d|.]/g,'')"
                @blur="tableFeeBlur($event,'tableData',scope.$index,'aaUpRpn',2)"></el-input>
              </template>
            </el-table-column>
        </el-table-column>
        <!-- AA-级含以上 -->
        <el-table-column prop="chineseDescription" :label="$t('riskFactor.aLevel1')" >
            <el-table-column prop="aaNegUpFinanceRatio" :label="$t('riskFactor.financingProportion')" align="left" >
               <template slot-scope="scope">
                <el-input v-model="scope.row.aaNegUpFinanceRatio"
                @input="scope.row.aaNegUpFinanceRatio = scope.row.aaNegUpFinanceRatio.replace(/[^\d|.]/g,'')"
                @blur="tableFeeBlur($event,'tableData',scope.$index,'aaNegUpFinanceRatio',2)"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="aaNegUpRpn" :label="$t('riskFactor.riskFactor')" align="left">
               <template slot-scope="scope">
                <el-input v-model="scope.row.aaNegUpRpn"
                @input="scope.row.aaNegUpRpn = scope.row.aaNegUpRpn.replace(/[^\d|.]/g,'')"
                @blur="tableFeeBlur($event,'tableData',scope.$index,'aaNegUpRpn',2)"></el-input>
              </template>
            </el-table-column>
        </el-table-column>
        <!-- AA-级含以下 -->
        <el-table-column prop="chineseDescription" :label="$t('riskFactor.aLevel2')" >
            <el-table-column prop="aaNegDownFinanceRatio" :label="$t('riskFactor.financingProportion')" align="left" >
               <template slot-scope="scope">
                <el-input v-model="scope.row.aaNegDownFinanceRatio"
                @input="scope.row.aaNegDownFinanceRatio = scope.row.aaNegDownFinanceRatio.replace(/[^\d|.]/g,'')"
                @blur="tableFeeBlur($event,'tableData',scope.$index,'aaNegDownFinanceRatio',2)"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="aaNegDownRpn" :label="$t('riskFactor.riskFactor')" align="left">
               <template slot-scope="scope">
                <el-input v-model="scope.row.aaNegDownRpn"
                @input="scope.row.aaNegDownRpn = scope.row.aaNegDownRpn.replace(/[^\d|.]/g,'')"
                @blur="tableFeeBlur($event,'tableData',scope.$index,'aaNegDownRpn',2)"></el-input>
              </template>
            </el-table-column>
        </el-table-column>
        <!-- BBB级含以下 -->
        <el-table-column prop="chineseDescription" :label="$t('riskFactor.bLevel')" >
            <el-table-column prop="bbbDownFinanceRatio" :label="$t('riskFactor.financingProportion')" align="left" >
               <template slot-scope="scope">
                <el-input v-model="scope.row.bbbDownFinanceRatio"
                @input="scope.row.bbbDownFinanceRatio = scope.row.bbbDownFinanceRatio.replace(/[^\d|.]/g,'')"
                @blur="tableFeeBlur($event,'tableData',scope.$index,'bbbDownFinanceRatio',2)"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="bbbDownRpn" :label="$t('riskFactor.riskFactor')" align="left">
               <template slot-scope="scope">
                <el-input v-model="scope.row.bbbDownRpn"
                @input="scope.row.bbbDownRpn = scope.row.bbbDownRpn.replace(/[^\d|.]/g,'')"
                @blur="tableFeeBlur($event,'tableData',scope.$index,'bbbDownRpn',2)"></el-input>
              </template>
            </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
    <div class="filter-container">
      <el-button v-if="permission.includes('risk_coefficient_save')" v-waves class="filter-item" type="primary" icon="el-icon-my-baocun" @click="handleSave">
        {{ $t('table.save') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import http from '@/api/http'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: '',
  components: { Pagination },
  directives: { waves },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      total: 0,
      tableData:[],
      pageSize:10,
      pageNum:1,
      tableHeight: 0,
      keyNames: [
        'aaUpFinanceRatio',
        'aaUpRpn',
        'aaNegUpFinanceRatio',
        'aaNegUpRpn',
        'aaNegDownFinanceRatio',
        'aaNegDownRpn',
        'bbbDownFinanceRatio',
        'bbbDownRpn'
      ],
      srcTabledata: []
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 250
    })
  },
  methods: {
    getData() {
      let params = {
        cpage: this.pageNum,
        pageSize: this.pageSize,
      }
      http.post(`/par/risk/pageList`,params).then((res)=>{
        let { total, list } = res.data
        this.tableData = list;
        this.total = total;
        this.tableData.forEach(item=>{
          item.update = 0 //表示当前数据没有进行过编辑
          Object.keys(item).forEach(v=>{
            if(v === 'aaUpFinanceRatio'
            || v === 'aaUpRpn'
            || v === 'aaNegUpFinanceRatio'
            || v === 'aaNegUpRpn'
            || v === 'aaNegDownFinanceRatio'
            || v === 'aaNegDownRpn'
            || v === 'bbbDownFinanceRatio'
            || v === 'bbbDownRpn'){
              if(item[v]){
                item[v] = item[v].toFixed(2)
              }
            }
          })
        })

        // 使用前重置为空，否则修改后再拉取数据会重复添加
        this.srcTabledata = []
        // 缓存原始数据，以便后面进去对面是否修改
        this.tableData.forEach(item => {
          let itemArr = {}
          for (let index in this.keyNames) {
            let keyName = this.keyNames[index]
            if (item.hasOwnProperty(keyName)) {
              itemArr[keyName] = item[keyName]
            }
          }
          this.srcTabledata.push(itemArr)
        })

      }).catch(err=>{});
    },
    handleSearch(){
      this.pageNum = 1
      this.getData()
    },
    handleReset(){
      this.pageNum = 1
      this.getData()
    },
    handleSave(){
      this.tableData.forEach(item=>{
        item.financialProductId = item.id
        item.count = 0
      })
      let arr = this.tableData.filter(item=>{
        return item.update === 1
      })

      // 当前数据
      let currentTabledata = []
      this.tableData.forEach(item => {
        let itemArr = {}
        for (let index in this.keyNames) {
          let keyName = this.keyNames[index]
          if (item.hasOwnProperty(keyName)) {
            itemArr[keyName] = item[keyName]
          }
          if (!itemArr[keyName]) {
            delete itemArr[keyName]
          }
        }
        currentTabledata.push(itemArr)
      })

      if (JSON.stringify(this.srcTabledata) === JSON.stringify(currentTabledata)) {
        this.$message.error('暂无需要保存的数据！')
        return false
      }

      for(let index in arr) {
        for (let keyIndex in this.keyNames) {
          let keyName = this.keyNames[keyIndex]
          if (!arr[index][keyName]) {
             this.$message.error(`${arr[index].productCode}的风险系数和融资比例不能为空，请先输入数值再进行保存！`)
            return false
          }
        }
      }

      arr.forEach(item=>{
        delete item.id
      })

      http.post(`/par/risk/setProductRisk`,arr).then(res=>{
        this.$message.success(res.msg.info)
        this.getData()
      }).catch(err=>{});
    },


    tableFeeBlur(el,tableDataName,rowIndex,name,fixedNum = 2){
      this[tableDataName][rowIndex].update = 1 //证明这条数据进行编辑过

      let num  = el.target.value
      if(parseFloat(num) > 100){
        this.$message.error('融资比例或风险系数的值不能超过100')
        el.target.value = ''
        return false
      }
      if (num && !isNaN(num)){
        this[tableDataName][rowIndex][name] = (Math.floor(el.target.value * 100) / 100).toFixed(fixedNum)
      }
    },
    headerStyle() {
      return 'tableStyle1'
    },
  }
}
</script>
<style scoped lang="scss">
  ::v-deep .el-table__header-wrapper{
    tr{
      th{
        border:2px rgba(233, 236, 241, 0.5) solid;
        border-left: unset;
        border-top: unset;
      }
    }
  }
  ::v-deep .el-table__body-wrapper{
    border-left: none;
    .el-table__row{
      &:nth-child(even){
         td{
            background-color: #FFFFFF !important;
          }
      }
      td{
        .el-input{
          .el-input__inner{
            box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.4) inset;
            border-radius: 2px;
            text-align: right;
          }
        }
      }
    }
  }
  ::v-deep .el-form-item__content{
    margin-left: 121px !important;
  }
::v-deep .el-table thead.is-group th{
    text-align: center;
    background: unset;
}
::v-deep .el-table{
  .el-table__header{
    background: url('~@/assets/images/tabhead1.png') no-repeat;
      // background-size: 100.6% 107%;
      // background-position: -6px -2px;
    background-size: 101% 110%;
    background-position: -4px -4px;
  }
}
::v-deep .el-table thead{
   font-size: 13px;
  font-family: "SourceHanSansCN";
  font-weight: 500;
  color: #FFFFFF;
  line-height: 26px;
  text-shadow: 0px 1px 1px #252F60;
  & th{
    background-color: transparent;
  }
  & tr{
    background-color: transparent;
  }
}
  ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
    border-bottom: none;
    text-align: right;
  }
  ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type {
    text-align: left;
  }
  // 设置表头斜对线
  @mixin line{
    content: '';
    position: absolute;
    width: 2px;
    background-color: #E9ECF1;
    opacity: 0.3;
    display: block;
    height: 175px; /*这里需要自己调整，根据td的宽度和高度*/
  }
  ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
    top: 0;
    left: 0;
    transform: rotate(-72deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
    @include line()
  }
  ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
    bottom: 0;
    right: 0;
    transform-origin: bottom;
    transform: rotate(-72deg);
    @include line()
  }
 ::v-deep .filter-container{
   float: right;
   margin-top: 10px;
 }
//  解决表头多余列
 ::v-deep .el-table__header-wrapper{
   .gutter{
    border-bottom:2px solid rgba(233, 236, 241, 0.5) !important;
   }
 }
  ::v-deep  .el-table{
      thead{
    &.is-group{
      tr:first-child{
        th:nth-child(5){
          border-right: none;
        }
      }
       tr:last-child{
        th:nth-child(9){
          border-right: none;
        }
      }
    }
  }
}
</style>
