<template>
  <!-- 编辑 -->
  <dialogBox ref="edit" width="60%" :closed="true" @closeDialog="handleClose" @submitForm="handleSubmit"
    customClass="editDictionary" multiple title="字典信息">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="字典类型编码" prop="DCODE">
            <el-input v-model.trim="ruleForm.DCODE" placeholder="字典类型编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字典类型名称" prop="DNAME">
            <el-input v-model.trim="ruleForm.DNAME" placeholder="字典类型名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="字典结构" prop="ISTREE">
            <el-radio-group v-model="ruleForm.ISTREE">
              <el-radio label="1">树形</el-radio>
              <el-radio label="0">列表</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <lb-table :column="column" :heightNum="550" :key="key" :expand-row-keys="keyList" row-key="DICTID"
      :tree-props="{ children: 'children' }" :pagination="false" :data="tableData">
    </lb-table>
    <message-tips :message="message" ref="msg" />
  </dialogBox>
</template>

<script>
import dictionaries from '@/api/dictionaries'
import { getUuid } from '@/utils/tools'
export default {
  props: {
    dictList: Array,
    dicData: Object
  },
  data () {
    return {
      key: 0,
      message: '',
      keyList: [],
      ruleForm: {
        DCODE: '',
        DNAME: '',
        ISTREE: '1'
      },
      column: [
        {
          width: '60',
          renderHeader: (h, scope) => {
            return <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF">增加</i>
          },
          render: (h, scope) => {
            return (
              <span>{scope.row.index}</span>
            )
          }
        },
        {
          prop: 'DCODE',
          label: '字典项编码',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="字典项编码" 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 }}></el-input>


                <el-input placeholder="字典项编码" 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 }}></el-input>
              </div>
            )
          }
        },
        {
          prop: 'DNAME',
          label: '字典项名称',
          render: (h, scope) => {
            return (
              <div>
                <el-input placeholder="字典项编码" 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 }}></el-input>

                <el-input placeholder="字典项名称" 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 }}></el-input>
              </div>
            )
          }
        },
        {
          width: '130px',
          label: '移动',
          render: (h, scope) => {
            return (
              <div>
                <el-button type='text' disabled={scope.$index == 0} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
                <el-button type='text' disabled={(scope.$index + 1) == this.tableData.length} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
              </div >
            )
          }
        },
        {
          width: '150px',
          label: '操作',
          render: (h, scope) => {
            return (
              <div>
                <el-button type="text" style="margin-right:10px" v-show={this.ruleForm.ISTREE == '1'} 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: [],
      rules: {
        DCODE: [
          { required: true, message: '字典类型编码', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    isShow () {
      this.$refs.edit.isShow()
      setTimeout(() => {
        this.tableData = _.cloneDeep(this.dictList)
        this.addIndexes()
        let { DCODE, DNAME, ISTREE } = this.dicData
        this.ruleForm = {
          DCODE,
          DNAME,
          ISTREE
        }
      }, 0)
    },
    // 添加索引
    addIndexes () {
      this.tableData.forEach((item, index) => {
        if (index == 0) {
          item.codeShow = true
        } else {
          item.codeShow = false
          item.nameShow = false
        }
        item.index = index + 1
      })
    },
    itemShowFalse () {
      this.tableData.forEach((item, index) => {
        item.codeShow = false
        item.nameShow = false
      })
    },
    handleMinus (index, row) {
      this.removeTreeListItem(this.tableData, row.DICTID)
    },
    removeTreeListItem (treeList, DICTID) {
      if (!treeList || !treeList.length) {
        return
      }
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].DICTID === DICTID) {
          treeList.splice(i, 1);
          break;
        }
        this.removeTreeListItem(treeList[i].children, DICTID)
      }
    },
    async handleSubmit () {
      let submitData = _.cloneDeep(this.tableData)
      this.ruleForm.DICTID = this.dicData.DICTID
      this.ruleForm.PARENTID = null
      this.ruleForm.TYPEID = this.dicData.TYPEID
      submitData.forEach((item) => {
        item.ISTREE = this.ruleForm.ISTREE
      })
      submitData.unshift(this.ruleForm)
      try {
        let res = await dictionaries.editSysDict({ 'editDicts': submitData })
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.handleClose()
          this.$parent.featchData()
        }
      } catch (error) {
        this.message = error
        this.$refs.msg.messageShow()
      }
    },
    handleClose () {
      this.$refs['ruleForm'].resetFields();
      this.$refs.edit.isHide()
    },
    // 增加下级
    handleAddSubordinate (row) {
      if (!row.children) {
        row.children = []
      }
      row.children.push(
        {
          DCODE: '',
          DNAME: '',
          DICTID: getUuid(32),
          TYPEID: row.TYPEID,
          PARENTID: row.DICTID,
          children: null,
          ISTREE: this.ruleForm.ISTREE
        }
      )
      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: '',
          DICTID: getUuid(32),
          TYPEID: this.dicData.TYPEID,
          PARENTID: this.dicData.DICTID,
          children: null,
          ISTREE: this.ruleForm.ISTREE
        }
      )
      this.addIndexes()
    },
    // 上移下移
    moveUpward (index, row) {
      if (index > 0) {
        let upData = this.tableData[index - 1];
        this.tableData.splice(index - 1, 1);
        this.tableData.splice(index, 0, upData);
      } else {
        this.$message({
          message: '已经是第一条，上移失败',
          type: 'warning'
        });
      }
      this.key++
    },
    moveDown (index, row) {
      if ((index + 1) == this.tableData.length) {
        this.$message({
          message: '已经是最后一条，下移失败',
          type: 'warning'
        });
      } else {
        let downData = this.tableData[index + 1];
        this.tableData.splice(index + 1, 1);
        this.tableData.splice(index, 0, downData);
      }
      this.key++
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>

</style>