<template>
  <div class="fu">
        <div style="display:flex;">
     <el-button type="primary" @click="codeVisible = true" class="addbtn">添加代码</el-button>

      </div>
    <div class="box">
      <!-- 添加按钮 -->
      <!-- 滚动条 -->
      <div style="width: 50%; height: 100%; overflow: auto">
        <el-table :data="tableData" row-key="id" border height="100%" @row-click="getCodeKV" :highlight-current-row="true" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column prop="id" label="id" sortable> </el-table-column>
          <el-table-column prop="name" label="编码名称" sortable>
          </el-table-column>
          <el-table-column prop="hierarchy_flg" label="是否多级" sortable>
            <template slot-scope="props">
              <span v-if="props.row.hierarchy_flg === '1'">是</span>
              <span v-else style="color: #f56c6c" class="material-icons fa fa-times-circle">否</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="77">
            <template slot-scope="scope">
              <el-button size="small" type="danger" @click="delbtn(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="width: 50%; height: 100%; overflow: auto">
        <table style="
            width: 100%;
            text-align: center;
            background-color: #8cc8ff;
            height: 55px;
            border-collapse: collapse;
          ">
          <thead style="font-size: 16px;display: flex;height: 100%;justify-content: flex-start;align-items: center ">
            <td style="border: 1px solid #8cc8ff; width: 35.5%">
              {{ rightdata.id }}
            </td>
            <td style="border: 1px solid #8cc8ff; width: 35.6%">
              {{ rightdata.name }}
            </td>
            <td style="border: 1px solid #8cc8ff; width: 179px;display:flex;">
              <el-button size="small" type="warning" @click="thisaddCodeKV()">添加节点</el-button>
            </td>
          </thead>
        </table>
        <el-table :data="tableDataKV" row-key="id" height="92%" border :tree-props="{ children: 'son' }">
          <el-table-column prop="k" label="K值" sortable> </el-table-column>
          <el-table-column prop="v" label="Value值" sortable> </el-table-column>
          <el-table-column label="操作" width="179">
            <template slot-scope="scope">
              <el-button v-if="yesOrOffBtn.hierarchy_flg == '1'" size="small" type="primary" @click="addCodeKVson(scope.$index, scope.row)">添加子节点</el-button>
              <!-- 禁用按钮 -->
              <el-button v-else Boolean size="small" type="primary" disabled>添加子节点</el-button>
              <el-button size="small" type="danger" @click="delKVbtn(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 添加代码展示框 -->
    <el-dialog title="添加代码" :visible.sync="codeVisible">
      <el-form :model="addcodeData">
        <el-form-item label="id:" :label-width="formLabelWidth">
          <el-input v-model="addcodeData.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="name:" :label-width="formLabelWidth">
          <el-input v-model="addcodeData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否层级:" :label-width="formLabelWidth">
          <el-radio v-model="addcodeData.hierarchy_flg" label="1">是</el-radio>
          <el-radio v-model="addcodeData.hierarchy_flg" label="0">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="codeVisible = false">取 消</el-button>
        <el-button type="primary" @click="addcode()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加KV值展示框 -->
    <el-dialog title="添加键值" :visible.sync="KVVisible">
      <el-form :model="addcodeKV">
        <el-form-item label="K:" :label-width="formLabelWidth">
          <el-input v-model="addcodeKV.k" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="V:" :label-width="formLabelWidth">
          <el-input v-model="addcodeKV.v" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="KVVisible = false">取 消</el-button>
        <el-button type="primary" @click="goAddCodeKV()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加子节点展示框 -->
    <el-dialog title="添加子键值" :visible.sync="sonKVVisible">
      <el-form :model="sonAddcodeKV">
        <el-form-item label="K:" :label-width="formLabelWidth">
          <el-input v-model="sonAddcodeKV.k" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="V:" :label-width="formLabelWidth">
          <el-input v-model="sonAddcodeKV.v" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sonKVVisible = false">取消</el-button>
        <el-button type="primary" @click="goaddCodeKVson()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCodesAPI,
  delCodesAPI,
  addCodesAPI,
} from "@/api/superAdministrator/appCodesManagement";
export default {
  components: {},
  data() {
    return {
      //右侧展示和添加节点
      rightdata: {
        create_at: "",
        hierarchy_flg: "",
        id: "",
        name: "",
      },
      sonAddcodeKV: {
        kv: 1,
        codeid: "",
        parentid: "",
        k: "",
        v: "",
      },
      addcodeKV: {
        kv: 1,
        codeid: "",
        parentid: "",
        k: "",
        v: "",
      },
      sonKVVisible: false,
      codeVisible: false,
      KVVisible: false,
      tableData: [],
      tableDataKV: [],
      search: "",
      addcodeData: {
        id: "",
        name: "",
        hierarchy_flg: "",
        data: [
          {
            codeid: "",
            parentid: "",
            k: "",
            v: "",
          },
        ],
      },
      formLabelWidth: "100px",
      codeKV: {
        kv: 1,
        codeid: "",
      },
      delCode: {
        kv: null,
        id: "",
      },
      yesOrOffBtn: {},
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    //控制按钮是否可用
    // buttonType() {
    //   console.log(this.yesOrOffBtn);
    //   if (this.yesOrOffBtn.hierarchy_flg == "1") {
    //   }
    // },
    //获取数据列表
    getCode() {
      getCodesAPI().then((res) => {
        // console.log(res);
        this.tableData = res.data.rows;
        this.tableData.forEach((item, i) => {
          this.tableData[i].hierarchy_flg ? "是" : "否";
        });
      });
    },
    //获取用户kv值
    async getCodeKV(row) {
      //判断,如果有k值,则证明是键值删除后请求数据,没有则是点击查看键值请求数据
      console.log("获取用户kv值row", row);
      if (row.k) {
        var a = {
          kv: 1,
          codeid: "",
        };
        a.codeid = row.codeid;
        await getCodesAPI(a).then((res) => {
          this.tableDataKV = res.data;
          this.sonAddcodeKV.k = "";
          this.sonAddcodeKV.v = "";
        });
      } else {
        this.yesOrOffBtn = row;
        this.codeKV.codeid = row.id;
        this.rightdata = row;
        await getCodesAPI(this.codeKV).then((res) => {
          this.tableDataKV = res.data;
        });
      }
    },
    //添加kv值
    thisaddCodeKV() {
      this.KVVisible = true;
      this.addcodeKV.codeid = this.rightdata.id;
    },
    goAddCodeKV() {
      this.KVVisible = false;
      addCodesAPI(this.addcodeKV).then((res) => {
        console.log("添加用户kv值时向后台传递的数据:", this.addcodeKV);
        // console.log("this.codeKV:", this.codeKV);
        this.getCodeKV(this.addcodeKV);
        this.addcodeKV.codeid = null;
        this.sonAddcodeKV.k = null;
        this.sonAddcodeKV.v = null;
        this.addcodeKV.v = null;
        this.addcodeKV.k = null;
      });
    },
    //添加代码
    addcode() {
      this.codeVisible = false;
      this.addcodeData.data[0].codeid = this.addcodeData.id;
      addCodesAPI(this.addcodeData).then((res) => {
        console.log("添加代码返回数据:", res);
        this.addcodeData.id = "";
        this.addcodeData.name = "";
        this.addcodeData.hierarchy_flg = null;
        if (res.status) {
          this.open2();
          this.getCode();
        } else {
          this.open4();
        }
      });
    },
    //错误提示
    open4() {
      this.$message.error("添加失败,请检查您的数据是否重复添加");
    },
    //成功提示
    open2() {
      this.$message({
        message: "已成功",
        type: "success",
      });
    },
    //添加子节点
    addCodeKVson(i, row) {
      console.log("添加子节点:", row);
      this.sonKVVisible = true;
      this.sonAddcodeKV.parentid = row.id;
      this.sonAddcodeKV.codeid = row.codeid;
    },
    //向后台提交子节点
    goaddCodeKVson() {
      // console.log("this.sonAddcodeKV:", this.sonAddcodeKV);
      addCodesAPI(this.sonAddcodeKV).then((res) => {
        // console.log(res);
        this.sonKVVisible = false;
        this.getCodeKV(this.sonAddcodeKV);
      });
    },
    //删除KV值
    delKVbtn(i, row) {
      // console.log("删除的kv值", row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //删除KV
          this.delCode.kv = 1;
          this.codeKV = row.codeid;
          // console.log("row.id:", row.id);
          this.delCode.id = row.id;
          delCodesAPI(this.delCode).then((res) => {
            if (res.status) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // console.log("键值row", row);
              this.getCodeKV(row);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除代码
    delbtn(i, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          //删除代码
          // console.log("代码row", row);
          var del = {
            key: 1,
            id: row.id,
          };
          // console.log("sahnchudel", del);
          delCodesAPI(del).then((res) => {
            // console.log(res);
            if (res.status) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getCode();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: center;
  overflow: auto;
  height: 80vh;
  padding: 10px;
  min-width: 1200px;
  width: 100%;
}
.fu {
  height: 80%;
  width: 100%;
  box-sizing: border-box;
}
.addbtn {
  margin: 0px 10px 10px 10px;
}
</style>
