<template>
  <div class="table" v-if="columns">
    <!-- 高级搜索 -->
    <TableSearch @searchTable="searchTable" :data="data" />
    <PopForm
      v-if="isShow"
      @getMenuList="getMenuList"
      @closePopForm="closePopForm"
      :data="FormData"
      :that="this"
      :menu="data"
      :site="site"
    />

    <Detail
      v-if="isShow2"
      @closePopForm="closePopForm"
      :that="this"
      :id="detailId"
      :site="site"
    />
    <div class="columns-action">
      <a-button
        v-show="isDrag"
        @click="dragSubmit"
        type="primary"
        :style="{ margin: '0px 15px 0 0', height: '20px', fontSize: '12px' }"
        >{{ $t("menu.table.content.保存") }}</a-button
      >
      <div class="drag" :style="{ marginRight: '15px' }" v-action:Drag>
        <a-tooltip :title="$t('拖拽')">
          <a-dropdown placement="bottomCenter" :trigger="['hover']">
            <a-icon class="action" type="pull-request" />
            <div slot="overlay">
              <a-switch
                :checked-children="$t('开')"
                :un-checked-children="$t('关')"
                v-model="isDrag"
              />
            </div>
          </a-dropdown>
        </a-tooltip>
      </div>

      <div
        class="add"
        :style="{ marginRight: '15px' }"
        @click="edit('', thethis)"
        v-action:Add
      >
        <a-tooltip :title="$t('新增')">
          <a-icon class="action" type="plus" />
        </a-tooltip>
      </div>

      <!-- 表格大小设置 -->
      <TableSize class="action-size" @changeTableSize="changeTableSize" :that="this" />

      <!-- 表格列设置 -->
      <ActionColumns
        class="action-column"
        @columns="getcolumns"
        :columns-keys="columnsKeys"
        @getTableFixed="getTableFixed"
        @resetTableFixed="resetTableFixed"
        :columns-fixed="columnsFixed"
        :that="this"
        :style="{ marginRight: '15px' }"
      />

      <div
        class="refresh"
        :style="{ marginRight: '15px' }"
        @click="getMenuList('', thethis)"
      >
        <a-tooltip :title="$t('刷新')">
          <a-icon class="action" type="reload" />
        </a-tooltip>
      </div>
    </div>
    <a-spin :spinning="isSpinning">
      <template>
        <a-table
          ref="table"
          v-if="data"
          :size="tableSize"
          :columns="columns"
          :data-source="data"
          :childrenColumnName="'childrenList'"
          :scroll="{ y: fullHeight - 350 }"
          row-key="id"
          :customRow="click"
          @change="changepage"
          :draggable="true"
          :pagination="false"
          :rowClassName="
            (record) => {
              if (record.id == passRow && dragDirection == 'top')
                return 'table-color-dust-top';
              else if (record.id == passRow && dragDirection == 'bot')
                return 'table-color-dust-bottom';
              else if (record.id == passRow && dragDirection == 'mid')
                return 'table-color-dust';
            }
          "
        >
          <!-- name -->
          <span slot="name" slot-scope="name, x">
            <span v-if="!x.isEditName">{{ $t(`menu.table.content.${name}`) }}</span>
            <a-input v-else v-model="x.name" :style="{ width: '150px' }" />
            <div
              v-if="isDrag"
              class="edit"
              :style="{ margin: '0px 5px 0', display: 'inline-block' }"
              @click="
                () => {
                  x.isEditName = !x.isEditName;
                }
              "
              v-action:Modify
            >
              <a-tooltip>
                <a-icon v-if="!x.isEditName" class="action" type="edit" />
                <a-icon v-else class="action" type="close" />
              </a-tooltip>
            </div>
            <div
              class="up"
              v-if="isDrag && x.parentId != 0"
              :style="{ marginRight: '0px', display: 'inline-block' }"
              @click="upFristLevel(x)"
              v-action:Modify
            >
              <a-tooltip :title="$t('menu.table.content.升至第一级')">
                <a-icon class="action" type="vertical-align-top" />
              </a-tooltip>
            </div>
          </span>
          <!-- 图标 -->
          <span slot="icon" slot-scope="icon">
            <div class="img" :style="{ width: '100%', textAlign: 'center' }">
              <a-icon :style="{ fontSize: '25px', color: '#13C2C2' }" :type="icon" />
            </div>
          </span>
          <!-- 子模块 -->
          <!-- <span slot="moduleList" slot-scope="moduleList">
            <div v-if="moduleList">
              <a-tag v-for="(item, key) in moduleList" :key="key" :color="'orange'">
                {{ item.name }}
              </a-tag>
            </div>
          </span> -->

          <!-- 模块类型  -->
          <span slot="type" slot-scope="type">
            <a-tag :color="'green'">
              {{
                type == 1
                  ? $t("menu.table.content.菜单")
                  : type == 2
                  ? $t("menu.table.content.普通页面")
                  : type == 3
                  ? $t("menu.table.content.页面模块")
                  : ""
              }}
            </a-tag>
          </span>
          <!-- 模块级别  -->
          <span slot="moduleLevel" slot-scope="moduleLevel">
            <a-tag
              :color="moduleLevel == 1 ? 'green' : moduleLevel == 2 ? 'blue' : 'red'"
            >
              {{
                moduleLevel == 1
                  ? $t("menu.table.content.普通")
                  : moduleLevel == 2
                  ? $t("menu.table.content.高级")
                  : moduleLevel == 3
                  ? $t("menu.table.content.特级")
                  : ""
              }}
            </a-tag>
            <!-- {{moduleLevel}} -->
          </span>

          <!-- 是否需要校验  -->
          <span slot="isNeedCheck" slot-scope="isNeedCheck">
            <span :style="{ color: isNeedCheck ? '#16D46B' : '#FD572B' }">{{
              isNeedCheck ? $t("menu.table.content.是") : $t("menu.table.content.否")
            }}</span>
          </span>

          <!-- 操作 -->
          <template slot="operation" slot-scope="x, y">
            <div :style="{ display: 'flex' }">
              <a-button
                type="primary"
                @click="edit(y, thethis)"
                :style="{ marginRight: '5px' }"
                v-action:Modify
              >
                {{ $t("编辑") }}
              </a-button>

              <a-popconfirm
                :title="$t('menu.table.content.确认删除')"
                @confirm="() => deletedADInfo(y.id)"
              >
                <a-button
                  type="danger"
                  :style="{ background: '#FD572B', marginRight: '5px' }"
                  v-action:Delete
                >
                  {{ $t("删除") }}
                </a-button>
              </a-popconfirm>

              <!-- <a-button
              type="primary"
              :style="{
                background: '#16D46B',
                border: '#16D46B',
              }"
              @click="goDetail(y)"
            >
              查看详情
            </a-button> -->
            </div>
          </template>
        </a-table>
      </template>
    </a-spin>
  </div>
</template>
<script>
import { mapState } from "vuex";

import "@/common/components/MyTable/table/table.less";
import ActionColumns from "@/common/components/MyTable/table/TableSet.vue";
import PopForm from "@/baseConfigComponents/components/Menu/Modify/PopFormModel.vue";
import TableSearch from "@/baseConfigComponents/components/Menu/List/components/TableSearch.vue";
import TableSize from "@/common/components/MyTable/table/TableSize.vue";
import Detail from "./components/Detail";
import {
  resetFullHeight,
  changeTableSize,
  getcolumns,
  getTableFixed,
  resetTableFixed,
  edit,
  closePopForm,
  columnsFixed,
  columnsKeys,
} from "@/common/components/MyTable/table/utils/table.js";
import { columnsMenu, columnsMenuTest } from "./columns.js";
import { getMenuData, deleteMunu, dragMenu } from "@/baseConfigComponents/api/menu.js";
import { getSiteOfRouter } from "@/baseConfigComponents/components/Menu/List/js/utils.js";
import { i18nRender } from "@/common/locales";

export default {
  data() {
    this.thethis = this;
    return { 
      columnsMenuTest,
      columns: columnsMenu,
      columns2: [],
      data: [], // 数据
      data2: undefined,
      isShow: false,
      isShow2: false,
      tableSize: "default", // 表格默认大小
      // total: 0, // 分页参数
      searchParams: {}, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
      innerData: "",
      expandedRowKeys: [],
      detailId: "",
      isSpinning: false,
      site: {},
      moduleList: [],
      isDrag: false, //拖拽开关
      isEditName: false, //编辑名字
      passRow: "", //拖拽路过行 class
      sourceObj: {}, //被拖拽行的数据
      sourceIndex: "", //被拖拽行的 index值
      sourceParentId: "",
      topHeight: "",
      dragDirection: "",
    };
  },

  created() {
    // setTimeout(()=>{
    //   this.columns = this.columnsMenuTest
    // },2000)
    // setTimeout(()=>{
    //   this.columns = require('./columns.js').columnsMenu
    // console.log(this.columns);
    // },100)
    this.moduleList = this.$route.meta.moduleList;
    // ////console.log(this.$route);
    this.site = getSiteOfRouter(window.location.hash);

    // 初始化表格窗口高度
    resetFullHeight(this);
    this.columns2 = JSON.parse(JSON.stringify(this.columns));

    // //获取广告列表
    this.getMenuList(this.searchParams, this);
  },
  mounted() {
    // var AntTbody = document.querySelector(" div.ant-table-body");
    // var AntSpin = document.querySelectorAll(" div.ant-spin-nested-loading");
    // var AntTable = document.querySelectorAll(" div.table");
    // // console.log(AntTbody.offsetTop);
    // // console.log(AntSpin[0].offsetTop);
    // // console.log(AntTable[0].offsetTop);
    // this.topHeight = AntTbody.offsetTop + AntSpin[0].offsetTop + AntTable[0].offsetTop;
    // console.log(this.topHeight);
  },

  methods: {
    // 改变表格size  子传父
    changeTableSize,
    // 列设置 展示指定 的参数
    getcolumns,
    // 编辑跳转 表单
    edit,
    // 改变列固定方向
    getTableFixed,
    // 重置 列 固定方向
    resetTableFixed,
    // 关闭表单（编辑）
    closePopForm,
    // 跳转详情页
    goDetail(info) {
      this.isShow2 = true;
      this.detailId = info.id;
    },

    open(expanded, record) {
      // ////////console.log(expanded,record)
      if (expanded) {
        this.innerData = record.childrenList;
        ////////console.log(record.childrenList);
        this.expandedRowKeys = [];
        this.expandedRowKeys.push(record.key);
      } else {
        this.expandedRowKeys = [];
      }
    },

    getMenuList(searchParams, obj) {
      this.isSpinning = true;
      getMenuData(this.site.siteCode, searchParams).then((res) => {
        obj.data = res.data;
        // //////console.log(obj.data,'菜单数据');
        obj.$set(obj.data, "key", null);
        var timestamp = Date.parse(new Date());
        obj.data.map((item) => {
          item.key = item.id + timestamp;
        });
        this.dataAddIsEditName(obj.data);

        obj.data2 = JSON.parse(JSON.stringify(obj.data));
        // console.log(obj.data);
        this.isSpinning = false;
      });
    },

    // 翻页
    changepage(index) {
      getADList({ Page: index.current, ...this.searchParams }).then((res) => {
        var ADList = res.data.data;
        this.data = ADList;
        this.data2 = JSON.parse(JSON.stringify(this.data));
      });
    },
    pushDefaultOption(id, nodes, parmas, path) {
      if (path == undefined) {
        path = [];
      }
      for (var i = 0; i < nodes.length; i++) {
        var tmpPath = path.concat();
        tmpPath.push(nodes[i][parmas]);
        if (id == nodes[i][parmas]) {
          return tmpPath;
        }
        if (nodes[i].childrenList) {
          var findResult = this.pushDefaultOption(
            id,
            nodes[i].childrenList,
            parmas,
            tmpPath
          );
          if (findResult) {
            return findResult;
          }
        }
      }
    },

    // 查询
    searchTable(searchParams) {
      this.data = JSON.parse(JSON.stringify(this.data2));
      this.searchParams = searchParams;
      // this.getMenuList(this.searchParams, this);

      // ////////console.log(this.pushDefaultOption(searchParams.id,this.data)[0]);
      // try {
      //   var rootId = this.pushDefaultOption(searchParams.id, this.data, "id")[0];
      //   // var rootCode = this.pushDefaultOption(searchParams.code,this.data,'code')[0]
      //   // var rootCode = this.pushDefaultOption(searchParams.code,this.data,'code')[0]
      // } catch (error) {}

      // console.log(this.data);
      // console.log(this.getMenuById(searchParams.id, this.data2));
      if (searchParams.id) {
        this.data = [
          this.getMenuById(searchParams.id, JSON.parse(JSON.stringify(this.data2))),
        ];
      }
    },
    // 删除广告信息
    deletedADInfo(id) {
      ////////console.log(id);
      deleteMunu(this.site.siteCode, ~~this.site.siteId, id).then((res) => {
        this.$message.success("删除成功");
        this.getMenuList("", this);
        // this.data = this.data.filter((item) => item.id != id);
        // this.data2 = JSON.parse(JSON.stringify(this.data));
      });
    },
    getTopHeight() {
      var AntTbody = document.querySelector(" div.ant-table-body");
      var AntSpin = document.querySelectorAll(" div.ant-spin-nested-loading");
      var AntTable = document.querySelectorAll(" div.table");

      // console.log(AntTbody.offsetTop + AntSpin[0].offsetTop + AntTable[0].offsetTop);
      return AntTbody.offsetTop + AntSpin[0].offsetTop + AntTable[0].offsetTop;
    },
    getScroll() {
      return {
        left:
          window.pageXOffset ||
          document.documentElement.scrollLeft ||
          document.body.scrollLeft ||
          0,
        top:
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          0,
      };
    },

    click(record, index) {
      return {
        props: {
          draggable: true, // 设置拖拽属性
        },
        style: {
          cursor: "pointer",
        },
        on: {
          dblclick: () => {
            this.edit(record, this);
            // ////////console.log(record, index);
          },
          // 鼠标移入
          mouseenter: (event) => {
            if (this.isDrag) {
              // 兼容IE
              var ev = event || window.event;
              ev.target.draggable = true;
            }
          },
          // 开始拖拽
          dragstart: (event) => {
            if (this.isDrag) {
              // console.log(event);
              // 兼容IE
              var ev = event || window.event;
              // 阻止冒泡
              ev.stopPropagation();
              // 得到源目标数据
              this.sourceObj = JSON.parse(JSON.stringify(record));
              this.sourceParentId = JSON.parse(JSON.stringify(record.parentId));
              this.sourceIndex = JSON.parse(JSON.stringify(index));
              // //console.log(record.name, index, "起始行");
            }
          },
          // 拖动元素经过的元素
          dragover: (event) => {
            if (this.isDrag) {
              var tbody = document.querySelectorAll("div.ant-table-body");
              var tableScrollTop = tbody[0].scrollTop;
              this.topHeight = this.getTopHeight();
              let scrollTop = this.getScroll().top;
              var MouseHeight = event.y + scrollTop + tableScrollTop - this.topHeight;
              let lineHeight = MouseHeight % this.tableLineHeight;
              if (lineHeight < 15) {
                // console.log("此行上部分");
                this.dragDirection = "top";
              } else if (lineHeight > this.tableLineHeight - 15) {
                // console.log("此行下部分");
                this.dragDirection = "bot";
              } else {
                // console.log("此行中间部分");
                this.dragDirection = "mid";
              }
              // console.log(event);
              // console.log(lineHeight);

              // 兼容 IE
              var ev = event || window.event;
              // 阻止默认行为
              ev.preventDefault();
              this.passRow = record.id;

              // //console.log(record.id, record.name, "经过行");
            }
          },
          // 鼠标松开
          drop: (event) => {
            this.passRow = "";
            if (this.isDrag) {
              // 兼容IE
              var ev = event || window.event;
              // 阻止冒泡
              ev.stopPropagation();
              // 得到目标数据
              this.targetObj = JSON.parse(JSON.stringify(record));

              // //console.log(record.id, record.name, "目标行")

              //原数据行与 目标行都是最外层 的情况
              if (record.parentId == 0 && this.sourceParentId == 0) {
                console.log("都为最顶层", this.dragDirection, index);

                if (this.dragDirection == "top") {
                  this.data.splice(index, 0, this.sourceObj);
                  if (index > this.sourceIndex) {
                    this.$delete(this.data, [this.sourceIndex]);
                  } else {
                    this.$delete(this.data, [this.sourceIndex + 1]);
                  }
                  return;
                } else if (this.dragDirection == "bot") {
                  this.data.splice(index + 1, 0, this.sourceObj);
                  if (index < this.sourceIndex) {
                    this.$delete(this.data, [this.sourceIndex + 1]);
                  } else {
                    this.$delete(this.data, [this.sourceIndex]);
                  }
                  return;
                } else {
                  var theDragMenuEndFather = record;
                  console.log(theDragMenuEndFather, index);
                  var fatherMenuId = theDragMenuEndFather.id;
                  var fatherMenuname = theDragMenuEndFather.name;
                  var targetIndex = 0;
                }
                // var cc = this.data[this.sourceIndex];
                // //console.log(cc);
                // this.$set(this.data, [this.sourceIndex], this.data[index]);
                // this.$set(this.data, [index], cc);

                // var timestamp = Date.parse(new Date());
                // //console.log(this.data);

                // this.data.map((item) => {
                //   item.key = item.id + timestamp;
                // });
              } else if (record.parentId == this.sourceObj.id) {
                this.$message.error("错误");
                return;
                // //console.log(theDragMenuEnd,0);
              }
              // else if (record.parentId == 0 || this.sourceParentId == record.id) {
              else if (record.parentId == 0) {
                console.log(this.data);
                var fatherMenuId = record.id;
                var targetIndex = 0;
                if (this.dragDirection == "mid") {
                  console.log(theDragMenuEndFather, index, "情况2mid");
                } else if (this.dragDirection == "bot") {
                  console.log(theDragMenuEndFather, index, "情况2bot");
                  this.sourceObj.parentId = 0;
                  this.data.splice(index + 1, 0, this.sourceObj);
                  var amend = false;

                  if (this.sourceParentId != 0) {
                    //删除被拖拽目标之前的值
                    console.log(
                      this.sourceObj.id,
                      this.sourceParentId,
                      this.data,
                      this.sourceIndex,
                      amend
                    );
                    this.dragDataDelete(
                      this.sourceObj.id,
                      this.sourceParentId,
                      this.data,
                      this.sourceIndex,
                      amend
                    );
                    // console.log(this.data);
                  } else {
                    this.data.splice(this.sourceIndex, 1);
                  }
                  return;
                } else if (this.dragDirection == "top") {
                  console.log(theDragMenuEndFather, index, "情况2top");
                  this.sourceObj.parentId = 0;
                  this.data.splice(index, 0, this.sourceObj);
                  var amend = false;

                  if (this.sourceParentId != 0) {
                    //删除被拖拽目标之前的值
                    console.log(
                      this.sourceObj.id,
                      this.sourceParentId,
                      this.data,
                      this.sourceIndex,
                      amend
                    );
                    this.dragDataDelete(
                      this.sourceObj.id,
                      this.sourceParentId,
                      this.data,
                      this.sourceIndex,
                      amend
                    );
                    // console.log(this.data);
                  } else {
                    this.data.splice(this.sourceIndex, 1);
                  }
                  return;
                }
                //  var theDragMenuEndFather = this.getMenuById(record.parentId, this.data);
                // var fatherMenuId = theDragMenuEndFather.id;
                // var fatherMenuname = theDragMenuEndFather.name;
                // if (this.dragDirection == "top") {
                //   console.log(theDragMenuEndFather, index, "情况3top");
                //   var targetIndex = index;
                // } else if (this.dragDirection == "bot") {
                //   console.log(theDragMenuEndFather, index, "情况3bot");
                //   var targetIndex = index + 1;
                // } else {
                //   var fatherMenuId = record.id;
                //   var targetIndex = 0;
                // }
              } else {
                var theDragMenuEndFather = this.getMenuById(record.parentId, this.data);
                var fatherMenuId = theDragMenuEndFather.id;
                var fatherMenuname = theDragMenuEndFather.name;
                if (this.dragDirection == "top") {
                  console.log(theDragMenuEndFather, index, "情况3top");
                  var targetIndex = index;
                } else if (this.dragDirection == "bot") {
                  console.log(theDragMenuEndFather, index, "情况3bot");
                  var targetIndex = index + 1;
                } else {
                  var fatherMenuId = record.id;
                  var targetIndex = 0;
                }
              }

              var isMe = this.sourceObj.id == this.targetObj.id; //是否为自己
              // //console.log(isMe);
              if (!isMe) {
                this.sourceObj.parentId = fatherMenuId;
                // //console.log(fatherMenuId, targetIndex);

                //拖拽目标加入目标
                // if(!record.childrenList ){

                // }
                this.dragData(fatherMenuId, this.data, this.sourceObj, targetIndex);

                var amend =
                  fatherMenuId == this.sourceParentId && this.sourceIndex >= targetIndex;

                if (this.sourceParentId != 0) {
                  //删除被拖拽目标之前的值

                  this.dragDataDelete(
                    this.sourceObj.id,
                    this.sourceParentId,
                    this.data,
                    this.sourceIndex,
                    amend
                  );
                  // console.log(this.data);
                } else {
                  this.data.splice(this.sourceIndex, 1);
                }
              }
            }
          },
        },
      };
    },
    //根据id得到对应菜单
    getMenuById(id, obj) {
      for (var i = 0; i < obj.length; i++) {
        if (obj[i].id == id) {
          return obj[i];
        }
        if (obj[i].childrenList && obj[i].childrenList.length > 0) {
          var result = this.getMenuById(id, obj[i].childrenList);
          if (result) {
            return result;
          }
        }
      }
    },

    //操作数据，拖拽 push
    dragData(parentId, obj, pushData, index) {
      if (obj) {
        return obj.map((item) => {
          if (item.id == parentId) {
            if (item.childrenList) {
              // debugger
              item.childrenList.splice(index, 0, pushData);
              // this.$set(item.childrenList, [item.childrenList.length], pushData);
            }
          } else if (item.childrenList && item.childrenList.length > 0) {
            this.dragData(parentId, item.childrenList, pushData, index);
          }

          return item;
        });
      }
    },
    //操作数据，拖拽 删除
    dragDataDelete(id, parentId, obj, index, amend) {
      // //console.log(id, parentId, obj, index, amend);
      if (obj) {
        return obj.map((item) => {
          if (parentId == 0) {
            // obj.splice(index, 1);
          } else {
            if (item.id == parentId) {
              if (amend) {
                item.childrenList.splice(index + 1, 1);
              } else {
                item.childrenList.splice(index, 1);
              }
            }
            if (item.childrenList && item.childrenList.length > 0) {
              this.dragDataDelete(id, parentId, item.childrenList, index, amend);
            }
          }
          return item;
        });
      }
    },
    //数据新增 ‘isEditName’ 参数
    dataAddIsEditName(obj) {
      // //console.log(id, parentId, obj, index, amend);
      if (obj) {
        return obj.map((item) => {
          this.$set(item, "isEditName", false);
          if (!item.childrenList) {
            this.$set(item, "childrenList", []);
          }
          if (item.childrenList && item.childrenList.length > 0) {
            this.dataAddIsEditName(item.childrenList);
          }
          return item;
        });
      }
    },

    //拖拽提交
    dragSubmit() {
      var dragMenuData = this.dragEndData(this.data);

      console.log(dragMenuData);
      dragMenu(this.site.siteCode, ~~this.site.siteId, dragMenuData).then((res) => {
        this.$message.success("成功");
        this.isDrag = false;
        this.getMenuList("", this);
      });
    },

    //拖拽 提交编辑数据格式
    dragEndData(menuMap, arr) {
      if (!arr) {
        var arr = [];
      }
      for (var i = 0; i < menuMap.length; i++) {
        const menuDrag = {
          id: menuMap[i].id,
          name: menuMap[i].name,
          parentId: menuMap[i].parentId,
          sort: (i + 1) * 100,
        };
        arr.push(menuDrag);
        if (menuMap[i].childrenList && menuMap[i].childrenList.length > 0) {
          this.dragEndData(menuMap[i].childrenList, arr);
        }
      }
      return arr;
    },

    //提升至菜单第一级
    upFristLevel(x) {
      console.log(x);
      this.upFristLevelDelete(x.id, x.parentId, this.data);

      x.parentId = 0;
      this.data.push(x);
      this.dataAddIsEditName(this.data);
      // this.dragDataDelete(x.id, x.parentId, this.data, index, amend)
    },
    //删除提升至菜单第一级 之前的数据
    upFristLevelDelete(id, parentId, obj) {
      if (obj) {
        return obj.map((item) => {
          if (item.id == parentId) {
            item.childrenList.splice(
              item.childrenList.findIndex((item) => item.id == id),
              1
            );
          }
          if (item.childrenList && item.childrenList.length > 0) {
            this.upFristLevelDelete(id, parentId, item.childrenList);
          }

          return item;
        });
      }
    },
  },

  computed: {
    // 提取 标题 传递给子组件
    columnsKeys,
    // 提取 fixed 传递给子组件
    columnsFixed,

    // columns(){
    //   return columnsMenu
    //   },
    ...mapState({
      // 动态主路由
      lang: (state) => state.homeApp.lang,
    }),

    tableLineHeight() {
      switch (this.tableSize) {
        case "default":
          return 63;
        case "small":
          return 47;
        case "middle":
          return 55;
      }
    },
  },
  components: {
    ActionColumns,
    PopForm,
    TableSearch,
    TableSize,
    Detail,
  },
  watch: {
    fullHeight(val) {
      // console.log(val)
      this.fullHeight = val;
    },
    lang(val) {
      // console.log(val);
      //  import(`./columns.js`).then(res=>{
      // this.columns =   require('./columns.js').columnsMenu
      //   console.log( this.columns);
      //  })
    },
  },
};
</script>

<style lang="less">
.table-color-dust-bottom {
  background-image: linear-gradient(
    to bottom,
    #fff 79%,
    #fff 80%,
    #1890ff 81%,
    #1890ff 100%
  ) !important;
}
.table-color-dust-top {
  background-image: linear-gradient(
    to bottom,
    #1890ff 19%,
    #1890ff 20%,
    #fff 21%,
    #fff 100%
  ) !important;
}

.table-color-dust {
  background-color: #1890ff !important;
}
</style>
