<template>
  <div>
    <el-row>
      <el-col :span="10" style="padding-right:10px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典项</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="btnClick('addFather')">新增</el-button>
          </div>
          <el-table border :max-height="500" :data="tableDataOne" @cell-click='clickTableOne' highlight-current-row
            :header-cell-style="{ background: 'rgba(30,144,255,.1)','letter-spacing':'2px' }">
            <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
            <el-table-column prop="type" align="center" label="类型名称"></el-table-column>
            <el-table-column prop="description" align="center" label="描述" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" label="操作">

                <template slot-scope="scope">
                  <el-button @click.capture="btnClick('addChild',scope.row)" type="text">新增子项</el-button>
                  <el-button @click.capture="btnClick('editFather',scope.row)" type="text">修改</el-button>
                  <el-button @click.capture="btnClick('deleteFather',scope.row)" type="text">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典列表</span>
          </div>
          <el-table :max-height="500" border :data="tableDataTwo" @selection-change="handleSelectionChange"
            highlight-current-row @cell-click='clickTableTwo'
            :header-cell-style="{ background: 'rgba(30,144,255,.1)','letter-spacing':'2px' }">
            <el-table-column align="center" type="index" width="100" label="序号">
            </el-table-column>
            <el-table-column prop="label" align="center" label="名称"></el-table-column>
            <el-table-column prop="value" align="center" label="代码值">
              <template  slot-scope="scope">
                {{ rowOne.type=='disk_remaining'?`${scope.row.value}%`:scope.row.value }}
              </template>
            </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button @click.capture="btnClick('editChild',scope.row)" type="text">修改</el-button>
                  <el-button @click.capture="btnClick('deleChild',scope.row)" type="text">删除</el-button>
                </template>
              </el-table-column>
            <template slot="empty">
              <div class="noCart">
                <!--<img width="250px" src="@/assets/images/blank.png" alt="暂无数据" title="暂无数据">
                -->
                <div>暂无数据</div>
              </div>
            </template>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加子项 -->
    <add-dia :title="title" :rowOne='rowOne' :addStatus="addStatus" :form='form' @cancel='cancel'
      @clickTableOne='clickTableOne' />
    <!-- 添加父项 -->
    <add-left :title="title" :rowOne='rowOne' :addLeftStatus="addLeftStatus" :form='fathForm' @cancel='cancel'
      @clickAddLeft='clickAddLeft' @clickEditLeft="clickEditLeft" />
  </div>
</template>

<script>
import {
  findList,
  getTypeList,
  deleteItem,
  deleteType
} from "@/api/system-management/dictionary";
import { clearObjValue, message } from "@/utils/common";
import addDia from "./components/addDia.vue";
import addLeft from "./components/addLeft.vue"
export default {
  data() {
    return {
      tableDataOne: [],
      tableDataTwo: [],
      multipleSelection: [],
      rowOne: {},// 左侧table，当前选中行数据
      rowTwo: {},
      addStatus: false,
      addLeftStatus:false,
      title: "",
      form: {
        label: "",
        value: "",
        type: "",
        description: "",
        id: "",
      },
      fathForm: {
        type: "",
        description: "",
        id: "",
        label:"",
        value:""
      },
      showButtons: {
        tjzd: false,
        xgzd: false,
        sczd: false,
        ftjzd:false,
        fxgzd:false,
        fsczd:false,
      },
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "success",
        0: "info",
      };
      return statusMap[status];
    },
    statusName(status) {
      const statusMap = {
        1: "是",
        0: "否",
      };
      return statusMap[status];
    },
  },
  components: {
    addDia,
    addLeft
  },
  methods: {
    // 获取字典列表数据
    getData() {
      getTypeList().then((res) => {
        this.tableDataOne = res.body.list;
      });
    },
    // 点击字典类型-获取字典子项
    clickTableOne(row) {
      if (row != this.rowOne) {
        this.rowTwo = {};
      }
      this.rowOne = row;
      findList({
        type: row.type,
      }).then((res) => {
        this.tableDataTwo = res.body.list;
      });
    },
    // 按钮功能
    btnClick(val,row) {
      // 将当前选中的数据
      switch (val) {
        case 'addChild': // 子-添加
          this.rowOne = row;
          if (JSON.stringify(this.rowOne) === "{}") {
            message("warning", "请选择左侧字典类型", 3000);
            return;
          }
          this.form.type = this.rowOne.type;
          this.addStatus = true;
          this.title = "新增字典名称 -- " + this.rowOne.type;
          break;
        case 'editChild': // 子-修改
          this.rowTwo = row;
          this.title =
            "编辑字典名称 -- " + this.rowOne.type;
          for (let key in this.form) {
            for (let index in this.rowTwo) {
              if (key === index) {
                this.form[key] = this.rowTwo[index];
              }
            }
          }
          this.addStatus = true;
          break;
        case 'deleChild': // 子-删除
          this.rowTwo = row;
          if (JSON.stringify(this.rowTwo) === "{}") {
            message("warning", "请选择要删除的字典", 3000);
            return;
          }
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            deleteItem({
              id: this.rowTwo.id,
            }).then((res) => {
              message("success", "删除成功", 3000);
              this.clickTableOne(this.rowOne);
            });
          });
          break;
        case 'addFather': // 父-添加
          this.addLeftStatus = true;
          this.title = "新增字典名称";
          break;
        case 'editFather': // 父-修改
          this.rowOne = row;
          this.title =  "编辑字典名称 -- " + this.rowOne.type;
          for (let key in this.fathForm) {
            for (let index in this.rowOne) {
              if (key === index) {
                this.fathForm[key] = this.rowOne[index];
              }
            }
          }
          this.addLeftStatus = true;
          break;
        case 'deleteFather': // 父-删除
          this.rowOne = row;
          if (JSON.stringify(this.rowOne) === "{}") {
            message("warning", "请选择要删除的字典", 3000);
            return;
          }
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            deleteType({
              id: this.rowOne.id,
              type:this.rowOne.type
            }).then((res) => {
              message("success", "删除成功", 3000);
              this.getData();
              this.tableDataTwo = [];
            });
          });
          break;
      }
    },
    // 新增父字典
    clickAddLeft(row){
      // 刷新数据；
      getTypeList().then((res) => {
        this.tableDataOne = res.body.list;
      });
    },
    clickEditLeft(){
      // 刷新数据；
      getTypeList().then((res) => {
        this.tableDataOne = res.body.list;
      });
    },
    
    clickTableTwo(row) {
      this.rowTwo = row;
    },
    cancel() {
      clearObjValue(this.form);
      clearObjValue(this.fathForm);
      (this.form.isEffective = 1), (this.addStatus = false);
      this.addLeftStatus = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang='scss' scoped>
.tableClass {
  display: flex;
  justify-content: space-around;

  .tableOne {
    width: 32%;
  }

  .tableTwo {
    width: 65%;
  }
}
</style>
