<!--
 * @Description: 功能：登记情形设定
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 14:10:04
-->
<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="登记情形编码" class={{ repeat: scope.row.repeat }} disabled={scope.row.sftsdjqx == '1'}
                    value={scope.row[scope.column.property]}
                    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="登记情形名称" disabled={scope.row.sftsdjqx == '1'}
                    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="登记原因模板" disabled={scope.row.sftsdjqx == '1'} 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.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 (isAdd) {
            item.index = index + 1
          }
        })
      },
      handleAdd () {
        this.$nextTick(() => {
          let container = this.$el.querySelector('.el-table__body-wrapper');
          container.scrollTop = container.scrollHeight;
        })
        this.tableData.push(
          {
            nodecode: '',
            nodename: '',
            enabled: '1',
            djyy: '',
            sfqydjyymb: '0'
          }
        )
        this.addIndexes()
        this.key++
      },
      handleMinus (index, row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      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++
      },
      moveDown (index, row) {
        down(index, this.tableData)
        this.key++
      }
    }
  }
</script>
<style lang='scss' scoped>
  .djqxsd {
    .repeat {
      .el-input__inner {
        border-color: red !important;
      }
    }
  }
</style>