<template>
  <div>
    <!-- 选择清表表单 -->
    <el-dialog title="选择表单" class="excel-dialog" :visible.sync="tableDialogVisible" modal-append-to-body append-to-body
      :close-on-click-modal="false" width="75vw" top="10vh" @closed="cancel">
      <div class="excel-container">
        <div class="tree-box">
          <el-select style="width: 100%" v-model="selectedExcelTemplate.id" placeholder="请选择清表模板"
            @change="changeTemplate($event)">
            <el-option v-for="(item, key) in excelTemplateOption" :key="key" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <div class="flex" v-if="isShowSearch">
            <el-input size="small" placeholder="输入关键字搜索" clearable @clear="clearInput" v-model="filterText">
            </el-input>
            <el-button size="small" class="mg-l-10" @click="treeFilter">搜索</el-button>
          </div>
          <div class="scrollbar">
            <el-tree v-if="isShowLazyTree" @node-click="handleNodeClickExcel" ref="tree" class="excel-table-tree"
              :props="treeProps" :data="lazyTreeData" :load="loadNode" lazy node-key="id" accordion
              :default-expanded-keys="expandedKeys">
              <template #default="{ node, data }">
                <span :class="{
                  'checked-bg': tableMap.has(data.id),
                  'not-create': tableMap.has(data.id) && tableMap.get(data.id).isCreate > 0
                }">
                  {{ node.label }}
                </span>
              </template>
            </el-tree>
            <el-tree v-show="isShowAllTree" ref="treeAll" class="excel-table-tree" v-loading="treeLoading"
              :props="treeProps" :data="allTreeData" @node-click="handleNodeClickExcel" node-key="id"
              :expand-on-click-node="false" :filter-node-method="filterNode">
              <template #default="{ node, data }">
                <span :class="{
                  'checked-bg': tableMap.has(data.id),
                  'not-create': tableMap.has(data.id) && tableMap.get(data.id).isCreate > 0
                }">
                  {{ node.label }}
                </span>
              </template>
            </el-tree>
          </div>
        </div>
        <div class="table-box">
          <el-table :data="tableList" height="100%" border style="width: 100%;">
            <el-table-column prop="excelTabName" label="清表名称" align="center">
              <template #header>
                <div style="display: flex;align-items: center;justify-content: center;">
                  <span style="padding-right: 4px;">清表名称</span>
                  <el-button type="text" icon="el-icon-sort" class="text-icon"
                    @click="$refs.tableSortRef.show(tableList)"></el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="elementTableName" label="元素表名称" align="center" />
            <el-table-column prop="tableType" label="表单类型" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.tableType" placeholder="请选择">
                  <el-option v-for="item in tableTypeOption" :key="item.dictKey" :label="item.dictValue"
                    :value="item.dictKey">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="tableOwner" label="所属方" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.tableOwner" placeholder="请选择">
                  <el-option v-for="item in ownerTypeOption" :key="item.dictKey" :label="item.dictValue"
                    :value="item.dictKey">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="isCreate" label="是否允许创建" align="center">
              <template slot-scope="scope">
                <el-tooltip :disabled="!scope.row.isCreate" :content="isCreateTypeOption[scope.row.isCreate]"
                  placement="top">
                  <div :class="['tag', scope.row.isCreate ? 'no' : 'yes']">
                    {{ scope.row.isCreate ? '否' : '是' }}
                    <i v-if="scope.row.isCreate" class="el-icon-warning"></i>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-link type="danger" size="mini" style="margin: 0px" @click="delTable(scope.$index)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center; align-items: center">
        <el-button @click="cancel()">取 消</el-button>
        <el-button style="margin-left: 30px" type="primary" @click="save()" :loading="saveBtnLoading">确 定</el-button>
      </span>
    </el-dialog>
    <TableSort ref="tableSortRef" @confirm="sortConfirm"></TableSort>
  </div>
</template>

<script>
import { tabLazytree, tabLazytreeAll } from "@/api/exctab/excelmodel";
import { getList, getWbsTreeExcelTab, saveBatchWbsTree } from "@/api/exctab/exceltab";
import { getDictionary } from "@/api/system/dict";
import TableSort from "@/components/table-sort/index.vue";
export default {
  name: 'ChooseExcelTable',
  props: {
    nodeId: String,
    wbsId: String
  },
  components: { TableSort },
  data() {
    return {
      tableDialogVisible: false,
      excelTemplateOption: [], // 清表模版下拉列表数据
      treeProps: {
        label: "name",
        children: "children",
        isLeaf: "isLeaf",
      },
      selectedExcelTemplate: {}, //选中的清表模版
      isShowSearch: false, // 是否显示搜索框      
      filterText: "",
      isShowAllTree: false,
      isShowLazyTree: false,
      lazyTreeData: [],
      allTreeData: [],
      treeLoading: false,
      expandedKeys: [],
      tableList: [], // 清表表格数据
      ownerTypeOption: [], // 所有者类型下拉列表数据
      tableTypeOption: [], // 表单类型下拉列表数据
      isCreateTypeOption: {
        0: "可以创建",
        1: "已存在元素表",
        2: "未创建元素表",
        3: "未上传清表"
      }, // 是否允许创建Map
      saveBtnLoading: false,
    };
  },
  computed: {
    tableMap() {
      return new Map(this.tableList.map(t => [t.excelTabId, t]));
    },
    checkedSet() {
      return new Set(this.tableList.map(t => t.excelTabId)) || new Set();
    }
  },
  methods: {
    async show() {
      // this.filterText = "";
      // this.selectedExcelTemplate = {};
      // this.isShowSearch = false;
      // this.isShowAllTree = false;
      // this.isShowLazyTree = false;
      // this.lazyTreeData = [];
      // this.allTreeData = [];
      await this.getExcelTemplateOption();
      this.tableDialogVisible = true;
      this.ownerTypeOption = await this.getDictionaryData("owner_type");
      this.tableTypeOption = await this.getDictionaryData("table_type");
    },
    async getExcelTemplateOption() {
      const { data } = await getList(1, 1000, { parentId: 0 })
      if (data.code === 200) {
        this.excelTemplateOption = data.data.records
      }
    },
    async getDictionaryData(key) {

      const res = await getDictionary({ code: key })
      return res.data.data.map((element) => ({ ...element, dictKey: Number(element.dictKey) }))
    },
    changeTemplate(templateId) {
      // console.log(item, "item");
      const item = this.excelTemplateOption.find((item) => item.id === templateId);
      this.expandedKeys = [templateId]

      this.selectedExcelTemplate = { ...item };
      this.isShowLazyTree = false;
      this.isShowAllTree = false;
      this.filterText = "";
      if (this.selectedExcelTemplate.name != "") {
        this.lazyTreeData = [];
        this.addTableData = [];
        this.isShowSearch = false;
        this.$nextTick(() => {
          this.isShowLazyTree = true;
        });
      }
    },
    async loadNode(node, resolve) {
      //懒加载
      console.log("loadNode", node);
      if (node.level === 0) {
        return resolve(await this.getLazyTree(0));
      } else {
        return resolve(await this.getLazyTree(node.data.id));
      }
    },
    async getLazyTree(parentId) {
      //清表树信息
      const { data: res } = await tabLazytree({
        parentId: parentId,
        modeId: this.selectedExcelTemplate.id
      });
      console.log(res);
      if (res.code === 200 && res.msg === "操作成功") {
        if (res.data.length > 0) {
          this.isShowSearch = true;
          res.data.forEach((val) => {
            val.isLeaf = !val.hasChildren;
          });
        }
        return res.data;
      } else {
        return [];
      }
    },
    treeFilter() {
      if (this.filterText) {
        this.isShowAllTree = true;
        this.isShowLazyTree = false;
        if (!this.allTreeData.length) {
          this.treeLoading = true;
          tabLazytreeAll({
            modeId: this.selectedExcelTemplate.id,
            name: "",
          }).then((res) => {
            this.treeLoading = false;
            this.allTreeData = res.data.data;
            this.$nextTick(() => {
              this.$refs.treeAll.filter(this.filterText);
            });
          });
        } else {
          this.$refs.treeAll.filter(this.filterText);
        }
      } else {
        this.isShowAllTree = false;
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    clearInput() {
      this.isShowAllTree = false;
      this.isShowLazyTree = true;
    },
    handleNodeClickExcel(data, node) {
      console.log(data, node);
      if (data.hasChildren) return
      if (this.tableList.some(item => item.excelTabId === data.id)) return
      getWbsTreeExcelTab({ nodeId: this.nodeId, id: data.id }).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.tableList.push({ ...res.data.data, name: res.data.data.elementTableName });
        }
      });
    },

    delTable(index) {
      this.tableList.splice(index, 1)
    },

    sortConfirm(list) {
      this.tableList = list
    },

    cancel() {
      this.tableDialogVisible = false;
      this.tableList = []
      this.filterText = "";
      this.selectedExcelTemplate = {};
      this.isShowSearch = false;
      this.isShowAllTree = false;
      this.isShowLazyTree = false;
      this.lazyTreeData = [];
      this.allTreeData = [];
    },
    async save() {
      if (this.tableList.length === 0) {
        this.$message.warning("请选择表格后再提交")
        return
      } else if (this.tableList.some(el => el.isCreate)) {
        this.$message.warning("存在不可创建表单，请检查后重试")
        return
      } else if (this.tableList.some(el => !el.tableOwner)) {
        this.$message.warning("表单所属方数据不能为空，请选择后再提交")
        return
      }
      this.saveBtnLoading = true;
      const { data } = await saveBatchWbsTree({
        wbsId: this.wbsId,
        nodeId: this.nodeId,
        list: this.tableList
      })
      this.saveBtnLoading = false;
      if (data.code === 200) {
        this.$message.success("保存成功")
        this.cancel()
        this.$emit('confirm')
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .excel-container {
  height: 60vh !important;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 20px;
  grid-template-columns: calc(30% - 10px) calc(70% - 10px);

  .tree-box {
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .scrollbar {
      // flex: 1;
      overflow: scroll;
      // height: auto !important;
    }

    .el-tree-node>.el-tree-node__children{
      overflow: visible !important;
    }
  }

  .table-box {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
  }
}

/* 全局样式文件 */
::v-deep .excel-table-tree .el-tree-node {
  .checked-bg {
    background-color: #DCFCE7;
    padding: 4px;
  }

  .not-create {
    background-color: #FEE2E3;
    padding: 4px;
  }

  // /* 隐藏所有复选框 */
  // .el-checkbox {
  //   display: none;
  // }

  // /* 只有叶子节点才显示 */
  // .is-leaf+.el-checkbox {
  //   display: inline-block;
  // }
}

.tag {
  display: block;
  padding: 6px;
  border-radius: 18px;
  width: 60px;
  margin: 0 auto;
  position: relative;

  &.yes {
    background-color: #DCFCE7;
    color: #16A34A
  }

  &.no {
    background-color: #FEE2E3;
    color: #E14247
  }

  .el-icon-warning {
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 12px;
  }
}
</style>
