<!--
 * @Description: 登记情形设定
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 14:09:47
-->
<template>
  <div>
    <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" heightNumSetting :pagination="false" :data="tableData">
    </lb-table>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { upward, down } from '@/utils/operation'
  export default {
    props: {
      ruleForm: {
        type: Object, default: {}
      },
      clzt: {
        type: Array, default: () => {
          return []
        }
      },
      djqx: {
        type: Array, default: () => {
          return []
        }
      }
    },
    computed: {
      ...mapGetters(['dictData'])
    },
    data () {
      return {
        key: 0,
        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'
          },
          {
            label: '是否必填',
            width: '130',
            render: (h, scope) => {
              return (
                <el-radio-group v-model={scope.row.isrequired} onChange={(val) => { scope.row[scope.column.property] = val }}>
                  <el-radio label={'1'}>是</el-radio>
                  <el-radio label={'0'}>否</el-radio>
                </el-radio-group>
              )
            }
          },
          {
            prop: 'clbm',
            label: '材料编码',
            width: '100',
            render: (h, scope) => {
              return (
                <el-input placeholder="材料编码" value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }} maxlength="8"></el-input>
              )
            }
          },
          {
            prop: 'clmc',
            label: '材料名称',
            render: (h, scope) => {
              return (
                <el-input placeholder="材料名称" value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          },
          {
            prop: 'cllx',
            label: '材料类型',
            width: '115',
            render: (h, scope) => {
              return (
                <el-select value={scope.row[scope.column.property]}
                  onChange={(val) => { scope.row[scope.column.property] = val }} clearable>
                  {
                    this.dictData['A40'].map(option => {
                      return (
                        <el-option label={option.dname} value={option.dcode}></el-option>
                      )
                    })
                  }
                </el-select>
              )
            }
          },
          {
            label: '是否公共材料',
            width: '100',
            render: (h, scope) => {
              return (
                <el-radio-group v-model={scope.row.sfggcl} onChange={(val) => { scope.row[scope.column.property] = val; this.handleSelectGgcl(scope.row) }}>
                  <el-radio label={'1'}>是</el-radio>
                  <el-radio label={'0'}>否</el-radio>
                </el-radio-group>
              )
            }
          },
          {
            prop: 'djqxbm',
            label: '登记情形',
            width: '180',
            render: (h, scope) => {
              return (
                <el-select disabled={scope.row.sfggcl == '1'} value={scope.row[scope.column.property]}
                  onChange={(val) => { scope.row[scope.column.property] = val }} clearable>
                  {
                    this.djqx.map(option => {
                      return (
                        <el-option label={option.nodename} value={option.nodecode}></el-option>
                      )
                    })
                  }
                </el-select>
              )
            }
          },
          {
            label: '移动',
            width: '90',
            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) {
          if (!_.isEqual(newValue, this.clzt)) {
            this.$emit('updateValue', newValue)
          }
        },
        deep: true
      },
      clzt: {
        handler: function (newValue) {
          this.tableData = _.cloneDeep(newValue)
        },
        deep: true
      },
    },
    methods: {
      /**
       * @description: handleAdd
       * @author: renchao
       */
      handleAdd () {
        this.tableData.push(
          {
            isrequired: '1',
            djqxbm: '',
            clbm: '',
            clmc: '',
            cllx: '',
            sfggcl: '1'
          }
        )
        this.key++
      },
      /**
       * @description: handleSelectGgcl
       * @param {*} item
       * @author: renchao
       */
      handleSelectGgcl (item) {
        if (item.sfggcl == '1') {
          item.djqxbm = ''
        }
      },
      /**
       * @description: handleMinus
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      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: '已取消删除'
          });
        });
      },
      // 上移下移
      /**
       * @description: 上移下移
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      moveUpward (index, row) {
        upward(index, this.tableData)
      },
      /**
       * @description: moveDown
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      moveDown (index, row) {
        down(index, this.tableData)
      },
    }
  }
</script>
<style scoped lang='scss'>
</style>