<template>
  <div class="mainContentBox">
    <!-- 基础信息展示 -->
    <div class="contentBody">
      <div class="headerInfo">
        <el-descriptions
          :column="3"
          border
          class="descriptions"
          label-class-name="labelStyle"
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <Postcard />
                </el-icon>
                产品名称
              </div>
            </template>
            {{ infoData.materialName ? infoData.materialName : "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <iphone />
                </el-icon>
                流转卡号
              </div>
            </template>
            {{ infoData.seqNo ? infoData.seqNo : "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <Collection />
                </el-icon>
                物料编号
              </div>
            </template>
            {{ infoData.materialCode ? infoData.materialCode : "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <ScaleToOriginal />
                </el-icon>
                产品规格
              </div>
            </template>
            {{ infoData.materialModel ? infoData.materialModel : "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <CreditCard />
                </el-icon>
                铭牌号
              </div>
            </template>
            {{ infoData.materialName ? infoData.materialName : "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
                是否返工
              </div>
            </template>
            {{
              infoData.isReturn === null ? "-" : infoData.isReturn ? "是" : "否"
            }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <Van />
                </el-icon>
                工单出站
              </div>
            </template>
            {{ infoData.nameplateNo ? infoData.nameplateNo : "-" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <Calendar />
                </el-icon>
                交付日期
              </div>
            </template>
            {{ infoData.planStartEnd ? infoData.planStartEnd : "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div id="tabBox" class="tabBox">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane name="f1">
            <template #label>
              <el-badge
                :type="activeName == 'f1' ? 'warning' : 'primary'"
                :value="tabCountData.traceability"
                >生产履历
              </el-badge>
            </template>
            <Traceability />
          </el-tab-pane>
          <el-tab-pane name="f2">
            <template #label>
              <el-badge
                :type="activeName == 'f2' ? 'warning' : 'primary'"
                :value="tabCountData.materials"
                >已采物料
              </el-badge>
            </template>
            <keep-alive>
              <Materials v-if="activeName == 'f2'" />
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane name="f3">
            <template #label>
              <el-badge
                :type="activeName == 'f3' ? 'warning' : 'primary'"
                :value="tabCountData.record"
                >记录项
              </el-badge>
            </template>
            <keep-alive>
              <template v-if="activeName == 'f3'">
                <Record />
              </template>
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane name="f4">
            <template #label>
              <el-badge
                :type="activeName == 'f4' ? 'warning' : 'primary'"
                :value="tabCountData.checks"
                >点检判定
              </el-badge>
            </template>
            <keep-alive>
              <template v-if="activeName == 'f4'">
                <Check />
              </template>
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane name="f5">
            <template #label>
              <el-badge
                :type="activeName == 'f5' ? 'warning' : 'primary'"
                :value="tabCountData.equit"
                >设备使用
              </el-badge>
            </template>
            <keep-alive>
              <template v-if="activeName == 'f5'">
                <Equit />
              </template>
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane name="f6">
            <template #label>
              <el-badge
                :type="activeName == 'f6' ? 'warning' : 'primary'"
                :value="tabCountData.fault"
                >报故记录
              </el-badge>
            </template>
            <keep-alive>
              <template v-if="activeName == 'f6'">
                <Fault />
              </template>
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane name="f7">
            <template #label>
              <el-badge
                :type="activeName == 'f7' ? 'warning' : 'primary'"
                :value="tabCountData.medias"
                >图片采集
              </el-badge>
            </template>
            <keep-alive>
              <template v-if="activeName == 'f7'">
                <Media />
              </template>
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane name="f8">
            <template #label>
              <el-badge
                :type="activeName == 'f8' ? 'warning' : 'primary'"
                :value="tabCountData.excel"
                >在线表格
              </el-badge>
            </template>
            <keep-alive>
              <template v-if="activeName == 'f8'">
                <Excel />
              </template>
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane name="f9">
            <template #label>
              <el-badge
                :type="activeName == 'f9' ? 'warning' : 'primary'"
                :value="tabCountData.file"
                >工序文件
              </el-badge>
            </template>
            <keep-alive>
              <template v-if="activeName == 'f9'">
                <File />
              </template>
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useProcessStore } from "@/store";
import { getTabCount, getTraceabilityInfo } from "@/api/process/traceability";
import Traceability from "./components/traceability.vue";
const Materials = defineAsyncComponent(
  () => import("./components/materials.vue")
);
const Record = defineAsyncComponent(() => import("./components/record.vue"));
const Check = defineAsyncComponent(() => import("./components/check.vue"));
const Equit = defineAsyncComponent(() => import("./components/equit.vue"));
const Fault = defineAsyncComponent(() => import("./components/fault.vue"));
const Media = defineAsyncComponent(() => import("./components/media.vue"));
const Excel = defineAsyncComponent(() => import("./components/excel.vue"));
const File = defineAsyncComponent(() => import("./components/file.vue"));
const store = useProcessStore();
const router = useRouter();
const activeName = ref("f1");
const handleClick = () => {};
const infoData = ref({});
const tabCountData = ref({});
//获取卡号基础信息
const getInfo = async (seq) => {
  const { data } = await getTraceabilityInfo(
    store.odersData.workOrderCode + "/" + seq
  );
  infoData.value = data;
};
const getTabCountData = async (seq) => {
  const { data } = await getTabCount({
    seqNo: seq,
    workOrderCode: store.odersData.workOrderCode,
  });
  tabCountData.value = data;
};
const route = useRoute();
store.useSeqNo = route.params.id;
onMounted(() => {
  getInfo(store.useSeqNo);
  getTabCountData(store.useSeqNo);
});
</script>

<style lang="scss" scoped>
@import "./style/index.scss";

.mainContentBox {
  padding: 20px 10%;
  padding-top: 0;

  .contentBody {
    padding: 20px;
    background-color: white;
    border-radius: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .headerInfo {
      width: 100%;
      height: 180px;
      margin-bottom: 10px;
    }

    .tabBox {
      height: calc(100% - 240px);
      width: 100%;
    }
  }
}

:deep(.el-tabs__item) {
  height: 60px !important;
}

:deep(.cell-item) {
  font-size: $f24;
  display: flex;
  padding: 10px 0;
}

:deep(.el-icon) {
  margin-right: 5px;
}

:deep(.is-bordered-content) {
  font-size: $f24 !important;
}

:deep(.el-descriptions__cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
