<template>
  <!-- 编辑 -->
  <dialogBox submitForm="submitForm" class="tableClass" @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" class="loadingtext" :heightNum="420" :key="key" :expand-row-keys="keyList"
      row-key="dictid" :tree-props="{ children: 'children' }" :pagination="false" :data="tableData">
    </lb-table>
  </dialogBox>
</template>

<script>
import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation'
import { editDictNode, getChildDictList } 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.dictid': {
      handler: function (newValue) {
        if (!this.value) return
        this.$startLoading();
        getChildDictList(newValue).then(res => {
          this.$endLoading();
          let { result } = res
          this.tableData = result ? result : []
          this.tableData.forEach((item, index) => {
            item.index = index + 1
          })
        })
      },
      immediate: true
    },
    details: {
      handler: function (newValue) {
        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.dictid)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSubmit () {
      editDictNode({
        dictid: this.details.rowData.dictid,
        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: '',
          dictid: getUuid(32),
          typeid: row.typeid,
        }
      )
      this.keyList = [];
      this.keyList.push(row.dictid)
    },
    // 增加
    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: '',
          dictid: getUuid(32),
          typeid: this.ruleForm.typeid,
        }
      )
      this.addIndexes()
      this.key++
    },
    // 上移下移
    moveUpward (index, row) {
      realMove(row.dictid, 'UP', this.tableData)
      this.key++
      let id = findParents(this.tableData, row.dictid)
      this.keyList = id
    },
    moveDown (index, row) {
      realMove(row.dictid, 'DOWN', this.tableData)
      this.key++
      let id = findParents(this.tableData, row.dictid)
      this.keyList = id
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/styles/public.scss";

/deep/.el-radio {
  margin-right: 5px !important;
  display: flex;
}

/deep/.el-radio__label {
  display: block;
}

/deep/.el-radio-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>