<template>
  <!-- 编辑 -->
  <dialogBox submitForm="submitForm" @closeDialog="closeDialog" @submitForm="handleSubmit" width="80%" v-model="myValue"
    :isSave="details.isenable == 1" title="字典信息">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="字典类型编码">
            {{ ruleForm.dcode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="字典类型名称">
            {{ ruleForm.dname }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <lb-table :column="column" :heightNum="420" :key="key" :expand-row-keys="keyList" row-key="bsmDict"
      :tree-props="{ children: 'children' }" :pagination="false" :data="tableData">
    </lb-table>
  </dialogBox>
</template>

<script>
import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation'
import { editDictNode } from '@/api/dict'
export default {
  props: {
    value: { type: Boolean, default: false },
    details: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      key: 0,
      myValue: this.value,
      keyList: [],
      ruleForm: {
        dcode: '',
        dname: ''
      },
      column: [],
      columns: [
        {
          width: '70',
          renderHeader: (h, scope) => {
            return (<div>
              {
                this.details.isenable === '0' ?
                  <span>序号</span> :
                  <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF"></i>
              }
            </div>)
          },
          render: (h, scope) => {
            return (
              <span>{scope.row.index}</span>
            )
          }
        },
        {
          prop: 'dcode',
          width: '100',
          label: '字典项编码',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.codeShow} v-fo value={scope.row[scope.column.property]}
                  onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>


                <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={!scope.row.codeShow} value={scope.row[scope.column.property]}
                  onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
              </div>
            )
          }
        },
        {
          prop: 'dname',
          label: '字典项名称',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.nameShow} v-fo value={scope.row[scope.column.property]}
                  onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>

                <el-input placeholder="字典项名称" disabled={this.details.isenable == 2} v-show={!scope.row.nameShow} value={scope.row[scope.column.property]}
                  onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
              </div>
            )
          }
        },
        {
          prop: 'normcode',
          label: '部标编码',
          width: '100',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="部标编码" disabled={this.details.isenable == 2} v-show={scope.row.normcodeShow} v-fo value={scope.row[scope.column.property]}
                  onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>

                <el-input placeholder="部标编码" disabled={this.details.isenable == 2} v-show={!scope.row.normcodeShow} value={scope.row[scope.column.property]}
                  onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
              </div>
            )
          }
        },
        {
          prop: 'normname',
          label: '部标名称',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="部标名称" disabled={this.details.isenable == 2} v-show={scope.row.normnameShow} v-fo value={scope.row[scope.column.property]}
                  onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>

                <el-input placeholder="部标名称" disabled={this.details.isenable == 2} v-show={!scope.row.normnameShow} value={scope.row[scope.column.property]}
                  onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }}
                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
              </div>
            )
          }
        },
        {
          prop: 'isenable',
          width: '160',
          label: '是否禁用',
          render: (h, scope) => {
            return (
              <el-radio-group disabled={this.details.isenable == 2} v-model={scope.row.isenable}>
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
              </el-radio-group>
            )
          }
        },
        {
          width: '130',
          label: '移动',
          render: (h, scope) => {
            return (
              <div>
                <el-button type='text' disabled={scope.row.isTop} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
                <el-button type='text' disabled={scope.row.isBottom} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
              </div >
            )
          }
        },
        {
          width: '150',
          label: '操作',
          render: (h, scope) => {
            return (
              <div>
                <el-button type="text" style="margin-right:10px" onClick={() => { this.handleAddSubordinate(scope.row) }}>增加下级</el-button>
                <el-button type="text" style="margin-left:0" onClick={() => { this.handleMinus(scope.$index, scope.row) }}>删除</el-button>
              </div>
            )
          }
        }
      ],
      tableData: []
    }
  },
  watch: {
    value (val) {
      this.myValue = val
    },
    details: {
      handler: function (newValue) {
        this.tableData = judgeSort(_.cloneDeep(newValue.dataList))
        if (newValue.isenable == 2) {
          this.column = this.columns.slice(0, 6)
        } else {
          this.column = this.columns
        }
        this.ruleForm = newValue.rowData
        this.addIndexes()
        this.key++
      },
      deep: true
    }
  },
  methods: {
    // 添加索引
    addIndexes (data = this.tableData, isAdd = true) {
      data.forEach((item, index) => {
        if (index == 0) {
          item.codeShow = true
          item.nameShow = false
          item.normcodeShow = false
          item.normnameShow = false
        } else {
          item.codeShow = false
          item.nameShow = false
          item.normcodeShow = false
          item.normnameShow = false
        }
        if (isAdd) {
          item.index = index + 1
        }
        if (item.children) {
          this.addIndexes(item.children, false)
        }
      })
    },
    itemShowFalse () {
      this.tableData.forEach((item, index) => {
        item.codeShow = false
        item.nameShow = false
        item.normcodeShow = false
        item.normnameShow = false
      })
    },
    handleMinus (index, row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeTreeListItem(this.tableData, row.bsmDict)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSubmit () {
      editDictNode({
        bsmDict: this.details.rowData.bsmDict,
        typeid: this.details.rowData.typeid,
        children: this.tableData
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$emit('input', false)
        }
      })
    },
    closeDialog () {
      this.$emit('input', false)
    },
    // 增加下级
    handleAddSubordinate (row) {
      if (!row.children) {
        row.children = []
      }
      row.children.push(
        {
          dcode: '',
          dname: '',
          isenable: '1',
          normcode: '',
          normname: '',
          bsmDict: getUuid(32),
          typeid: row.typeid,
        }
      )
      this.keyList = [];
      this.keyList.push(row.bsmDict)
    },
    // 增加
    handleAdd () {
      this.$nextTick(() => {
        let container = this.$el.querySelector('.el-table__body-wrapper');
        container.scrollTop = container.scrollHeight;
      })
      this.tableData.push(
        {
          dcode: '',
          dname: '',
          isenable: '1',
          normcode: '',
          normname: '',
          bsmDict: getUuid(32),
          typeid: this.ruleForm.typeid,
        }
      )
      this.addIndexes()
      this.key++
    },
    // 上移下移
    moveUpward (index, row) {
      realMove(row.bsmDict, 'UP', this.tableData)
      this.key++
      let id = findParents(this.tableData, row.bsmDict)
      this.keyList = id
    },
    moveDown (index, row) {
      realMove(row.bsmDict, 'DOWN', this.tableData)
      this.key++
      let id = findParents(this.tableData, row.bsmDict)
      this.keyList = id
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/.el-radio {
  margin-right: 5px !important;
}
</style>