<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-07-13 16:42:17
-->
<template>
  <div>
    <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="bsmDict" :tree-props="{ children: 'children' }" :pagination="false" :data="tableData">
    </lb-table>

    <div class="text-center">
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" plain>确定</el-button>
    </div>
  </div>
</template>

<script>
  import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation'
  import { editDictNode, getChildDictList } from '@/api/user'
  export default {
    props: {
      formData: {
        type: Object,
        default: () => { }
      }
    },
    data () {
      return {
        key: 0,
        keyList: [],
        ruleForm: {
          dcode: '',
          dname: ''
        },
        column: [],
        columns: [
          {
            width: '70',
            renderHeader: (h, scope) => {
              return (<div>
                {
                  this.formData.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.formData.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.formData.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.formData.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.formData.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.formData.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.formData.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.formData.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.formData.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.formData.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: []
      }
    },
    mounted () {
      if (this.formData?.bsmDict) {
        this.$startLoading();
        getChildDictList(this.formData.bsmDict).then(res => {
          this.$endLoading();
          let { result } = res
          this.tableData = result ? result : []
          this.tableData.forEach((item, index) => {
            item.index = index + 1
          })
          this.tableData = judgeSort(this.tableData)
        })
      }
      if (this.formData?.isenable == 2) {
        this.column = this.columns.slice(0, 6)
      } else {
        this.column = this.columns
      }
      this.ruleForm = this.formData.rowData
      this.addIndexes()
      this.key++
    },
    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 () {
        this.$startLoading();
        editDictNode({
          bsmDict: this.formData.rowData.bsmDict,
          typeid: this.formData.rowData.typeid,
          children: this.tableData
        }).then(res => {
          this.$endLoading();
          if (res.code === 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.$popupCacel()
          }
        })
      },
      // 增加下级
      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>
  @import "~@/styles/dialogBoxheader.scss";

  /deep/.el-radio {
    margin-right: 5px !important;
  }
</style>