<template>
  <div class="mainContentBox">
    <!-- 基础信息展示 -->
    <div class="contentBody">
      <div class="headerInfo">
        <div class="infobox">
          <div class="hang">
            <div class="item">
              <div class="label">
                <div class="cell-item">
                  <el-icon>
                    <Postcard />
                  </el-icon>
                </div>
                产品名称
              </div>
              <div class="value destext">
                {{ infoData.materialName ? infoData.materialName : "-" }}
              </div>
            </div>
            <div class="item">
              <div class="label">
                <div class="cell-item">
                  <el-icon>
                    <iphone />
                  </el-icon>
                </div>
                流转卡号
              </div>
              <div class="value destext">
                {{ infoData.seqNo ? infoData.seqNo : "-" }}
              </div>
            </div>
            <div class="item">
              <div class="label">
                <div class="cell-item">
                  <el-icon>
                    <Collection />
                  </el-icon>
                </div>
                物料编号
              </div>
              <div class="value destext">
                {{ infoData.materialCode ? infoData.materialCode : "-" }}
              </div>
            </div>
          </div>
          <div class="hang">
            <div class="item">
              <div class="label">
                <div class="cell-item">
                  <el-icon>
                    <ScaleToOriginal />
                  </el-icon>
                </div>
                产品规格
              </div>
              <div class="value destext">
                {{ infoData.materialModel ? infoData.materialModel : "-" }}
              </div>
            </div>
            <div class="item">
              <div class="label">
                <div class="cell-item">
                  <el-icon>
                    <CreditCard />
                  </el-icon>
                </div>
                订单编号
              </div>
              <div class="value destext">
                {{ infoData.orderCode ? infoData.orderCode : "-" }}
              </div>
            </div>
            <div class="item">
              <div class="label">
                <div class="cell-item">
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </div>
                是否返工
              </div>
              <span class="value destext">{{
                infoData.isReturn === null
                  ? "-"
                  : infoData.isReturn
                    ? "是"
                    : "否"
              }}</span>
            </div>
          </div>
          <div class="hang" style="border-bottom: 0px">
            <div class="item">
              <div class="label">
                <div class="cell-item">
                  <el-icon>
                    <Van />
                  </el-icon>
                </div>
                工单出站
              </div>
              <div class="value destext">
                1
              </div>
            </div>
            <div class="item" style="flex: 2">
              <div class="label">
                <div class="cell-item">
                  <el-icon>
                    <Calendar />
                  </el-icon>
                </div>
                交付日期
              </div>
              <span class="value destext">
                {{ infoData.planStartEnd ? infoData.planStartEnd : "-" }}
              </span>
            </div>
          </div>
        </div>
      </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' : 'danger'"
                :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' : 'danger'"
                :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' : 'danger'"
                :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' : 'danger'"
                :value="tabCountData.excel"
                >在线表格
              </el-badge>
            </template>
            <keep-alive>
              <template v-if="activeName == 'f8'">
                <Excel />
              </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";
// import Materials from "./components/materials.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 store = useProcessStore();
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: calc(100vh - 110px);
    display: flex;
    flex-direction: column;

    .headerInfo {
      width: 100%;
      height: 30%;
      margin-bottom: 10px;
      .infobox {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid rgb(239, 241, 247);
        border-bottom: 0px;
        .hang {
          display: flex;
          flex: 1;
          .item {
            flex: 1;
            display: flex;
            border: 1px solid rgb(239, 241, 247);
            border-top: 0px;
            border-right: 0px;
            border-left: 0px;
            .label {
              width: 130px;
              border: 1px solid rgb(239, 241, 247);
              border-top: 0px;
              border-left: 0px;
              border-bottom: 0px;
              background-color: rgb(245, 247, 250);
              display: flex;
              align-items: center;
              font-size: 20px;
              padding: 0 10px;
            }
            .value {
              flex: 1;
              border: 1px solid rgb(239, 241, 247);
              border-top: 0px;
              border-left: 0px;
              border-bottom: 0px;
              display: flex;
              align-items: center;
              font-size: 20px;
              padding: 0 10px;
            }
          }
        }
      }
    }

    .tabBox {
      height: 70%;
      width: 100%;
    }
  }
}

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

:deep(.cell-item) {
  font-size: $f24;
  display: flex;
  padding: 10px 0;
}
: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;
}

.destext {
  width: 20px;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
</style>
