<!--
  功能：登记情形设定
-->
<template>
  <div class='djqxsd'>
    <el-form :model="ruleForm">
      <el-row>
        <el-col :span="5">
          <el-form-item label="登记业务编码">
            {{ ruleForm.djywbm }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记业务名称">
            {{ ruleForm.djywmc }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <lb-table :column="column" border :key="key" :pagination="false" heightNumSetting :data="tableData">
    </lb-table>
  </div>
</template>
<script>
import { upward, down } from '@/utils/operation'
export default {
  props: {
    ruleForm: {
      type: Object, default: () => {
        return {}
      }
    },
    djqx: {
      type: Array, default: () => {
        return []
      }
    }
  },
  data () {
    return {
      input: '',
      key: 0,
      rules: {
        djywbm: [
          { required: true, message: '登记业务编码', trigger: 'blur' },
        ],
        djywmc: [
          { required: true, message: '登记业务名称', trigger: 'blur' },
        ],
      },
      column: [
        {
          width: '60',
          renderHeader: (h, scope) => {
            return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i>
          },
          render: (h, scope) => {
            return (
              <i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i>
            )
          }
        },
        {
          width: '60',
          label: '序号',
          type: 'index'
        },
        {
          prop: 'nodecode',
          width: '105',
          label: '登记情形编码',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="登记情形编码" v-show={scope.row.nodecodeShow} v-fo class={{ repeat: scope.row.repeat }} disabled={scope.row.sftsdjqx == '1'}
                  value={scope.row[scope.column.property]} onFocus={() => { this.itemShowFalse(); scope.row.nodecodeShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val }} onBlur={() => { this.nodecodeBlur(scope.$index, scope.row) }} maxlength="8">
                </el-input>

                <el-input placeholder="登记情形编码" v-show={!scope.row.nodecodeShow} class={{ repeat: scope.row.repeat }} disabled={scope.row.sftsdjqx == '1'}
                  value={scope.row[scope.column.property]} onFocus={() => { this.itemShowFalse(); scope.row.nodecodeShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val }} onBlur={() => { this.nodecodeBlur(scope.$index, scope.row) }} maxlength="8">
                </el-input>
              </div>
            )
          }
        },
        {
          prop: 'nodename',
          label: '登记情形名称',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="登记情形名称" v-show={scope.row.nodenameShow} v-fo disabled={scope.row.sftsdjqx == '1'} value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }}
                  onFocus={() => { this.itemShowFalse(); scope.row.nodenameShow = true; }}></el-input>
                <el-input placeholder="登记情形名称" v-show={!scope.row.nodenameShow} disabled={scope.row.sftsdjqx == '1'}
                  onFocus={() => { this.itemShowFalse(); scope.row.nodenameShow = true; }} value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              </div>
            )
          }
        },
        {
          label: '是否启用登记情形',
          width: '140',
          render: (h, scope) => {
            return (
              <el-radio-group v-model={scope.row.enabled} disabled={scope.row.sftsdjqx == '1'} onChange={(val) => { scope.row[scope.column.property] = val }}>
                <el-radio label={'1'}>启用</el-radio>
                <el-radio label={'0'}>禁用</el-radio>
              </el-radio-group>
            )
          }
        },
        {
          prop: 'djyy',
          label: '登记原因模板',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="登记原因模板" v-show={scope.row.djyyShow} v-fo disabled={scope.row.sftsdjqx == '1'} value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }}
                  onFocus={() => { this.itemShowFalse(); scope.row.djyyShow = true; }}></el-input>
                <el-input placeholder="登记原因模板" v-show={!scope.row.djyyShow} v-fo disabled={scope.row.sftsdjqx == '1'} value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }}
                  onFocus={() => { this.itemShowFalse(); scope.row.djyyShow = true; }}></el-input>
              </div>

            )
          }
        },
        {
          label: '是否启用模板',
          width: '140',
          render: (h, scope) => {
            return (
              <el-radio-group v-model={scope.row.sfqydjyymb} disabled={scope.row.sftsdjqx == '1'} onChange={(val) => { scope.row[scope.column.property] = val }}>
                <el-radio label={'1'}>启用</el-radio>
                <el-radio label={'0'}>禁用</el-radio>
              </el-radio-group>
            )
          }
        },
        {
          label: '移动',
          width: '100',
          render: (h, scope) => {
            return (
              <div>
                <el-button type='text' disabled={scope.$index == 0} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
                <el-button type='text' disabled={(scope.$index + 1) == this.tableData.length} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
              </div>
            )
          }
        }
      ],
      tableData: []
    }
  },
  watch: {
    tableData: {
      handler (newValue, oldValue) {
        let that = this
        if (!_.isEqual(newValue, this.djqx)) {
          let temp = newValue.some((item, index, array) => {
            return item.repeat;
          })
          if (temp) {
            that.$emit('updateValue', {
              djqx: newValue,
              btnDisabled: true
            })
          } else {
            that.$emit('updateValue', {
              djqx: newValue,
              btnDisabled: false
            })
          }
        }
      },
      deep: true
    },
    djqx: {
      handler: function (newValue) {
        this.tableData = _.cloneDeep(newValue)
        this.addIndexes()
      },
      deep: true
    }
  },
  methods: {
    // 添加索引
    addIndexes (data = this.tableData, isAdd = true) {
      data.forEach((item, index) => {
        if (index == 0) {
          item.nodecodeShow = true
          item.nodenameShow = false
          item.djyyShow = false
        } else {
          item.nodecodeShow = false
          item.nodenameShow = false
          item.djyyShow = false
        }
        if (isAdd) {
          item.index = index + 1
        }
      })
    },
    itemShowFalse () {
      this.tableData.forEach((item, index) => {
        item.nodecodeShow = true
        item.nodenameShow = false
        item.djyyShow = false
      })
    },
    handleAdd () {
      this.$nextTick(() => {
        let container = this.$el.querySelector('.el-table__body-wrapper');
        container.scrollTop = container.scrollHeight;
      })
      let code = this.tableData.slice(-1)[0].nodecode
      let codeQ = code.slice(0, 6)
      let len = ''
      if (this.tableData.length + 1 < 9) {
        len = 0 + String(this.tableData.length + 1)
      } else {
        len = this.tableData.length + 1
      }

      this.tableData.push(
        {
          nodecode: codeQ + len,
          nodename: '',
          enabled: '1',
          djyy: '',
          sfqydjyymb: '0'
        }
      )
      this.addIndexes()
      this.key++
    },
    handleMinus (index, row) {
      this.tableData.splice(index, 1)
    },
    nodecodeBlur (index, row) {
      let list = _.cloneDeep(this.tableData).filter(item => item.bsmSqyw != row.bsmSqyw)
      let arr = list.map(item => item.nodecode)
      if (arr.includes(row.nodecode)) {
        this.$set(row, 'repeat', true)
        this.$message.error('登记情形编码不能重复');
      } else {
        this.$set(row, 'repeat', false)
      }
    },
    // 上移下移
    moveUpward (index, row) {
      upward(index, this.tableData)
      this.key++
      console.log(this.tableData);
    },
    moveDown (index, row) {
      down(index, this.tableData)
      this.key++
      console.log(this.tableData);
    }
  }
}
</script>
<style lang='scss'>
.djqxsd {
  .repeat {
    .el-input__inner {
      border-color: red !important;
    }
  }
}
</style>