<!--
  功能：登记情形设定
-->
<template>
  <div class='该组件名称'>
    <el-form :model="ruleForm" :rules="rules" label-width="135px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="登记业务编码" prop="djywbm">
            <el-input v-model="ruleForm.djywbm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="登记业务名称" prop="djywmc">
            <el-input v-model="ruleForm.djywmc"></el-input>
          </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 {
  data () {
    return {
      key: 0,
      ruleForm: {
        djywbm: '',
        djywmc: ''
      },
      mcOptions: [
        {
          name: '买卖',
          value: '1'
        },
        {
          name: '买卖继承',
          value: '2'
        }
      ],
      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: 'djqxbm',
          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: 'djqxmc',
          label: '登记情形名称',
          render: (h, scope) => {
            return (
              <el-input placeholder="登记情形名称" value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          label: '是否启用登记情形',
          width: '160',
          render: (h, scope) => {
            return (
              <el-radio-group v-model={scope.row.sfqy} onChange={(val) => { scope.row[scope.column.property] = val }}>
                <el-radio label={1}>启用</el-radio>
                <el-radio label={0}>禁用</el-radio>
              </el-radio-group>
            )
          }
        },
        {
          prop: 'djyymb',
          label: '登记原因模板',
          render: (h, scope) => {
            return (
              <el-input placeholder="登记原因模板" value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          label: '是否启用模板',
          width: '160',
          render: (h, scope) => {
            return (
              <el-radio-group v-model={scope.row.sfqymb} 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: '90',
          render: (h, scope) => {
            return (
              <div>
                <i class="el-icon-top pointer" disabled={scope.$index == 0} style="color:#409EFF" onClick={() => { this.moveUpward(scope.$index, scope.row) }}></i>
                <i class="el-icon-bottom pointer" disabled={(scope.$index + 1) == this.tableData.length} style="color:#409EFF" onClick={() => { this.moveDown(scope.$index, scope.row) }}></i>
              </div>
            )
          }
        }
      ],
      tableData: [{
        djqxmc: '',
        djqxbm: '',
        djyymb: '',
        sfqymb: 1,
        sfqy: 1
      },
      {
        djqxmc: '',
        djqxbm: '',
        djyymb: '',
        sfqymb: 0,
        sfqy: 0
      }]
    }
  },
  watch: {
    tableData: {
      handler (newValue, oldValue) {
        this.$emit('updateValue', newValue)
      },
      deep: true
    }
  },
  methods: {
    handleAdd () {
      this.tableData.push(
        {
          djqxmc: '',
          djqxbm: '',
          djyymb: '',
          sfqymb: 0,
          sfqy: 0
        }
      )
    },
    handleMinus () { },
    // 上移下移
    moveUpward (index, row) {
      upward(index, this.tableData)
      this.key++
    },
    moveDown (index, row) {
      down(index, this.tableData)
      this.key++
    },
  }
}
</script>
<style scoped lang='scss'>
</style>