<template>
  <div id="NewdialogTabs">
    <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"
          :SiteNo="SiteNo"
          :tabsType="AllData.editableTabsValue"
          @update-tabs-type="updateTabsType"
          :RefreshName="AllData.RefreshName"
          :key="AllData.RefreshName"
          v-if="AllData.RefreshName == item.name"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="NewdialogTabs">
import { ref, reactive, toRefs, onMounted } from "vue";
import Config from "./DialogConfig";
// 父元素传值
// debugger;
const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  SiteNo: {
    type: String,
  },
  // 当前站点需要展示的且已集成的组件列表
  comIDs: {
    type: Array,
  },
  // 自定义组件,产品化开发人员不建议使用,此配置是给项目的特殊需求预留功能,项目中正常的组件需求可以直接使用comIDs
  customComponents: {
    type: Array,
  },
  // 默认打开tabs的key
  RefName: {
    type: String,
  }
});
// 声明本页面中的变量
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);
};
onMounted(() => {
  // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
  let ComparisonTable = Config.ComparisonTable;
  AllData.editableTabs = [];
  Promise.all(
    ComparisonTable.map(function (element) {
      if (props.comIDs.includes(element.name)) {
        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: calc(100% - 10px);

  .el-tabs--top {
    width: 100%;
    height: 100%;

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

    .el-tabs__header {
      background: #031c33;

      .el-tabs__item {
        color: #93a7ba;
        font-size: 16px;
      }

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

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

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

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