<template>
  <div class="wraaap">
    <div class="left">
      <BaseMenuTree
        :menuData="treeData"
        :filterShow="true"
        :Allshow="false"
        :treeButton="true"
        :filterButtonShow="true"
        style="height: 100%"
        :treeProps="treeProps"
        @handleNodeClick="homeHandleNodeClick"
        ref="menuTree"
        @add="treeAddHandle"
        @append="treeAppendHandle"
        @revise="treeReviseHandle"
        @remove="treeRemoveHandle"
      ></BaseMenuTree>
    </div>
    <div class="right">
      <header style="background: #fff; padding: 20px">
        <div class="search">
          <BaseNewForm
            :spanNumber="8"
            refName="searchForm"
            :formRow="SearchformRow"
            :formRule="false"
            :ruleForm="searchForm"
            :newFlag="true"
            :isFunBtn="false"
          ></BaseNewForm>
        </div>
        <div class="btn">
          <el-button type="primary" @click="searchHandle">搜索</el-button>
          <el-button @click="resizeSearchHandle">重置</el-button>
        </div>
      </header>
      <main style="background: #fff; padding: 20px 20px 0">
        <div style="margin: 0 0 30px 0">
          <el-button type="primary" @click="newPage">新增</el-button>
        </div>
        <div>
          <BaseTable
            ref="mainTable"
            :tableData="tableData"
            :tableColumn="tableColumn"
            :funData="funData"
            :funWidth="funWidth"
            :showIndex="true"
            :tabLoading="mainTabLoading"
            @onFunc="tableButtonHandle"
            :tableHeight="'60vh'"
            :border="false"
          ></BaseTable>
        </div>
      </main>
      <footer>
        <basePage
          :pageModel="pageModel"
          @update:pageModel="currentChangeHandle"
        ></basePage>
      </footer>
    </div>
    <baseRightDialog
      @handleConfirmClick="handleConfirmClick"
      :dialogVisible="rightDialogSwitch"
      :title="treeTitle"
      @handleClose="rightDialogSwitch = false"
    >
      <div class="treeChunk" v-if="treeRuleForm.class_superiors_name">
        <div class="text">上级节点：</div>
        <div class="input">
          <el-input
            :disabled="true"
            v-model="treeRuleForm.class_superiors_name"
            placeholder=""
          ></el-input>
        </div>
      </div>
      <div class="treeChunk">
        <div class="text">节点名：</div>
        <div class="input">
          <el-input
            v-model="treeRuleForm.class_name"
            placeholder="请输入节点名"
          ></el-input>
        </div>
      </div>
    </baseRightDialog>
  </div>
</template>

<script>
import basePage from "./compoments/basePage.vue";
import BaseMenuTree from "./compoments/baseMenuTree";
import BaseNewForm from "./compoments/baseNewForm";
import BaseTable from "./compoments/baseTable";
import { getUserModuleApi } from "@/api/integrationOption/integrationOption.js";
import baseRightDialog from "@/components/base/baseRightDialog";
export default {
  data() {
    return {
      rightDialogSwitch: false, //右侧dialog
      lookFlag: false, //是否打开查看模式
      newFlag: false, //是否打开新增模式
      pageModel: {
        //页码控制
        pageIndex: 1,
        total: 10,
        limit: 10,
      },
      mainTabLoading: false, //表格loding控制
      treeData: [
        //左侧分类数据
        {
          label: "测试",
          id: 1,
          children: [
            {
              id: 3,
              label: "哈哈",
            },
          ],
        },
      ],
      treeForm: { class_name: "", class_superiors: "", class_code: "" },
      searchForm: {}, //搜索框数据
      SearchformRow: [
        //搜索框数据
        {
          elCol: [
            {
              type: "input",
              title: "任务编码",
              id: "task_code",
              row: 8,
            },
            {
              type: "input",
              title: "任务名称",
              id: "task_name",
              row: 8,
            },
          ],
        },
      ],
      funData: [
        //table操作
        {
          type: "edit",
          text: "编辑",
          color: "#5a9cf8",
        },
        {
          type: "view",
          text: "查看",
          color: "#5a9cf8",
        },
        {
          type: "dele",
          text: "删除",
          color: "#e47470",
        },
      ],
      tableData: [{ taskCode: "测试", taskName: "123" }], //table主表数据
      tableColumn: [
        //数据咧数据
        {
          id: "task_code",
          title: "任务编码",
        },
        {
          id: "task_name",
          title: "任务名称",
        },
        {
          id: "task_classes",
          title: "任务分类",
        },
        {
          id: "task_cron",
          title: "任务策略",
        },
        {
          id: "fun_info",
          title: "功能介绍",
        },
        {
          id: "remark",
          title: "备注",
        },
      ],
      treeProps: {
        children: "childClassifications",
        label: "class_name",
      },
      treeTitle: "",
      treeRuleForm: {},
      treeAddFlag: false,
    };
  },
  methods: {
    // 右dialog提交
    async handleConfirmClick() {
      if (!this.treeRuleForm.class_name) {
        this.$message({
          type: "error",
          message: "请输入树名称",
        });
        return;
      }
      if (this.treeAddFlag) {
        const res = await getUserModuleApi(
          {
            tl: "integrationTaskClassificationService",
            as: "integrationTaskClassification",
            dj: "saveTaskClassification",
          },
          this.treeRuleForm
        );
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.rightDialogSwitch = false;
          this.initTreeData();
        }
      } else {
        const res = await getUserModuleApi(
          {
            tl: "integrationTaskClassificationService",
            as: "integrationTaskClassification",
            dj: "updateTaskClassification",
          },
          this.treeRuleForm
        );
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.rightDialogSwitch = false;
          this.initTreeData();
        }
      }
    },
    // 树初始化
    async initTreeData() {
      const res = await getUserModuleApi(
        {
          tl: "integrationTaskClassificationService",
          as: "integrationTaskClassification",
          dj: "queryTaskClassification",
        },
        {}
      );
      if (res.status == 200) {
        this.treeData = res.attribute;
      }
      console.log(res, "🌲");
    },
    // 树添加
    treeAppendHandle(data) {
      this.treeRuleForm = {};
      this.treeTitle = "子节点增加";
      this.treeAddFlag = true;
      this.$set(this.treeRuleForm, "class_superiors_name", data.class_name);
      this.$set(this.treeRuleForm, "class_superiors", data.id);
      this.$set(this.treeRuleForm, "class_code", data.class_code);
      this.$set(this.treeRuleForm, "lvl", String(data.lvl * 1 + 1));
      this.rightDialogSwitch = true;
    },
    treeReviseHandle(data) {
      this.treeRuleForm = {};
      this.treeAddFlag = false;
      this.rightDialogSwitch = true;
      this.$set(this.treeRuleForm, "id", data.id);
      this.$set(this.treeRuleForm, "class_code", data.class_code);
      this.$set(this.treeRuleForm, "class_name", data.class_name);
      this.$set(this.treeRuleForm, "lvl", String(data.lvl));
      this.treeTitle = "子节点编辑";
    },
    treeRemoveHandle(data) {
      this.$confirm("确认删除？")
        .then(async () => {
          console.log(1);
          const res = await getUserModuleApi(
            {
              tl: "integrationTaskClassificationService",
              as: "integrationTaskClassification",
              dj: "updateTaskClassificationSts",
            },
            {
              id: data.id, //任务id
            }
          );
          console.log(res);
          if (res.status == 200) {
            this.$nextTick(() => {
              this.initTreeData();
            });
          }
        })
        .catch(() => {});
    },
    // 左侧树加号点击事件
    treeAddHandle() {
      this.treeRuleForm = {};
      this.treeAddFlag = true;
      this.rightDialogSwitch = true;
      this.treeTitle = "根节点增加";
      this.$set(this.treeRuleForm, "class_code", new Date().getTime());
      this.$set(this.treeRuleForm, "lvl", "0");
    },
    // 初始化表单
    async initTableData(obj = {}) {
      const res = await getUserModuleApi(
        {
          tl: "integrationTaskService",
          as: "integrationTask",
          dj: "queryListJson",
        },
        {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          query_condition: { ...obj },
        }
      );
      console.log(res);
      if (res.status == 200) {
        this.tableData = res.attribute;
      }
    },
    // 搜索按钮
    searchHandle() {
      this.initTableData({ ...this.searchForm });
    },
    // 重置按钮
    resizeSearchHandle() {
      this.searchForm = {};
    },
    // 新建路由跳转
    newPage() {
      this.$router.push({ name: "taskAdd" });
    },
    // 暂无作用
    homeHandleNodeClick(data) {
      this.pageModel.pageIndex = 1;
      this.pageModel.total = 0;
      this.pageModel.limit = 10;
      this.searchForm = {};
      this.tableData = [];
      this.lookFlag = false;
      this.newFlag = false;
    },
    // 页面
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.$nextTick(() => {
        this.initTableData({ ...this.searchForm });
      });
    },
    // 表格按钮
    tableButtonHandle(val, item) {
      if (item.type === "view") {
        this.$router.push({
          name: "taskAdd",
          query: { id: val.id, lookFlag: true },
        });
      } else if (item.type === "dele") {
        console.log(111);
        this.$confirm("确认删除？")
          .then(async () => {
            const res = await getUserModuleApi(
              {
                tl: "integrationTaskService",
                as: "integrationTask",
                dj: "updateIntegrationTaskSts",
              },
              {
                id: val.id, //任务id
              }
            );
            if (res.status == 200) {
              if (
                this.pageModel.total - 1 + this.pageModel.limit <=
                this.pageModel.pageIndex * this.pageModel.limit
              ) {
                this.pageModel.pageIndex--;
              }
              this.$nextTick(() => {
                this.initTableData({ ...this.searchForm });
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (item.type === "edit") {
        this.$router.push({ name: "taskAdd", query: { id: val.id } });
      }
    },
  },
  components: {
    BaseMenuTree,
    BaseNewForm,
    BaseTable,
    basePage,
    baseRightDialog,
  },
  computed: {
    // 操作框的宽度
    funWidth() {
      return this.funData.length * 70;
    },
  },
  mounted() {
    // this.$refs.menuTree.clickFirst();
    this.initTableData();
    this.initTreeData();
  },
  computed: {
    // 操作框的宽度
    funWidth() {
      return this.funData.length * 70;
    },
  },
};
</script>

<style scoped lang="scss">
.treeChunk {
  padding: 20px;
  display: flex;
  align-items: center;
  > .text {
    flex: 1;
  }
  > .input {
    flex: 5;
  }
}
.wraaap {
  display: flex;
  .right {
    width: 85%;
    margin-left: 20px;
    border-radius: 20px !important;
  }
  .left {
    border-radius: 20px;
    width: 15%;
    background-color: #fff;
  }
  .btn {
    display: flex;
    justify-content: flex-end;
  }
  main {
    margin-top: 20px;
    border-radius: 20px;
  }
  footer {
    margin-top: 15px;
  }
  header {
    border-radius: 20px;
  }
}
</style>