<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">{{formatQrCode(qrCodeH.qrCode)}}</p>
    <div class="box-code-info">
      <p class="info-item">
        <span class="total-count">扫描时间：</span>
        <span>{{ qrCodeH.generateTime }}</span>
      </p>
      <p class="info-item">
        <span class="total-count">关联状态：</span>
        <span :style="{ color: getStatusColor(qrCodeH.status) }">
        {{ getStatusText(qrCodeH.status) }}
      </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">{{ formatQrCode(item.qrCode) }}</p>
      <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>
</template>

<script>
import {Icon, NavBar, Notify,} from "vant";
import {queryQrCodeInfo} from "@/api/qrcode/scanCode/scanCode";
import {getStringByTwo} from "@/utils/transition";
import ScanOverlay from "@/components/overlay/scanOverlay/ScanOverlay";

export default {
  name: "RelationQueryResult",
  components: {
    [NavBar.name]: NavBar,
        [Icon.name]: Icon,
  },
  mounted() {
    this.$nativeQRCode.setCallBackFun((res) => {
      let qrCode = getStringByTwo(res)
      this.gousearch(qrCode);
    });
    ScanOverlay.show('请扫描二维码')
  },
  data() {
    return {
      qrCodeH:{},
      data: [],
    };
  },
  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";     // 默认黑色
      }
    },
    gousearch(qrCode){
      if(qrCode!=null&&(qrCode.substring(qrCode.indexOf("AC")+2,qrCode.indexOf("AC")+4)!=10)){
        this.$message.warning('请扫盒码');
        return;
      }
      const query = { qrCode: qrCode};
      queryQrCodeInfo(query).then(response => {
        if (response.code === 200) {
          this.qrCodeH = response.data.filter(item => item.type === 10)[0] || {};
          const resData = response.data.filter(item => item.type !== 10);
          this.data = resData;
        } else {
          Notify({ type: 'danger', message: response.msg || '查询失败' });
        }
      }).catch(error => {
        console.error("查询接口异常：", error);
        Notify({type: 'danger', message: '网络异常或服务错误'});
      });
    },
    formatQrCode(qrCode) {
      // 先判断是否为有效字符串
      if (!qrCode || typeof qrCode !== 'string') {
        return qrCode || '';
      }
      // 如果长度超过35位，截取最后10位并拼接...
      if (qrCode.length > 35) {
        return '...' + qrCode.slice(-25);
      }
      // 否则返回原字符串
      return qrCode;
    }
  },
};
</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>