<template>
  <div id="topDiv">
    <van-nav-bar
      title="关联查询结果"
      left-text=""
      left-arrow
      @click-left="$router.go(-1)"
      class="nav-bar"
    >
      <template #right> ？ </template>
    </van-nav-bar>
  </div>
  
  <div class="box-code-card">
    <p class="box-code-label">盒码</p>
    <p class="box-code-value">ABCD</p>
    <div class="box-code-info">
      <p class="info-item">
        <span class="total-count">扫描时间：</span>
        <span class="info-value">2023-10-15 14:35</span>
      </p>
      <p class="info-item">
        <span class="total-count">关联状态：</span>
        <span class="info-value success">已关联</span>
      </p>
    </div>
  </div>
  
  <div class="related-code-container">
    <p class="related-code-header">
      <span>关联码信息</span>
      <span class="total-count">共{{ data.length }}条</span>
    </p>
    <!-- 循环生成关联码卡片 -->
    <div 
      class="related-code-card" 
      v-for="(item, index) in data" 
      :key="index"
    >
      <p class="code-main">{{ item.qrCode }}</p>
      <!-- 根据type值显示对应的码类型 -->
      <p class="total-count code-type">
        关联{{ getCodeTypeText(item.type) }}
      </p>
      <div class="code-info-row">
        <p class="info-item">
          <span class="total-count">生产时间：</span>
          <span>{{ item.generateTime }}</span>
        </p>
        <p class="info-item">
          <span class="total-count">机台号：</span>
          <span>{{ item.boxBarProductLineDeviceCode }}</span>
        </p>
      </div>
      <div class="code-info-row">
        <p class="info-item">
          <span class="total-count">{{ getQuantityLabel(item.type) }}：</span>
          <span>{{ getQuantityValue(item.type) }}</span>
        </p>
        <p class="info-item">
          <span class="total-count">关联状态：</span>
          <!-- 根据关联状态值动态设置颜色 -->
          <span :style="{ color: getStatusColor(item.status) }">
            {{ getStatusText(item.status) }}
          </span>
        </p>
      </div>
    </div>
  </div>
      <div class="btn-container">
      <van-button plain @click="gousearch()" style="background: #07C160;color: #ffffff;" class="query-btn" type="success">
        <van-icon name="browsing-history-o" />
        查看件码详情
      </van-button>
            <van-button plain @click="gousearch()" class="query-btn query-btns" type="success">
       <van-icon name="revoke" />
        返回扫码
      </van-button>
    </div>
</template>

<script>
import { NavBar,  Icon, } from "vant";

export default {
  name: "RelationQueryResult",
  components: {
    [NavBar.name]: NavBar,
        [Icon.name]: Icon,
  },
  mounted() {
    // this.$nativeQRCode.setStatusBarColor("#006953", "white");
    // ScanOverlay.show('请扫描二维码')
  },
  data() {
    return {
     
      data: [
        {
          qrCode: "TM00123456789",
          type: 20,          // 条码
          status: 10,        // 正常
          generateTime: "2024-08-29 ",
          boxBarProductLineDeviceCode: "BXBSB001",
          boxBarProductLineName: "盒条产线",
          codingDateStr: "2024-08-29",
          BrandId: 1,
        },
        {
          qrCode: "HM987654321098",
          type: 30,          // 盒码
          status: 20,        // 异常
          generateTime: "2024-08-29 ",
          boxBarProductLineDeviceCode: "BXBSB002",
          boxBarProductLineName: "盒条产线",
          codingDateStr: "2024-08-29",
          BrandId: 1,
        },

      ],
    };
  },
  methods: {
    // 根据type值返回对应的码类型文本
    getCodeTypeText(type) {
      switch (type) {
        case 10:
          return "盒码";
        case 20:
          return "条码";
        case 30:
          return "件码";
        default:
          return "未知类型";
      }
    },
    // 根据码类型返回数量标签（盒烟数量/条码数量）
    getQuantityLabel(type) {
      switch (type) {
        case 10:
          return "盒烟数量";
        case 20:
          return "盒烟数量";  // 条码对应盒烟数量
        case 30:
          return "条烟数量";  // 件码对应条码数量
        default:
          return "数量";
      }
    },
    // 根据码类型返回对应的数量值
    getQuantityValue(type) {
      switch (type) {
        case 10:
          return "1盒";       // 盒码默认1盒
        case 20:
          return "10盒";      // 条码对应10盒
        case 30:
          return "50条";      // 件码对应50条
        default:
          return "未知";
      }
    },
    // 根据状态值返回状态文本
    getStatusText(status) {
      switch (status) {
        case 10:
          return "正常";
        case 20:
          return "异常";
        case 30:
          return "未知";
        default:
          return "未定义";
      }
    },
    // 根据状态值返回对应的颜色
    getStatusColor(status) {
      switch (status) {
        case 10:
          return "#07C160";  // 正常-绿色
        case 20:
          return "red";      // 异常-红色
        case 30:
          return "yellow";   // 未知-黄色
        default:
          return "#333";     // 默认黑色
      }
    }
  },
};
</script>

<style scoped>

.nav-bar {
  background-color: rgba(0, 105, 83, 1);
}

:deep(.van-nav-bar__right) {
  font-size: 0.45rem;
  color: #ffffff;
}


.box-code-card {
  width: 90%;
  height: 17%;
  margin: 0 auto;
  margin-top: 0.3rem;
  border-radius: 0.2rem;
  background: #ffffff;
  font-size: 0.4rem;
  padding: 0.3rem;
  box-sizing: border-box;
}

.box-code-label {
  color: #ffffff;
  background: #07c160;
  width: 1.3rem;
  text-align: center;
  border-radius: 0.3rem;
  font-size: 0.35rem;
  margin: 0;
}

.box-code-value {
  margin: 0.3rem 0;
  font-size: 0.45rem;
}

.box-code-info {
  font-size: 0.3rem;
  display: flex;
}


.related-code-container {
  width: 90%;
  height: auto; 
  margin: 0 auto;
  margin-top: 0.5rem;
  font-size: 0.4rem;
}

.related-code-header {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.related-code-card {
  width: 99%;
  height: auto;
  border: 5px solid #22c866;
  border-radius: 0.3rem;
  margin: 0 auto;
  margin-top: 0.3rem;
  box-sizing: border-box;
  padding: 0.3rem 0.2rem;
  background: #ffffff;
}

.code-main {
  font-weight: bold;
  margin: 0;
}

.code-type {
  font-size: 0.35rem;
  margin: 0;
}

.code-info-row {
  display: flex;
  font-size: 0.35rem;
  margin: 0.2rem 0;
}

.info-item {
  width: 50%;
  margin: 0 0 0 0.2rem;
  padding: 0;
}

.info-item:first-child {
  margin-left: 0;
}

.info-value {
  font-size: 0.32rem;
}

.info-value.success {
  color: #07c160;
}

/* 通用样式 */
.total-count {
  color: #979797;
}
.btn-container {
  width: 100%;
  height: 20%;
  margin-top: 0.2rem;
}
.query-btn {
  width: 92%;
  margin: auto;
  display: block;
  border-radius: 0.1rem;
  height: 1.3rem;
  position: fixed;
  bottom: .3rem;
  left: .4rem;
  border: 1px solid #d7d4d8;
  text-align: center;
  line-height: 1.3rem;
  background: #ffffff;
  font-size: .45rem;
}
.query-btns{
    bottom: 1.8rem;
}
</style>