<template>
  <MegaSplitPanes class="setting-user-page">
    <MegaSplitPane size="13">
      <a-tree
        v-if="treeData.length"
        :block-node="true"
        :default-expand-all="true"
        :default-selected-keys="['1-1']"
        :tree-data="treeData"
        :replace-fields="{
          children: 'children',
          key: 'id',
          value: 'type',
          title: 'name',
        }"
        @select="handleNodeClick"
      >
      </a-tree>
      <div v-else>
        {{ $t("NO_DATA") }}
      </div>
    </MegaSplitPane>
    <MegaSplitPane size="87">
      <CheckConfigFlow
        v-if="moduleType === 'EPM_CHECK'"
        :accept-list="acceptList"
        :call-list="callList"
        :confirm-list="confirmList"
        @editModel="editModel"
      />
      <FixConfigFlow
        v-if="moduleType === 'EPM_REPAIR'"
        :accept-list="acceptList"
        :call-list="callList"
        :confirm-list="confirmList"
        @editModel="editModel"
      />
      <MaintainConfigFlow
        v-if="moduleType === 'EPM_PM'"
        :accept-list="acceptList"
        :call-list="callList"
        :confirm-list="confirmList"
        @editModel="editModel"
      />
    </MegaSplitPane>
  </MegaSplitPanes>
</template>
<script>
import { SplitPanes as MegaSplitPanes } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import CheckConfigFlow from "@/components/ConfigFlow/CheckConfigFlow";
import FixConfigFlow from "@/components/ConfigFlow/FixConfigFlow";
import MaintainConfigFlow from "@/components/ConfigFlow/MaintainConfigFlow";

export default {
  components: {
    CheckConfigFlow,
    FixConfigFlow,
    MaintainConfigFlow,
    MegaSplitPanes,
    MegaSplitPane: MegaSplitPanes.Pane,
  },
  data() {
    return {
      activeKeyA: "a",
      activeKeyB: "b",
      list: {
        SCENE_PICK_REPAIR_TICKET: "GRAB_ORDER_INTRODUCE",
        SCENE_ASSIGN_REPAIR_TICKET: "DISPATCH_INTRODUCE",
        SCENE_SELF_REPAIR_TICKET: "SELF_FIX_INTRODUCE",
        SCENE_AUTO_CHECK: "SCENE_AUTO_CHECK_CONTENT",
        SCENE_HALF_AUTO_CHECK: "SCENE_HALF_AUTO_CHECK_CONTENT",
        SCENE_HAND_CHECK: "SCENE_HAND_CHECK_CONTENT",
        SCENE_PM_BY_LIFE: "SCENE_PM_BY_LIFE_CONTENT",
      },
      callList: [],
      confirmList: [],
      acceptList: [],
      moduleType: "EPM_REPAIR", // 模块类型
      treeData: [
        {
          id: "1",
          name: () => this.$t("MODULE_EPM"),
          children: [
            {
              id: "1-1",
              name: () => this.$t("FIX_CONFIG"),
              type: "EPM_REPAIR",
            },
            {
              id: "1-2",
              name: () => this.$t("CHECK_CONFIG"),
              type: "EPM_CHECK",
            },
            {
              id: "1-3",
              name: () => this.$t("MAINTAIN_CONFIG"),
              type: "EPM_PM",
            },
          ],
        },
      ], // 树结构数据
      form: {},
      checkedMode1: false,
      checkedMode2: false,
      checkedMode3: false,
      radioMode1: "",
      changeType: "",
      changeModelOld: "",
      configData: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 点击节点查询数据
    handleNodeClick(node) {
      if (node.length > 0) {
        const index = this.treeData[0].children.findIndex(
          (item) => item.id === node[0]
        );
        this.acceptList = [];
        this.moduleType = this.treeData[0].children[index].type;
        this.init();
      }
    },
    // 初始化数据
    init() {
      const params = {
        moduleType: this.moduleType,
      };
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/ebs/scene-config/list-all`, {
          params,
        })
        .then((res) => {
          const callList = [];
          const confirmList = [];
          const acceptList = [];
          res.data.data &&
            res.data.data.forEach((item) => {
              const element = item;
              if (
                element.sceneType === "CALL" ||
                element.sceneType === "OFFLINE_CHECK" ||
                element.sceneType === "SUPPLEMENT_CHECK" ||
                element.sceneType === "STANDARD_VALUE_MATCH" ||
                element.sceneType === "EXCEPTION_SAVE" ||
                element.sceneType === "PM_WITH_PC" ||
                element.sceneType === "SUPPLEMENT_PM"
              ) {
                callList.push(element);
              } else if (element.sceneType === "CONFIRM") {
                confirmList.push(element);
              } else if (
                element.sceneType === "ACCEPT" ||
                element.sceneType === "CHECK_MODE" ||
                element.sceneType === "PM_MODE"
              ) {
                element.content = this.list[element.sceneCode];
                acceptList.push(element);
              }
            });
          this.callList = callList;
          this.confirmList = confirmList;
          this.acceptList = acceptList;
        });
    },
    editModel(data) {
      const params = {
        ...data,
        moduleType: this.moduleType,
      };
      this.$axios
        .put(`${ApiConstant.PREFIX_CORE}/api/epm/ebs/scene-config`, params)
        .then(() => {
          this.$message.success(this.$t("E0000000"));
          this.init();
        })
        .catch((e) => {
          this.init();
        });
    },
  },
};
</script>
<style lang="less" scoped>
.setting-user-page {
  position: absolute;
  width: 100%;
  height: 100%;
}
.collapse-header-divide {
  /deep/ .ant-collapse-header {
    border-bottom: solid 1px #eef1f4 !important;
    border-radius: 0 !important;
  }
}
/deep/.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
  color: rgba(0, 0, 0, 0.85);
}
</style>
