<!-- 额度管理参数 -->
<template>
  <div class="app-container">
    <!-- table -->
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        fit
        stripe
        class="numtable"
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :cell-class-name="cellClassName"
        :max-height="tableHeight"
        :cell-style="{ textAlign: 'left' }"
        :header-cell-style="{textAlign: 'left'}"
      >
        <el-table-column prop="configKey" :label="$t('quotaparam.sysCode')"  width="230" align="left"></el-table-column>
        <el-table-column prop="configDescribe" width="300" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sysName" :label="$t('quotaparam.sysParams')" align="left">
          <template slot-scope="{row}" >
            <template v-if="row.configKey === 'PAR_0001'">
              <span class="par-sp" :class="{'unabled': row.isEdit}">营业日：</span>
              <el-input
                v-model.number="row.configValue"
                @blur="row.configValue = $event.target.value"
                size="mini"
                style="width: 140px;"
                class="par-ipt"
                oninput="value=value.replace(/[^0-9]/g,'')"
                :disabled="row.isEdit"></el-input>

            </template>
            <template v-if="row.configKey === 'PAR_0002'">
              <span class="par-sp" :class="{'unabled': row.isEdit}">折算规则：</span>
              <el-radio-group v-model="row.configValue.value" :disabled="row.isEdit">
                <el-radio :label="item.name" v-for="item in row.configValue.list">{{ item.name }}</el-radio>
              </el-radio-group>
            </template>
            <template v-if="row.configKey === 'PAR_0003'">
              <span class="par-sp" :class="{'unabled': row.isEdit}">更新频率：</span>
              <el-select
                v-model="row.configValue.value"
                size="mini"
                style="width: 140px;"
                class="par-ipt"
                :disabled="row.isEdit">
                <el-option
                  v-for="item in RADIO_PAR_03_ALL_LIST"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
              <!-- <el-radio-group v-model="row.configValue.value" @change="(val) => RADIO03_CHANGE(val, row)" :disabled="row.isEdit">
                <el-radio :label="item.value" v-for="item in RADIO_PAR_03_LIST">
                  <template v-if="item.type == 1">
                    {{ item.name }}
                  </template>
                  <template v-if="item.type == 2">
                    <el-select
                      v-model="RADIO_PAR_03_SEL_VALUE"
                      size="mini"
                      style="width: 130px;"
                      class="par-ipt"
                      :disabled="row.isEdit"
                      @change="(val) => PAR03C_CHANGE(val, row)">
                      <el-option
                        v-for="item in RADIO_PAR_03_SEL_LIST"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"></el-option>
                    </el-select>
                  </template>
                </el-radio>
              </el-radio-group> -->
            </template>
            <template v-if="row.configKey === 'PAR_0004'">
              <span :class="{'unabled': row.isEdit}" class="par-sp">重评频率：</span>
              <el-select
                v-model="row.configValue.value"
                size="mini"
                style="width: 140px;"
                :disabled="row.isEdit"
                class="par-ipt">
                <el-option
                  v-for="item in row.configValue.list"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value" ></el-option>
              </el-select>
              <el-switch
                style="margin-left: 35px;"
                v-model="row.configValue.enable"
                :disabled="row.isEdit"
                active-value="1"
                inactive-value="0"
                active-color="#90D228"
                inactive-color="#AFBED0">
              </el-switch>
            </template>
            <template v-if="row.configKey === 'PAR_0005'">
              <span class="par-sp" :class="{'unabled': row.isEdit}">取值规则：</span>
              <el-radio-group v-model="row.configValue.value" :disabled="row.isEdit">
                <el-radio :label="item.value" v-for="item in row.configValue.list">{{ item.name }}</el-radio>
              </el-radio-group>
            </template>
            <template v-if="row.configKey === 'PAR_0006'">
              <span class="one par-sp" :class="{'unabled': row.isEdit}">误差容忍度：</span>
              <el-input
                v-model="row.configValue"
                @blur="configBlur(row,$event)"
                :disabled="row.isEdit"
                size="mini"
                style="width: 139px;"
                class="par-ipt text-right"
                oninput="value=value.replace(/[^0-9.]/g,'')">
                </el-input>
              <span :class="{'unabled': row.isEdit}" style="margin-left:4px;">%</span>
            </template>
            <template v-if="row.configKey === 'PAR_0007'">
              <span class="par-sp" :class="{'unabled': row.isEdit}">重评频率：</span>
              <el-select v-model="row.configValue.value" size="mini" style="width: 140px;" class="par-ipt" :disabled="row.isEdit">
                <el-option
                  v-for="item in row.configValue.list"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value" ></el-option>
              </el-select>
            </template>
            <template v-if="row.configKey === 'PAR_0008'">
              <span class="par-sp" :class="{'unabled': row.isEdit}">盘点频率：</span>
              <el-select v-model="row.configValue.value" size="mini" style="width: 140px;" class="par-ipt" :disabled="row.isEdit">
                <el-option
                  v-for="item in row.configValue.list"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value" ></el-option>
              </el-select>
            </template>
          </template>
        </el-table-column>

        <el-table-column :label="$t('table.actions')" align="left"  width="240" class-name="small-padding ">
          <template slot-scope="{row}">
            <div class="btn-style">
              <template v-if="row.isEdit && permission.includes('quota_param_update')">
                <el-button v-waves type="text" style="margin-left: 0;margin-left: 10px!important;" icon="el-icon-my-modify" @click="handleAction('edit', row)">修改</el-button>
              </template>
              <template v-if="!row.isEdit">
                <el-button v-waves type="text" style="margin-left: 0;margin-left: 10px!important;" icon="el-icon-my-save" @click="handleAction('save', row)">保存</el-button>
                <el-button v-waves type="text" style="margin-left: 0;margin-left: 10px!important;" icon="el-icon-my-reback" @click="handleAction('cancel', row)">取消</el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves'
import http from '@/api/http';
import { validatenull } from '@/utils/validate.js'

export default {
  // name: 'quotaparam',
  directives: { waves },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      switchVal: '0',
      radio: 9,
      value1: undefined,
      value2: undefined,
      fundsVisile: true,
      query: {
        chineseName: undefined, // 资金用途
        englishName: undefined // 资金用途英文名称
      },
      formData: {},
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableHeight: 0,
      orgList: [],
      industryList: [], // 所属行业
      cPairList: [], // 币种列表
      creditLevelList: [],
      tableData: [],
      RADIO_PAR_TYPE_1_LIST: [],
      RADIO_PAR_03_LIST: [],
      RADIO_PAR_03_SEL_LIST: [],
      RADIO_PAR_03_ALL_LIST: [],
      RADIO_PAR_03_SEL_VALUE: undefined
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    // 现版本已更改，方法未使用，暂时保留
    RADIO03_CHANGE(val, row) {
      // console.log('par_0003', val, row, this.RADIO_PAR_03_LIST);
      let oj = this.RADIO_PAR_03_LIST.find(v => v.value === val)
      row.configValue.type = oj.type
      // this.RADIO_PAR_03_SEL_VALUE = val
    },
    // 现版本已更改，方法未使用，暂时保留
    PAR03C_CHANGE(val, row) {
      let oj = this.RADIO_PAR_03_ALL_LIST.find(v => v.value === val)
      let indx = this.RADIO_PAR_03_LIST.findIndex(v => v.type == 2)
      this.$set(this.RADIO_PAR_03_LIST, indx, oj)
      if (row.configValue.type == 2) {
        row.configValue.value = val
        row.configValue.type = oj.type
      }
    },
    // 额度参数列表
    getList() {
      http.post('/par/param/list', {}).then((res) => {
        this.tableData = []
        res.data.forEach((v) => {
          v.configValue = JSON.parse(v.configValue.replace(new RegExp("\\\\\\\"","gm"),"\""))
          // console.log(typeof v.configValue);
          v.isEdit = true
          v.configValueOiginal = typeof v.configValue === 'object' ? { ...v.configValue } : v.configValue
          this.tableData.push(v)
          if (v.configKey === 'PAR_0003') {
            let { list, type, value } = v.configValue
            this.RADIO_PAR_03_ALL_LIST = [...list]
            this.RADIO_PAR_03_SEL_LIST = list.filter(v => v.type == 2) // 第三radio下拉数组
            let TYPE_2_FIRST_OBJ = type == 1 ? list.find(v => v.type == 2) : list.find(v => v.value == value)
            this.RADIO_PAR_03_SEL_VALUE = TYPE_2_FIRST_OBJ.value
            this.RADIO_PAR_03_LIST = []
            this.RADIO_PAR_TYPE_1_LIST = list.filter(v => v.type == 1); // type为1类型的数组
            this.RADIO_PAR_03_LIST = list.filter(v => v.type == 1)
            this.RADIO_PAR_03_LIST.push(TYPE_2_FIRST_OBJ)  // 页面渲染数组
          }

          if(v.configKey === 'PAR_0006'){
            v.configValue = v.configValue && v.configValue.toFixed(2)
          }
        })
      }).catch(() => {})
    },
    // 操作
    handleAction(type, row) { // type 0新增 1修改 2详情
      switch(type) {
        // 修改
        case 'edit': {
          row.isEdit = false
          break;
        }
        case 'cancel': {
          row.isEdit = true
          row.configValue = typeof row.configValue === 'object' ? { ...row.configValueOiginal } : row.configValueOiginal
          break;
        }
        case 'save': {
          let { configValue, id, configKey } = row
          if(validatenull(row.configValue)){
            this.$message.error(`${row.configDescribe}不能为空`)
            return false
          }
          let params = {
            id: id,
            configKey: configKey,
            configValue: configValue
          }
          params = Object.assign(params, { configValue: typeof params.configValue === 'object' ? JSON.stringify(params.configValue) : params.configValue })
          // console.log('params--------------', params);
          // 更新额度参数
          http.post('/par/param/update', params).then((res) => {
            this.$message.success(res.msg.info)
            row.isEdit = true
            // this.getList()
          }).catch(() => {})
          break;
        }
        case 'del': {
          break;
        }
        default:
          break;
      }
    },

    cellClassName({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return 'u-cell'
      } else if (columnIndex === 1) {
        return 'u-cell1'
      }
    },

    headerStyle({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return 'u-cell tableStyle'
      } else if (columnIndex === 1) {
        return 'u-cell1 tableStyle'
      } else {
        return 'tableStyle'
      }
    },
    configBlur(row,$event){
      let _value = $event.target.value
      let tempVal= parseFloat(_value).toFixed(3)
      let realVal = tempVal.substring(0,tempVal.length - 1)
      if(parseFloat(_value) > 100){
        $event.target.value =''
        row.configValue = ''
        this.$message.error('误差容忍度不能超过100')
        return false
      } else {
        //  row.configValue = $event.target.value
        row.configValue = realVal
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// @import './table.scss';
::v-deep .el-table .cell{
  line-height: 44px !important;
}
.el-table ::v-deep .u-cell >.cell {
  padding-left: 102px;
}
.el-table ::v-deep .u-cell1 >.cell {
  padding-left: 50px;
}
// 按钮css
.btn-style {
  color: #3D5596;
  font-size: 12px;
  display: flex;
  .el-button {
    display: flex;
    align-items: center;
  }
}

.par-ipt {
  width: 72px;
  line-height: 28px;
  background: #FFFFFF;
  border-radius: 2px;
  ::v-deep .el-input__inner {
    box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 40%) inset;
    color: #212121;
    font-family: 'sourceHanSansCN';
  }
}
.par-ipt.is-disabled ::v-deep .el-input__inner {
  color: #707070;
}
.par-sp {
  display: inline-block;
  width: 85px;
  text-align: left;
  margin-left: 2px;
  margin-right: 11px;
  font-size: 14px;
  &.one{
    margin-right: 10px;
    font-size: 14px;
  }
}
.text-right{
  ::v-deep .el-input__inner{
    text-align: right;
    height: 30px;
  }
}
.unabled {
  color: #707070;
}
.el-radio {
  ::v-deep .el-radio__input {
    width: 16px;
    height: 16px;
    .el-radio__inner {
      border: 1px solid #BDBDBD;
    }
  }
  ::v-deep .el-radio__label {
    font-size: 13px;
    color: #212121;
    padding-left: 5px;
  }
  ::v-deep .el-radio__input.is-disabled.is-checked  .el-radio__inner {
    background-color: #C4CCE0;
    border: 1px solid #C4CCE0;
  }
  ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
    color: #707070;
  }
  ::v-deep.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #FFFFFF
  }
  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    border: 1px solid #3D5298;
    background: #3D5298;
  }
}
.el-select {
  ::v-deep .el-input__inner{
    font-size: 12px;
    font-family: "SourceHanSansCN";
    color: #212121;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    color: #707070;
  }
}

</style>
