<script>
import UpdateDialog from "@/views/design/updateDialog.vue";
import { Loading } from "element-ui";
const {
  getProductType,
  setProductType,
  setUser
} = require("@/server/utils/store");

export default {
  components: { UpdateDialog },
  data() {
    return {
      user: {},
      factoryType: "CN",
      activeName: getProductType(),
      loading: null
    };
  },
  mounted() {
    this.user = this.$dataStore.get("user");
    if (this.user.factory && this.user.factory.countryCode) {
      this.factoryType = this.user.factory.countryCode;
    }
    this.$refs.updateDialog?.checkUpdate().then(data => {
      if (data) {
        // 有新版本更新
        this.$refs.updateDialog?.open(data);
      }
    });
    setUser({ user: this.user, factoryType: this.factoryType });
    const routerName = this.$router.currentRoute.name;
    const routerMap = { DTG: "design-dtg", DTF: "design-dtf" };

    if (routerName !== routerMap[getProductType()]) {
      if (getProductType() === "DTG") {
        this.$router.push({ name: "design-dtg" });
      } else if (getProductType() === "DTF") {
        this.$router.push({ name: "design-dtf" });
      }
    }
  },
  methods: {
    tabClick(tab) {
      const targetName = tab.name === "DTG" ? "design-dtg" : "design-dtf";

      // 如果已经在目标路由，直接返回，不跳转
      if (this.$route.name === targetName) {
        return;
      }
      this.startLoading();

      try {
        setProductType(tab.name);
        if (tab.name === "DTG") {
          this.$router.push({ name: "design-dtg" });
        } else if (tab.name === "DTF") {
          this.$router.push({ name: "design-dtf" });
        }
      } catch (error) {
        console.log(error);
      } finally {
        this.endLoading();
      }
    },
    startLoading() {
      this.loading = Loading.service({
        lock: true,
        text: "拼命加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0,0,0,.7)"
      });
    },

    endLoading() {
      this.loading.close();
    }
  }
};
</script>

<template>
  <div class="page">
    <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="DTG生产" name="DTG">
        <router-view v-if="activeName === 'DTG'"></router-view>
      </el-tab-pane>
      <el-tab-pane label="DTF生产" name="DTF">
        <router-view v-if="activeName === 'DTF'"></router-view>
      </el-tab-pane>
    </el-tabs>
    <update-dialog ref="updateDialog" />
  </div>
</template>

<style scoped lang="less">
.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // border-top: 1px solid #dcdfe6;
}
::v-deep {
  .el-tabs {
    height: 100%;
    border: none;
  }
  .el-tabs__header {
    margin: 0;
    background-color: #c6c6c6;
    // height: 20px;
  }
  .el-tabs__header .el-tabs__item {
    font-size: 12px;
    line-height: 25px;
    height: 25px;
    // border-bottom: none;
  }
  .el-tabs--border-card > .el-tabs__content {
    padding: 0;
    height: 100%;
  }
  .el-tab-pane {
    height: 100%;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    border: none;
    background-color: #243151;
    color: #fff;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: none;
  }
  .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:not(.is-disabled):hover {
    color: #fff;
    // background-color: #5b647c;
  }
}
</style>
