<template>
  <div style="height:100%;" class="flexStar">
    <div class="boxswai" style="width:26%;padding-left:0px;">
      <div class="boxnei" style="display: flex;flex-direction: column;">
        <div style="overflow: auto;flex:1">
          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" ref="avueTree"
            style="display: inline-block;min-width: 100%;">
            <span class="custom-tree-node" slot-scope="{ data ,node }" @mouseover.stop="mouseOver(data)"
              @mouseleave.stop="mouseLeave(data)" style="box-sizing: border-box;padding-right:70px!important;;">
              <div style="width:100%;">
                <span style="text-overflow: ellipsis;"> {{ data.title }} </span>
                <!-- <span> {{ node}} </span> -->
                <!-- 添加 -->
                <span>
                  <!-- 调整排序 -->
                  <el-link :underline="false">
                    <i class="el-icon-sort" @click.stop="sortpai(data, node)" v-if="node.level == 2" title="调整排序"></i>
                  </el-link>
                </span>
              </div>
            </span>
          </avue-tree>
        </div>
      </div>
    </div>
    <div class="boxswai" style="width:74%;padding-left:0px;padding-right:0px;">
      <div class="boxnei">
        <div class="marleft10" style="height:100%;
          display: flex;flex-direction: column;">
          <!-- 上传、删除、下载操作栏 -->
          <div class="rightHeader" v-show="from.checkd">
          </div>

          <el-empty style="height:80%;" v-show="false" description="该目录为根目录没有EXCEL文件"></el-empty>
          <div class="martop20" v-if="true" style="flex:1;">
            <avue-crud ref="crud" :data="loadData" :option="loadOption" v-model="obj" :page.sync="page"
              @on-load="onLoad" @selection-change="selectionChange" :table-loading="tabloading"
              @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange">

              <template slot="menuRight">
                <el-button type="danger" size="small" icon="el-icon-delete" plain @click="handleDelete">删除元素表
                </el-button>

                <el-button size="small" type="primary" plain @click="editele">编辑表单
                </el-button>
              </template>
              <template slot="menuLeft" slot-scope="{size}">
                <div style="display:flex;gap: 10px;width: 300px;">
                  <el-input placeholder="请输入你想搜索的表单名称" v-model="input3" :size="size" clearable @clear="clearinput">
                  </el-input>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="searchChange">搜索</el-button>
                </div>
              </template>
              <template slot-scope="{type,size,row}" slot="menu">
                <el-button :size="size" :type="type" @click="getDetail(row)"
                  :loading="loadingRowId === row.id">查看详情</el-button>
                <!-- <el-button  :size="size" :type="type" @click="distribution(row)">分配节点</el-button> -->
                <el-button :size="size" :type="type" @click="handleEditFormula(row)">公式配置</el-button>
                <el-button :size="size" :type="type" @click="editElement(row)">编辑元素</el-button>
              </template>
            </avue-crud>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑元素表单信息 -->
    <el-dialog title="编辑元素表单信息" :visible.sync="editElementFormTag" width="60%" :modal-append-to-body="false">
      <div>
        <el-table :data="formDatass" border style="width: 100%">
          <el-table-column prop="tableName" label="表名">
            <template slot-scope="scope">
              <el-input v-model="scope.row.tableName" placeholder="请输入表名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="tableType" label="表类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.tableType" placeholder="请选择">
                <el-option v-for="(item, key) in tableTypelist" :key="key" :label="item.dictValue"
                  :value="item.dictKey">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="tableOwner" label="所属方">
            <template slot-scope="scope">
              <el-select v-model="scope.row.tableOwner" placeholder="请选择">
                <el-option v-for="(item, key) in ownerTypeList" :key="key" :label="item.dictValue"
                  :value="item.dictKey">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="fillRate" label="填报率">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fillRate" placeholder="请输入填报率"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editElementFormTag = false">取 消</el-button>
        <el-button type="primary" @click="editeditElementFormMF()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 公式配置 -->
    <el-dialog :title="(curNode.title ? curNode.title : '') + '  元素公式'" :visible.sync="editEleFormulaVisible"
      width="800px" append-to-body :close-on-click-modal="false">
      <div class="flex mg-b-10">
        <el-input v-model="formulaInput" placeholder="请输入名称" size="samll" clearable
          @clear="searchFormulaName"></el-input>
        <el-button type="primary" class="mg-l-10" @click="searchFormulaName">搜索</el-button>
      </div>
      <el-table :data="editEleListFilter" border style="width: 100%" height="400px">
        <el-table-column align="center" prop="eName" label="字段信息">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-link :type="scope.row.globalFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row, 0)">全局公式</el-link>
            <!-- <el-link
              class="mg-l-10"
              :type="scope.row.isSaveFormula == 1 ? 'warning' : 'primary'"
              @click="toFormulaEdit(scope.row,10)"
              >节点公式</el-link
            > -->
            <!-- <el-link
              class="mg-l-10"
              type="danger"
              @click="delEleRowHandle(scope.$index,editEleListFilter)"
            >删除</el-link> -->
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 公式 -->
    <el-dialog title="元素公式(元素库)" :visible.sync="formulaCompVisible" fullscreen append-to-body class="full-dialog"
      @close="closeFormulaComp">
      <FormulaEdit :fromcurNode="curEleTable" :wbsid="id" :nodeid="curTreeData.id" :eleid="formulaCurRow.id"
        :projectid="projectid" :elementType="formulaCurRow.elementType" :globaltype="formulaCurRow.globaltype"
        @hideDialog="formulaCompVisible = false" v-if="formulaCompVisible"></FormulaEdit>
    </el-dialog>
    <!-- 关联公共WBS模板 -->
    <PublicWbs ref="PublicWbs" :from="from" />
    <!-- 编辑元素 -->
    <el-dialog :title="(this.curNode.title ? this.curNode.title : '') + '  元素编辑'" :visible.sync="editEleVisible"
      width="80%" append-to-body :close-on-click-modal="false">
      <p class="font-c-warning">编辑元素信息（请谨慎操作）</p>
      <div style="display:flex;margin-bottom:10px;">
        <el-input placeholder="请输入你想编辑的元素名称" v-model="searchinput" clearable @clear="clearsearchinput"
          style="width:300px;margin-right:10px"> </el-input>

        <el-select v-model="eTypeVal" style="width:200px;margin-right:10px;" clearable placeholder="请选择数据类型">
          <el-option v-for="item in dataTypeList" :key="item.id" :label="item.dictValue"
            :value="item.dictKey"></el-option>
        </el-select>

        <el-button type="primary" icon="el-icon-search" size="small" @click="searchinputChange">搜索</el-button>
      </div>

      <el-table :data="editEleList" border style="width: 100%" height="400px" v-loading="editEleloading">
        <el-table-column align="center" type="index" width="50"></el-table-column>
        <el-table-column align="center" prop="eName" label="元素名称">
          <template slot="header">
            <i class="required"></i>
            <span>元素名称</span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.eName" size="small" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="eType" label="数据类型" width="120">
          <template slot="header">
            <i class="required"></i>
            <span>数据类型</span>
          </template>
          <template slot-scope="scope">
            <el-select v-model="scope.row.eType" @change="setDefaultLength(scope.row)" size="small" placeholder="请选择">
              <el-option v-for="item in dataTypeList" :key="item.id" :label="item.dictValue"
                :value="item.dictKey"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="eLength" label="长度" width="120">
          <template slot="header">
            <i class="required"></i>
            <span>长度</span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.eLength" size="small" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="eAllowDeviation" label="允许偏差值">
          <template slot-scope="scope">
            <div class="flex">
              <el-select v-model="scope.row.allow" size="small" placeholder="请选择" style="width:120px">
                <el-option :key="1" label="-" value="-"></el-option>
                <el-option :key="2" label=">" value=">"></el-option>
                <el-option :key="3" label="<" value="<"></el-option>
                <el-option :key="4" label="≥" value="≥"></el-option>
                <el-option :key="5" label="≤" value="≤"></el-option>
                <el-option :key="6" label="±" value="±"></el-option>
                <el-option :key="7" label="【】" value="【】"></el-option>
              </el-select>
              <el-input v-model="scope.row.deviation" size="small" placeholder="请输入内容"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="eInspectionMethod" label="检查方法和频率">
          <template slot-scope="scope">
            <el-input v-model="scope.row.eInspectionMethod" size="small" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="required" label="是否必填项" width="140">
          <template slot-scope="scope">
            <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.required"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="assist" label="是否公式辅助元素" width="140">
          <template slot-scope="scope">
            <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.assist"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template slot="header">
            <el-button @click="addEleRow(editEleList)" type="text" icon="el-icon-circle-plus-outline"
              class="text-icon"></el-button>
          </template>
          <template slot-scope="scope">
            <el-button v-if="scope.row.id" icon="el-icon-remove-outline" type="text"
              @click="delEleRowHandle(scope.$index, editEleList)" class="text-icon text-icon-danger"></el-button>
            <div class="flex" v-else>
              <el-button @click="saveNewEle(scope.row)" type="mini">保存</el-button>
              <el-button icon="el-icon-remove-outline" type="text" @click="delEleRowHandle(scope.$index, editEleList)"
                class="text-icon text-icon-danger"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editEleVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEles" :loading="saveEleLoad">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 私有wbs树排序弹框 -->
    <el-dialog title="调整排序" :visible.sync="sortTag" width="50%" append-to-body>
      <ManualSorting v-if="sortTag2" @bianhua="bianhua()" :sort="sort" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="(sortTag = false), (sortTag2 = false)">取 消</el-button>
        <el-button type="primary" @click="editSort()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="元素表信息" custom-class="detail-dialog" :visible.sync="detailVisible" width="60%" append-to-body
      :close-on-click-modal="false">
      <div class="detail-container">
        <div class="detail-header">
          <div class="left">
            <div v-if="detailTableData.isExistData" class="tag">有数据存储</div>
            <div v-else class="tag no-data">无数据存储</div>
            <div class="basic-info">
              <div class="name">{{ detailTableData.tabChName }}</div>
              <div class="desc">创建信息：{{ detailTableData.name }}&nbsp;&nbsp;&nbsp;{{ detailTableData.createTime }}</div>
            </div>
          </div>
          <div class="right">
            <div class="item">
              <div class="num">{{ detailTableData.privateCount }}</div>
              <div class="label">使用项目数</div>
            </div>
            <div class="item">
              <div class="num">{{ detailTableData.tabExcelCount }}</div>
              <div class="label">使用清表数</div>
            </div>
          </div>
        </div>
        <div class="detail-content">
          <div class="content-title">
            使用项目明细
          </div>
          <div class="content-project">
            <div class="project-item" v-for="(item, index) in detailTableData.projectList" :key="index">
              {{ item }}
            </div>
          </div>
          <div class="content-title">
            使用清表明细
          </div>
          <div class="content-table">
            <el-table :data="detailTablePage" style="width: 100%" max-height="400px" v-loading="detailTableLoading"
              :header-row-style="{ backgroundColor: '#F9FAFB' }">
              <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
              <el-table-column prop="tableName" label="清表模板名称"></el-table-column>
              <el-table-column prop="nodeName" label="清表节点名称"></el-table-column>
            </el-table>
            <el-pagination hide-on-single-page style="float: right" background class="martop20 marbottom20"
              layout="total, prev, pager, next, jumper, sizes" :total="detailTableTotal" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :current-page="detailTableQuery.pageIndex"
              :page-size="detailTableQuery.pageSize">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { excelType } from '@/api/exctab/excelmodel';
import {
  updateBatchNodeTableInfoElement,
  selectByNodeTable,
  selectFormElements,
  selectPrivateFormElements
} from "@/api/manager/wbstree";
import { getTableElments } from "@/api/manager/wbstree";
import { tabTypeLazyTreeAll, delTabInfoAll } from "@/api/manager/wbsprivate";
import { saveElement, remove as removeElement, updateBatchElements, getElementDetail, getElementDetailPage, getTemplate, importWbsElement } from "@/api/manager/wbsformelement";
import FormulaEdit from "@/views/formula/edit1.vue";
import PublicWbs from './components/PublicWbs.vue'
import { searchNodeTables, } from "@/api/exctab/excelmodel";
import { wbsInfotabSort } from "@/api/manager/wbsinfo";
import { getDictionary } from "@/api/system/dict";
import ManualSorting from '@/components/WbsTree/ManualSorting'

export default {
  components: {
    FormulaEdit,
    PublicWbs,
    ManualSorting
  },
  data() {
    return {
      input3: '',
      editElementFormTag: false,//编辑元素
      tabloading: false,
      formDatass: [],
      selectionList: [],
      tableTypelist: [],
      ownerTypeList: [],
      dataTypeList: [],
      //数据类型的默认长度
      dataTypeDefaultMap: {
        1: 250,//字符串
        2: 50,//整数
        3: 50,//小数
        4: 50,//日期
        5: 50,//数值
        6: 50,//签名
        7: 100,//文件
      },
      page: {
        size: 10,
        current: 1,
        total: 2
      },
      loadOption: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: false,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        menu: true,
        dialogClickModal: false,
        column: [
          {
            label: "元素表名称",
            prop: "title",

            editDisplay: false,
            addDisplay: false,

          },
          {
            label: "元素表类型",
            prop: "tabType",

            // search: true,
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },

          {
            label: "元素总量",
            prop: "elementTotal",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属方",
            prop: "tabOwner",


            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "填报率",
            prop: "fillRate",

            editDisplay: false,
            addDisplay: false,
            rules: [
              {
                message: "请输入表数量",
                trigger: "blur",
              },
            ],
          },
        ],

      },
      formelemtfoelemtformrm: {},
      elementloading: false,
      elemtData: [
        {
          tableName: '张三',
          sex: '男',
          id: 1
        },
        {
          tableName: '李四',
          sex: '女',
          id: 2
        }
      ],
      curEleTable: {},
      eleReg: /(-|>|<|≥|≤|±|【】)?([^≥≤±【】]*)/,
      editEleList: [],
      editEleListAll: [],
      editEleFormulaVisible: false,
      editEleListFilter: [],
      excelId: '',
      treeNode: {},
      //#region 鼠标
      leftTRee: '',//左侧树ID
      threessW: 400,
      //#endregion
      heightss: '',//

      data: [],//清表模板
      filterText: "",//搜索关键字

      treeloading: false,
      defaultProps: {
        children: "children",
        isLeaf: function (data) {
          return !data.hasChildren || (data.isExistForm == 1);
        },
      },
      wbsdata: [],//wbs模板
      //#region 右侧数据
      from: {
        checkd: false
      },
      rules: {
        nodeName: [
          { required: true, message: '请输入清表名称', trigger: 'blur' },
        ],
        tabType: [
          { required: true, message: '请选择清表类型', trigger: 'blur' },
        ],
      },
      wbsform: {
        id: '',
        wbsType: '',
        wbsName: '',
      },//wbs树选中的值
      tableData: [],//右侧表数据
      wbsmiddle: false,//选择wbs模板那块是否有
      tableList: [],//进行处理的wbs关联表
      exceltypeData: [],//清表类型枚举
      wbsmodel: [],//wbs模板名称枚举
      //#endregion

      saveExcelLoad: false,
      filterText1: "",
      addTableData: [],
      //编辑元素
      editEleVisible: false,
      saveEleLoad: false,
      editEleloading: false,
      formulaInput: "",//公式配置
      formulaCompVisible: false, //公式弹框
      formulaCurRow: {}, //当前元素
      id: '',
      curTreeData: {},
      loadData: [],
      treeOption: {
        defaultExpandedKeys: [],
        currentNode: {},
        filter: false,
        addBtn: false,
        props: {
          labelText: '标题',
          label: 'title',
          value: 'id',
          children: 'children'
        },

        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = (node.level === 0) ? 12345678910 : node.data.id;

          tabTypeLazyTreeAll({ parentId, current: 1, size: 1000 }).then(res => {
            resolve(res.data.data.records.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              }
            }))
          });
        },

      },
      treeData: '',
      projectid: "",
      curNode: {},
      defaultExpandKey: [],//默认展开的节点
      sortTag: false,
      sortTag2: false,
      sort: [],
      searchinput: '',
      eTypeVal: '',
      // 查看详情 ========= start
      detailVisible: false,
      loadingRowId: null,
      detailTablePage: [],//详情数据
      detailTableData: {},
      detailTableLoading: false,
      detailTableTotal: 0,
      detailTableQuery: {
        pageIndex: 1,
        pageSize: 20,
      },
      // 查看详情 ========= end
    }
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  watch: {
    'input3'() {
      this.page.currentPage = 1;
      this.page.current = 1
    }
  },
  methods: {
    // 查看详情===========================start
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.listTablePage();
    },
    handleCurrentChange(val) {
      this.query.pageIndex = val;
      this.listTablePage();
    },
    async listTablePage() {
      const { data } = await getElementDetailPage({
        id: this.detailTableData.id,
        current: this.detailTableQuery.pageIndex,
        pageSize: this.detailTableQuery.pageSize
      });
      console.log(data, 'data.records');
      this.detailTableTotal = data.data.total
      this.detailTablePage = data.data.records

    },
    async getDetail(row) {
      this.loadingRowId = row.id;
      const { data } = await getElementDetail({ id: row.id });
      this.detailTableData = data.data;
      this.loadingRowId = null;
      this.detailVisible = true
      await this.listTablePage();
    },
    // 查看详情===========================end
    //关闭公式弹窗
    closeFormulaComp() {
      console.log('关闭');
      getTableElments(this.curEleTable.initTableId).then((res) => {

        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      })

    },
    //#region  树形控件外层左侧事件
    mouseLeave(data) {
      if (data.moreShow) {
        this.$set(data, 'moreShow', false)
      }
    },
    mouseOver(data) {
      if (!data.moreShow) {
        this.$set(data, 'moreShow', true)
      }
    },
    async sortpai(data, node) {
      console.log(data, node);
      this.curNode = node;
      this.curTreeData = data;
      await this.findWbsTreePrivateSameLevel(node, data)
      this.sortTag = true;
      this.sortTag2 = true;
    },
    editSort() {
      this.wbsInfotabSort();
    },
    bianhua() {
      this.sortTag2 = false;
      this.$nextTick(() => {
        this.sortTag2 = true;
      });
    },
    async wbsInfotabSort() {
      //元素库、独立库节点排序
      var newArr = this.sort.map((v) => { return v.id })
      newArr = newArr.join(',')
      const { data: res } = await wbsInfotabSort(newArr);
      console.log(res);
      if (res.code == 200) {
        this.sortTag = false;
        this.sortTag2 = false;
        this.refreshTreeData();
      }
    },
    async findWbsTreePrivateSameLevel(node, data) {
      const { data: res } = await tabTypeLazyTreeAll({ parentId: node.data.parentId, current: 1, size: 1000 });
      if (res.code == 200) {
        console.log(res.data, 'res1111111');
        let tabArr = res.data.records
        tabArr.forEach((item) => {
          item.tableName = item.title
        })
        console.log(tabArr, 'tabArr');
        this.sort = tabArr
      }
    },
    addEleRow(list) {
      list.push({});
    },
    //修改数据类型，给个默认值
    setDefaultLength(row) {
      this.$set(row, 'eLength', this.dataTypeDefaultMap[row.eType]);
    },

    delEleRow(index, list) {
      list.splice(index, 1);
    },
    delEleRowHandle(index, list) {
      let row = list[index];
      if (row.id) {
        //有id需要请求删除
        this.$confirm('是否确认删除?', '删除元素', {
          distinguishCancelAndClose: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消'
        }).then(() => {
          removeElement(row.id, this.curEleTable.initTableName, row.ekey).then(() => {
            list.splice(index, 1);
          })
          this.curEleTable.elementTotal--;
        })
      } else {
        list.splice(index, 1);
      }
    },
    formatTableType(cellValue) {
      for (let i = 0; i < this.tableTypelist.length; i++) {
        if (this.tableTypelist[i].dictValue == cellValue) {
          return this.tableTypelist[i].dictKey;
        }
      }
      return cellValue;
      //console.log(cellValue)
    },
    formatOwner(cellValue) {
      for (let i = 0; i < this.ownerTypeList.length; i++) {
        if (this.ownerTypeList[i].dictValue == cellValue) {
          return this.ownerTypeList[i].dictKey;
        }
      }
      return cellValue;
      //console.log(cellValue)
    },
    currentChange(currentPage) {
      this.page.current = currentPage;
      this.page.currentPage = currentPage;
      this.searchChange();

    },
    sizeChange(pageSize) {
      this.page.size = pageSize;
      //  this.searchChange();

    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    async tabTypeLazyTreeAll(parentId, current, size, titleName) {//清表树
      console.log(parentId);
      const { data: res } = await tabTypeLazyTreeAll({ parentId, current, size, titleName })
      if (res.code === 200) {
        return res.data

      }
    },
    nodeClick(data, node) {
      console.log(data, node, 'treedata');
      this.curNode = node
      this.curTreeData = data
      this.treeId = data.id
      this.page.current = 1;
      this.page.currentPage = 1
      if (data.hasChildren) {
        this.onLoad(this.page)
      }
      if (data.hasChildren === false && node.level == 2) {
        this.tabloading = true;
        let arr = []
        arr.push(data)
        this.loadData = arr
        this.page.total = 1
        setTimeout(() => {
          this.tabloading = false

        }, 1000);
      } else {
        this.loadData = []
        this.page.total = 0
      }
    },
    refreshChange() {
      this.searchChange();
    },
    onLoad(page, params = {}) {
      if (this.treeId) {
        this.tabloading = true;
        this.tabTypeLazyTreeAll(this.treeId, page.currentPage, page.pageSize, this.input3).then((res) => {
          this.loadData = res.records
          this.page.total = res.total
          this.tabloading = false
        })
      }
    },
    //编辑后刷新
    onLoad1() {
      if (this.curNode.level === 1 && this.curNode.data.hasChildren) {
        this.tabloading = true;
        this.tabTypeLazyTreeAll(this.treeId, this.page.current, this.page.size, this.input3).then((res) => {
          this.loadData = res.records
          this.page.total = res.total
          this.tabloading = false
        })
      } else {

        this.tabTypeLazyTreeAll(this.curNode.data.parentId, this.page.current, 1000, this.input3).then((res) => {
          let faArr = res.records;
          this.loadData = faArr.filter((item) => {
            if (item.id === this.treeId) {
              return item
            }
          })
        })
      }
    },
    //搜索
    searchChange() {
      if (this.treeId) {
        if (this.curTreeData.hasChildren) {
          this.tabloading = true;
          this.tabTypeLazyTreeAll(this.curTreeData.id, this.page.current, this.page.size, this.input3).then((res) => {
            this.loadData = res.records
            this.page.total = res.total
            this.tabloading = false;
          })
        }
        if (this.curTreeData.hasChildren === false && this.curNode.level == 2) {
          this.tabloading = true;
          let arr = []
          arr.push(this.curTreeData)
          this.loadData = arr
          this.page.total = 1;
          setTimeout(() => {
            this.tabloading = false

          }, 1000);
        } else {
          this.tabloading = true;
          this.loadData = []
          this.page.total = 0
          setTimeout(() => {
            this.tabloading = false

          }, 1000);
        }
      } else {
        //  this.$message.warning("请选选择左侧节点");
        if (this.input3) {
          this.tabloading = true;
          this.tabTypeLazyTreeAll(this.curTreeData.id, this.page.current, this.page.size, this.input3).then((res) => {
            this.loadData = res.records
            this.page.total = res.total
            this.tabloading = false;
          })
        } else {
          this.$message.warning("请输入你想搜索的表单名称");
        }

      }

    },
    clearinput() {
      this.searchChange()
    },
    resetChange(item) {
      console.log(item);
      this.tabTypeLazyTreeAll(this.treeId, this.page.current, this.page.size).then((res) => {
        this.loadData = res.records
        this.page.total = res.total
      })
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return delTabInfoAll(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);//刷新表格数据
          //刷新左边树形数据
          this.refreshTreeData()
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    // //刷新左边树形数据
    // refreshTreeData(){
    //   const parentId =12345678910
    //   tabTypeLazyTreeAll({parentId,current:1,siez:1000}).then(res => {
    //     this.treeData=res.data.data.records;
    //       this.$nextTick(()=>{
    //       //树默认展开
    //       if(this.curNode.level===1){
    //          this.treeOption.defaultExpandedKeys.push(this.curNode.data.id);
    //          this.$refs.avueTree.setCurrentKey(this.curNode.data.id)

    //       }else{
    //          this.treeOption.defaultExpandedKeys.push(this.curNode.data.parentId);
    //           // 设置选中的节点
    //           this.treeOption.currentNode =this.curNode.data.id
    //           this.$refs.avueTree.setCurrentKey(this.curNode.data.id)
    //       }

    //     })
    //   });
    // },
    //刷新左边树形数据
    refreshTreeData() {
      if (this.curNode.level === 1) {
        const parentId = 12345678910
        tabTypeLazyTreeAll({ parentId, current: 1, size: 1000 }).then(res => {
          this.data = res.data.data.records;
          this.$nextTick(() => {
            this.defaultExpandKey.push(this.curNode.data.id);
            this.$refs.avueTree.setCurrentKey(this.curNode.data.id);
          })
        });
      } else {

        this.updateTreeNewNode()
      }
    },
    //编辑元素表单信息
    updateTreeNewNode() {
      tabTypeLazyTreeAll(
        { parentId: this.curTreeData.parentId, current: 1, size: 1000 }
      ).then((res) => {
        var resarr = res.data.data.records.map(item => {
          return {
            ...item,
            leaf: !item.hasChildren
          }
        })
        this.$refs.avueTree.updateKeyChildren(
          this.curTreeData.parentId,
          //  res.data.data.records
          resarr
        );
        this.$refs.avueTree.setCurrentKey(this.curNode.data.id);
      });
    },
    //获取编辑元素信息
    getSelectPrivateFormElements() {
      this.editEleloading = true
      selectPrivateFormElements(this.curEleTable.id, { eName: this.searchinput, eType: this.eTypeVal }).then((res) => {
        this.editEleloading = false
        res.data.data.forEach((element) => {
          this.eleReg.exec(element.eAllowDeviation);
          //console.log(RegExp.$1)
          //console.log(RegExp.$2)
          element.allow = RegExp.$1 ? RegExp.$1 : '';
          element.deviation = RegExp.$2 ? RegExp.$2 : '';
        })
        this.editEleList = res.data.data;
      })
      this.editEleVisible = true;
    },
    editElement(row) {
      console.log(row, 'row');
      this.curEleTable = row;
      this.getSelectPrivateFormElements()
    },
    //修改数据类型，给个默认值
    setDefatableTypeultLength(row) {
      this.$set(row, 'eLength', this.dataTypeDefaultMap[row.eType]);
    },
    //分配节点
    distribution(row) {
      this.from.id = row.id;
      this.from.title = row.title;
      this.from.tableType = row.tabType
      this.from.tableType = this.formatTableType(this.from.tableType);
      this.from.tableOwner = row.tabOwner
      this.from.tableOwner = this.formatOwner(this.from.tableOwner);
      this.$refs.PublicWbs.show();
    },

    saveNewEle(row) {
      if (!row.eName) {
        this.$message({
          type: "warning",
          message: "请填写元素名称"
        });
        return;
      }
      if (!row.eType) {
        this.$message({
          type: "warning",
          message: "请选择数据类型"
        });
        return;
      }

      row.eAllowDeviation = (row.allow ? row.allow : '') + (row.deviation ? row.deviation : '');
      row.fId = this.curEleTable.id;
      row.initTableName = this.curEleTable.initTableName;

      if (!row.eLength) {
        this.$message({
          type: "warning",
          message: "请填写长度"
        });
        return;
      }

      saveElement(row).then((res) => {
        if (res.data.data) {
          this.$set(row, 'id', res.data.data.id);
          this.$set(row, 'ekey', res.data.data.ekey);
          this.$message({
            type: "success",
            message: "保存成功!"
          });
        }
      })
    },
    saveEles() {
      for (let i = 0; i < this.editEleList.length; i++) {
        if (!this.editEleList[i].id) {
          this.$message({
            type: "warning",
            message: "请先将新增的元素点击保存"
          });
          return;
        }
        if (!this.editEleList[i].eName) {
          this.$message({
            type: "warning",
            message: "请填写第" + (i + 1) + "条元素名称"
          });
          return;
        }
        if (!this.editEleList[i].eType) {
          this.$message({
            type: "warning",
            message: "请选择第" + (i + 1) + "条数据类型"
          });
          return;
        }
        if (!this.editEleList[i].eLength) {
          this.$message({
            type: "warning",
            message: "请填写第" + (i + 1) + "条长度"
          });
          return;
        }
      }
      if (this.editEleList.length > 0) {
        this.editEleList.forEach((element) => {
          element.eAllowDeviation = (element.allow ? element.allow : '') + (element.deviation ? element.deviation : '');

        })
        this.saveEleLoad = true
        updateBatchElements(this.editEleList, this.curEleTable.initTableName).then(() => {
          this.saveEleLoad = false
          this.editEleVisible = false;
          this.onLoad1(this.page);
          this.$message({
            type: "success",
            message: "保存成功!"
          });
        })
      } else {
        this.editEleVisible = false;
        this.onLoad1(this.page);
        this.$message({
          type: "success",
          message: "保存成功!"
        });
      }
    },
    handleEditFormula(row) {
      console.log(row, 'row');
      this.curEleTable = row;
      getTableElments(this.curEleTable.initTableId).then((res) => {

        this.editEleListFilter = res.data.data;
        this.editEleListAll = [].concat(this.editEleListFilter);
      })
      this.editEleFormulaVisible = true;
    },
    //搜索 筛选
    searchFormulaName() {
      this.editEleListFilter = this.editEleListAll.filter((ele) => {
        return ele.eName.indexOf(this.formulaInput) > -1;
      })
    },
    //跳转到公式配置页面
    toFormulaEdit(row, type) {
      this.formulaCurRow = row;
      this.formulaCurRow.globaltype = type;
      this.formulaCurRow.elementType = false;
      this.formulaCompVisible = true;
    },
    editele() {
      console.log('编辑元素表单信息');
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      if (this.elemtData.length) {
        let da = []
        this.formDatass = [...this.selectionList];
        console.log(this.formDatass, 'his.formDatass111');
        this.formDatass.forEach(val => {
          da.push({
            tableType: val.tabType,
            tableOwner: val.tabOwner,
            id: val.id,
            tableName: val.title,
            fillRate: val.fillRate,
          })
        })
        this.formDatass = da
        console.log(this.formDatass, 'this.formDatass');
        let fa = []
        this.formDatass.forEach(val => {
          let newarr = this.tableTypelist.filter(e => e.dictValue === val.tableType);
          let newarr1 = this.ownerTypeList.filter(e => e.dictValue === val.tableOwner);
          fa.push({
            tableType: newarr[0].dictKey,
            tableOwner: newarr1[0].dictKey,
            id: val.id,
            tableName: val.tableName,
            fillRate: val.fillRate,
          })
        })
        this.formDatass = fa
        this.editElementFormTag = true;

      }
    },
    getOwnerTypelist() {
      if (this.ownerTypeList.length > 1) {
        return;
      }
      getDictionary({
        code: "owner_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.ownerTypeList = res.data.data;
      });
    },
    getDataTypelist() {
      if (this.dataTypeList.length > 1) {
        return;
      }
      getDictionary({
        code: "data_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.dataTypeList = res.data.data;
      });
    },
    getTableTypelist() {
      if (this.tableTypelist.length > 1) {
        return;
      }
      getDictionary({
        code: "table_type",
      }).then((res) => {
        res.data.data.forEach((element) => {
          element.dictKey = Number(element.dictKey);
        });
        this.tableTypelist = res.data.data;
      });
    },

    editeditElementFormMF() {//保存按钮
      let da = []
      let tag = true
      console.log(this.tableTypelist, 'tableTypelist');
      this.formDatass.forEach(val => {
        if (!val.tableName || !val.tableType || !val.tableOwner) {
          tag = false
          return
        } else {

          da.push({
            id: val.id,
            nodeName: val.tableName,
            tableType: val.tableType,
            tableOwner: val.tableOwner,
            fillRate: val.fillRate,
            Type: 10
          })
        }
      })
      if (tag) {
        this.updateBatchNodeTableInfoElement(da)
      } else {
        this.$message({
          type: 'success',
          message: '请填写完整元素表单的所有信息!',
        })
      }
    },
    async updateBatchNodeTableInfoElement(da) {//共有编辑元素
      console.log(da, '编辑表单');
      const { data: res } = await updateBatchNodeTableInfoElement(da)
      if (res.code == 200) {
        this.$message.success('操作成功');
        this.editElementFormTag = false
        this.onLoad1(this.page);
      }
    },


    async excelType() {//清表类型
      const { data: res } = await excelType({ code: 'sys_excltab_type' })
      console.log(res);
      if (res.code === 200) {
        res.data.forEach(element => {
          element.dictKey = Number(element.dictKey)
        });
        this.exceltypeData = res.data
      }
    },


    //查看节点下已关联的元素表信息
    searchNodeTables(id) {
      searchNodeTables(id, this.from.id).then((res) => {
        if (res.data.data.length > 0) {
          res.data.data.forEach((val) => {
            if (val.isLinkTable == 2) {
              val.checknd = true;
            } else {
              val.checknd = false;
            }
            val.loading = false;
          });
          this.addTableData = res.data.data;
        } else {
          this.addTableData = [];
        }
      });
    },
    //编辑元素搜索相关
    clearsearchinput() {
      this.getSelectPrivateFormElements()
    },
    searchinputChange() {
      this.getSelectPrivateFormElements()
    }
  },
  created() {
    this.getTableTypelist();
    this.getOwnerTypelist();
    this.getDataTypelist();
  },
  mounted() {
    // this.heightss = this.$refs.rulesss.clientHeight
  }
}
</script>
<style scoped lang="scss">
.marleft10 {
  margin-left: 10px;
}

::v-deep.el-tree-node__expand-icon {
  font-size: 16px;
}

.colorblue {
  color: rgb(0, 82, 217);
}

.treecontent ::v-deep.el-scrollbar {
  height: 100%;
}

.el-scrollbar {
  height: 100%;
}

.rightHeader {
  display: flex;
  justify-content: flex-start;
  align-items: top;
  font-size: 14px;
  background-color: #fff;

  .excelname {
    box-sizing: border-box;
    min-width: 200px;
    height: 28px;
    border: 1px solid rgb(220, 220, 220);
    padding: 0 10px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.dialogModel {
  .dialogBox {
    .middle {
      display: flex;

      .left {
        border: 1px solid rgb(220, 220, 220);
        border-radius: 3px;
        height: 500px;
        width: 49%;

        .select {
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          padding: 5px 0;
          border-bottom: 1px solid #e0e0e0;
        }

        .leftscroll {
          height: 450px;
          overflow-y: scroll;
        }
      }

      .right {
        height: auto;
        height: 60px;
        max-height: 500px;
        margin-left: 2%;
        // height: 500px;
        border-radius: 3px;

        td {
          box-sizing: border-box;
          padding: 5px 10px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }

  .btbox {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

.rightBox {
  flex: 1;
}

.boxswai {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 10px;
}

::v-deep.avue-crud__left {
  width: 65% !important;
}

::v-deep.el-input-group__append {
  background-color: #ecf5ff;
  color: #409EFF;

}

::v-deep.el-input-group__append:hover {
  background-color: #409EFF;
  color: white;
}

::v-deep.el-input-group__prepend:hover {
  background-color: #409EFF;
  color: white;
}

::v-deep.el-input-group__append:active {
  background-color: #9dc5ee;
  color: white;
}

::v-deep.el-input-group__prepend:active {
  background-color: #9dc5ee;
  color: white;
}

::v-deep .detail-dialog {
  .el-dialog__body {
    padding: 0;
  }

  .detail-container {
    border-top: #BBBBBB solid 2px;
    margin: 0 6px;
    padding: 10px;
    max-height: 600px;
    overflow-y: scroll;

    .detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: flex-start;

        .tag {
          border-radius: 20px;
          font-size: 12px;
          padding: 3px 5px;
          background-color: #DCFCE7;
          color: #16A34A;
          margin-right: 10px;

          &.no-data {
            background-color: #fee2e3;
            color: #e03b3f;
          }
        }

        .basic-info {
          display: flex;
          flex-direction: column;
          color: #1F2937;

          .name {
            font-size: 18px;
            font-weight: 600;
            padding-bottom: 4px;
          }

          .desc {
            font-size: 12px;
          }
        }
      }

      .right {
        display: flex;
        gap: 20px;

        .item {
          display: flex;
          align-items: center;
          flex-direction: column;

          .num {
            font-weight: 700;
            color: #2550a2;
            font-size: 24px;
          }

          .label {
            font-size: 14px;
            color: #6B7280;
          }
        }
      }

    }

    .detail-content {
      margin-top: 10px;

      .content-title {
        height: 32px;
        line-height: 32px;
        color: #767676;
        background-color: #e0e0e0;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        padding: 0 18px;
      }

      .content-project {
        padding: 12px 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .project-item {
          color: #1F2937;
          background-color: #DFDFDF;
          border-radius: 15px;
          padding: 4px 14px;
          font-size: 13px;
        }
      }

      .content-table {
        margin-top: 6px;
        margin-bottom: 20px;
      }
    }
  }

}
</style>
