<!--
  功能：登记情形设定
-->
<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: ''
      },
      cllxOptions: [
        {
          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: 'sfbx',
          label: '是否必须',
          width: '80',
          render: (h, scope) => {
            return (
              <el-input value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          prop: 'djqx',
          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: 'clbm',
          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: '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: '材料类型',
          render: (h, scope) => {
            return (
              <el-select value={scope.row[scope.column.property]}
                onChange={(val) => { scope.row[scope.column.property] = val }}>
                {
                  this.cllxOptions.map(option => {
                    return (
                      <el-option label={option.name} value={option.value}></el-option>
                    )
                  })
                }
              </el-select>
            )
          }
        },
        {
          label: '移动',
          width: '90',
          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: [
        {
          sfbx: '',
          djqx: '',
          clbm: '',
          clmc: '',
          cllx: ''
        }
      ]
    }
  },
  watch: {
    tableData: {
      handler (newValue, oldValue) {
        this.$emit('updateValue', newValue)
      },
      deep: true
    }
  },
  methods: {
    handleAdd () {
      this.tableData.push(
        {
          sfbx: '',
          djqx: '',
          clbm: '',
          clmc: '',
          cllx: ''
        }
      )
    },
    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'>
</style>