<!--
  功能：登记情形设定
-->
<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: {
    handleAdd () {
      this.tableData.push(
        {
          isrequired: '1',
          djqxbm: '',
          clbm: '',
          clmc: '',
          cllx: '',
          sfggcl: '1'
        }
      )
      this.key++
    },
    handleSelectGgcl (item) {
      if (item.sfggcl == '1') {
        item.djqxbm = ''
      }
    },
    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: '已取消删除'
        });
      });
    },
    // 上移下移
    moveUpward (index, row) {
      upward(index, this.tableData)
    },
    moveDown (index, row) {
      down(index, this.tableData)
    },
  }
}
</script>
<style scoped lang='scss'>

</style>