<template>
  <div id="NewdialogTabs" class="h100 flex flex-v">
    <div class="dialogTitle">
      <div class="title">{{ title }}</div>
      <div class="closeIcon" @click="closeFun"></div>
    </div>
    <div class="contentBox flex-1">
      <el-tabs
        v-model="AllData.editableTabsValue"
        :stretch="true"
        @tab-click="TabsChange"
      >
        <el-tab-pane
          v-for="item in AllData.editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <component
            :is="item.content"
            :dataID="dataID"
            :dataCode="dataCode"
            :tabsType="AllData.editableTabsValue"
            @update-tabs-type="updateTabsType"
            :RefreshName="AllData.RefreshName"
            :typeName="typeName"
            :key="AllData.RefreshName"
            v-if="AllData.RefreshName == item.name"
            :arrstcode="arrstcode"
            :arrid="arrid"
            :Getproperties="Getproperties"
          ></component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup name="NewdialogTabs">
import { ref, reactive, toRefs, onMounted } from "vue";
const emit = defineEmits(["closeFun"]);
import Config from "./DialogConfig";
// 父元素传值
// debugger;
const props = defineProps({
  // 数据id
  dataID: {
    type: [String, Number],
  },
  dataCode: {
    type: String,
  },
  // 当前站点需要展示的且已集成的组件列表
  comIDs: {
    type: Array,
  },
  // 自定义组件,产品化开发人员不建议使用,此配置是给项目的特殊需求预留功能,项目中正常的组件需求可以直接使用comIDs
  customComponents: {
    type: Array,
  },
  // 默认打开tabs的key
  RefName: {
    type: String,
  },
  typeName: {
    type: String,
  },
  title: {
    type: String,
  },
  arrstcode: {
    type: Array,
  },
  arrid: {
    type: Array,
  },
  Getproperties: {
    type: Object,
  },
  Getmenuarr: {
    type: Array,
  },
});
// 声明本页面中的变量
const AllData = reactive({
  editableTabsValue: "",
  editableTabs: [],
  RefreshName: "",
});
const updateTabsType = (name) => {
  AllData.editableTabsValue = name;
  AllData.RefreshName = name;
};
// tab切换事件
const TabsChange = (tab, event) => {
  AllData.RefreshName = tab.paneName;
  // console.log(tab, AllData.RefreshName);
};
const closeFun = () => {
  emit("closeFun", false);
};
onMounted(() => {
  // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
  let ComparisonTable = Config.ComparisonTable;
  AllData.editableTabs = [];
  Promise.all(
    ComparisonTable.map(function (element) {
      // 动态修改后台返回的组件名称
      props.Getmenuarr.map((item) => {
        if (item.moduleName == element.name) {
          element.title = item.menuName;
          element.show = item.show;
        }
      });

      if (props.comIDs.includes(element.name) && element.show) {
        return element;
      }
    })
  ).then(function (data) {
    data = data.filter((n) => n);
    //赋值其拥有的公共组件
    AllData.editableTabs = AllData.editableTabs.concat(data);
    console.log(AllData.editableTabs, "公共组件");
    //对自定义组件进行插入
    props.customComponents.forEach((element) => {
      if (element.sort && element.sort != "") {
        // 如果有排序,就按照排序顺序插入到editableTabs中
        AllData.editableTabs.splice(element.sort, 0, element);
      } else if (element.sort == 0) {
        // 如果0,就默认放置在数据队列的最前面
        AllData.editableTabs.splice(0, 0, element);
      } else {
        // 如果没有排序,就默认放置在数据队列的最后面
        AllData.editableTabs.push(element);
      }
    });
    if (props.RefName == "" || props.RefName == undefined) {
      // 默认展示第一个
      AllData.editableTabsValue = AllData.editableTabs[0].name;
      AllData.RefreshName = AllData.editableTabs[0].name;
    } else {
      AllData.editableTabsValue = props.RefName;
      AllData.RefreshName = props.RefName;
    }
  });
});
</script>

<style lang="scss">
#NewdialogTabs {
  width: 100%;
  height: 100%;
  color: #fff;
  .contentBox {
    height: 100%;
  }
  .el-tabs--top {
    width: 100%;
    height: 100%;

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__header {
      // background: #031c33;

      .el-tabs__item {
        color: #d5dee7;
        font-size: 13px;
        padding: 0;
        // border-bottom: 2px solid #34333345;
      }

      .is-active {
        color: #00b4ff;
      }

      .el-tabs__active-bar {
        color: #00b4ff;
      }
    }

    .el-tabs__content {
      width: 100%;
      height: calc(100% - 54px);

      .el-tab-pane {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>