<!--
  功能：登记情形设定
-->
<template>
  <div class='该组件名称'>
    <el-form :model="ruleForm" :rules="rules">
      <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" :heightNum="390" :pagination="false" heightNumSetting
      :data="tableData">
    </lb-table>
  </div>
</template>
<script>
import { upward, down } from '@/utils/operation'
export default {
  props: {
    djqxList: {
      type: Array, default: () => {
        return []
      }
    },
    ruleForm: {
      type: Object, default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      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: '100',
          label: '登记情形编码',
          render: (h, scope) => {
            return (
              <el-input placeholder="登记情形编码" disabled={scope.row.sftsdjqx == '1'} value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          prop: 'nodename',
          label: '登记情形名称',
          render: (h, scope) => {
            return (
              <el-input placeholder="登记情形名称" disabled={scope.row.sftsdjqx == '1'} value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          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 (
              <el-input placeholder="登记原因模板" disabled={scope.row.sftsdjqx == '1'} value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          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: '80',
          render: (h, scope) => {
            return (
              <div>
                <i class="el-icon-top pointer move" disabled={scope.$index == 0} onClick={() => { this.moveUpward(scope.$index, scope.row) }}></i>
                <i class="el-icon-bottom pointer move" disabled={(scope.$index + 1) == this.tableData.length} onClick={() => { this.moveDown(scope.$index, scope.row) }}></i>
              </div>
            )
          }
        }
      ],
      tableData: []
    }
  },
  watch: {
    djqxList: {
      handler: function (newValue) {
        this.tableData = newValue
      },
      deep: true,
      immediate: true
    },
    tableData: {
      handler (newValue, oldValue) {
        this.$emit('updateValue', newValue)
      },
      deep: true
    }
  },
  methods: {
    handleAdd () {
      this.tableData.push(
        {
          nodecode: '',
          nodename: '',
          enabled: '1',
          djyy: '',
          sfqydjyymb: '1'
        }
      )
      this.key++
    },
    handleMinus (index, row) {
      this.tableData.splice(index, 1)
    },
    // 上移下移
    moveUpward (index, row) {
      upward(index, this.tableData)
      this.key++
    },
    moveDown (index, row) {
      down(index, this.tableData)
      this.key++
    },
  }
}
</script>
<style scoped lang='scss'>
/deep/.el-radio {
  margin-right: 5px;
}
</style>