<script>
import PHead from "./head/index.vue";
import PMain from "./main/index.vue";
import DTFproduct from "@/views/dtf-list/index.vue";
import UpdateDialog from "@/views/design/updateDialog.vue";
const { getProductType, setProductType } = require("@/server/utils/store");

export default {
  components: { PHead, PMain, UpdateDialog, DTFproduct },
  data() {
    return {
      user: {},
      factoryType: "CN",
      activeName: getProductType()
    };
  },
  mounted() {
    console.log(18, getProductType());

    this.user = this.$dataStore.get("user");
    if (this.user.factory && this.user.factory.countryCode) {
      this.factoryType = this.user.factory.countryCode;
    }
    // console.log(17, this.user);
    this.$refs.updateDialog.checkUpdate().then(data => {
      // console.log(17, data);

      if (data) {
        // 有新版本更新
        this.$refs.updateDialog.open(data);
      }
    });
  },
  methods: {
    tabClick(tab) {
      console.log(34, tab);

      setProductType(tab.name);
    }
  }
};
</script>

<template>
  <div class="page">
    <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="DTG生产" name="DTG">
        <p-head :user="user" :factoryType="factoryType"/>
        <p-main :factoryType="factoryType"/>
        <update-dialog ref="updateDialog"
      /></el-tab-pane>
      <el-tab-pane label="DTF生产" name="DTF">
        <DTFproduct :user="user" :factoryType="factoryType"></DTFproduct>
      </el-tab-pane>
    </el-tabs>
  </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-bottom: 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>
