<template style="height: 100%">
  <!-- 盒条件-查询 -->
  <div id="topDiv" style="min-height: 100%;background-color: #ededed">

    <van-nav-bar
        :title="$route.meta.name"
        left-text=""
        left-arrow
        @click-left="$router.go(-1)"
        style="background-color: rgba(0, 105, 83, 1)"
    >
      <template #right>
        {{ $store.state.user.name }}
      </template>
    </van-nav-bar>
    <van-cell-group v-if="pieceShow == true"  title="条件关联信息">
      <van-cell size="large" style="height: 80px"  title="件烟码" class="vancell" ><span style="display: block;line-height: 15px;">{{qrCodeInformation.qrCodeIns.qrCode}}</span></van-cell>
      <van-cell size="large"  title="子系统名称" :value="qrCodeInformation.qrCodeIns.barPieceSysChildName"></van-cell>
      <van-cell size="large"  title="车间" :value="qrCodeInformation.qrCodeIns.barPieceWorkshopName"></van-cell>
      <van-cell size="large"  title="生产设备名称" :value="qrCodeInformation.qrCodeIns.barPieceProductLineDeviceName"></van-cell>
      <van-cell size="large"  title="关联包装机" :value="boxBarProductLineDeviceName"></van-cell>
      <van-cell size="large"  title="班组" :value="qrCodeInformation.qrCodeIns.barPieceClassGroupName"></van-cell>
      <van-cell size="large"  title="班次" :value="qrCodeInformation.qrCodeIns.barPieceProductShiftDetailName"></van-cell>
      <van-cell size="large"  title="批次号" :value="qrCodeInformation.qrCodeIns.cTaskId"></van-cell>
      <van-cell size="large"  title="黑户状态" v-if="qrCodeInformation.qrCodeIns.unregistered == 5">
        <span style="color: red;">黑户</span>
      </van-cell>
      <van-cell size="large"  title="黑户数量" v-if="qrCodeInformation.qrCodeIns.unregistered == 5">
        <span>{{ unregisteredNum }}个</span>
      </van-cell>
      <van-cell size="large"  title="卷烟状态">
        <span v-if="qrCodeInformation.qrCodeIns.status == 10" style="color: #ffc400">行业发码</span>
        <span v-if="qrCodeInformation.qrCodeIns.status == 20" style="color: red;">关联异常</span>
        <span v-if="qrCodeInformation.qrCodeIns.status == 40" style="color: springgreen">成品下线</span>
        <span v-if="qrCodeInformation.qrCodeIns.status == 60" style="color: #1B856F">工业出库</span>
      </van-cell>
      <van-cell size="large"  title="操作工" :value="qrCodeInformation.qrCodeIns.barPieceUserName"></van-cell>
      <van-cell size="large"  title="卷烟名称" :value="qrCodeInformation.qrCodeIns.brandName"></van-cell>

      <van-cell size="large"  title="上报状态">
        <span v-if="qrCodeInformation.qrCodeIns.uploadStatus == 0">未上报</span>
        <span v-if="qrCodeInformation.qrCodeIns.uploadStatus == 1">上报中</span>
        <span v-if="qrCodeInformation.qrCodeIns.uploadStatus == 2">上报成功</span>
        <span v-if="qrCodeInformation.qrCodeIns.uploadStatus == 3" style="color: red;text-decoration: underline;" @click="getUploadTaskDetailByQrCode(qrCodeInformation.qrCodeIns.qrCode)">上报失败</span>
        <span v-if="qrCodeInformationP.uploadStatus == 4">撤销中</span>
        <span v-if="qrCodeInformationP.uploadStatus == 5">替换中</span>
      </van-cell>
      <van-cell size="large"  title="条件关联时间" :value="qrCodeInformation.qrCodeIns.relationTime"></van-cell>
      <van-cell size="large" title="行业侧状态">
        <van-button type="primary" @click="getQrCodeUploadTaskByCode" class="custom-btn">查看状态</van-button>
      </van-cell>
      <van-cell size="large"  title="卷烟批次号" value=""></van-cell>
    </van-cell-group>

    <van-cell-group v-if="boxShow == true"  title="盒条关联信息">
      <van-cell v-if="!barShow" size="large" class="vancell"  title="盒烟码"><span>{{qrCodeInformation.qrCodeIns.qrCode}}</span></van-cell>
      <van-cell size="large"  title="条烟码" class="vancell" v-if="qrCodeInformation.qrCodeIns.type==10"><span style="display: block;line-height: 15px;">{{qrCodeInformation.qrCodeIns.parentCode }}</span>
      </van-cell><van-cell size="large"  title="件烟码" class="vancell" v-if="qrCodeInformation.qrCodeIns.type==10"><span style="display: block;line-height: 15px;">{{barCode}}</span></van-cell>
      <van-cell size="large"  title="条烟码" class="vancell" v-if="qrCodeInformation.qrCodeIns.type==20"><span style="display: block;line-height: 15px;">{{qrCodeInformation.qrCodeIns.qrCode
}}</span></van-cell>
      <van-cell size="large"  title="子系统名称" :value="qrCodeInformation.qrCodeIns.boxBarSysChildName"></van-cell>
      <van-cell size="large"  title="车间" :value="qrCodeInformation.qrCodeIns.boxBarWorkshopName"></van-cell>
      <van-cell size="large"  title="生产设备名称" :value="qrCodeInformation.qrCodeIns.boxBarProductLineDeviceName"></van-cell>
      <van-cell size="large"  title="班组" :value="qrCodeInformation.qrCodeIns.boxBarClassGroupName"></van-cell>
      <van-cell size="large"  title="班次" :value="qrCodeInformation.qrCodeIns.boxBarProductShiftDetailName"></van-cell>
      <van-cell size="large"  title="批次号" :value="qrCodeInformation.qrCodeIns.cTaskId"></van-cell>
      <van-cell size="large"  title="黑户状态" v-if="qrCodeInformation.qrCodeIns.unregistered == 5">
        <span style="color: red;">黑户</span>
      </van-cell>
      <van-cell size="large"  title="操作工" :value="qrCodeInformation.qrCodeIns.boxBarUserName"></van-cell>
      <van-cell size="large"  title="卷烟名称" :value="qrCodeInformation.qrCodeIns.brandName"></van-cell>

      <van-cell size="large"  title="卷烟状态">
        <span v-if="qrCodeInformation.qrCodeIns.status == 10" style="color: #ffc400">行业发码</span>
        <span v-if="qrCodeInformation.qrCodeIns.status == 20 && qrCodeInformation.qrCodeIns.type==10" style="color: red">关联异常</span>
        <span v-if="qrCodeInformation.qrCodeIns.status == 20 && qrCodeInformation.qrCodeIns.type==20" style="color: red;">关联异常</span>
        <span v-if="qrCodeInformation.qrCodeIns.status == 40" style="color: springgreen">成品下线</span>
        <span v-if="qrCodeInformation.qrCodeIns.status == 60" style="color: #1B856F">工业出库</span>
      </van-cell>
      <van-cell size="large"  title="盒条关联时间" :value="qrCodeInformation.qrCodeIns.generateTime"></van-cell>
      <van-cell size="large"  title="卷烟批次号" value=""></van-cell>
    </van-cell-group>

    <van-cell-group v-if="barShow == true"  title="条件关联信息">
      <van-cell size="large"  title="件烟码" class="vancell" ><span style="display: block;line-height: 13px;">{{qrCodeInformation.qrCodeIns.parentCode}}</span></van-cell>
      <van-cell size="large"  title="子系统名称" :value="qrCodeInformation.qrCodeIns.barPieceSysChildName"></van-cell>
      <van-cell size="large"  title="车间" :value="qrCodeInformation.qrCodeIns.barPieceWorkshopName"></van-cell>
      <van-cell size="large"  title="生产设备名称" :value="qrCodeInformation.qrCodeIns.barPieceProductLineDeviceName"></van-cell>
      <van-cell size="large"  title="班组" :value="qrCodeInformation.qrCodeIns.barPieceClassGroupName"></van-cell>
      <van-cell size="large"  title="班次" :value="qrCodeInformation.qrCodeIns.barPieceProductShiftDetailName"></van-cell>
      <van-cell size="large"  title="批次号" :value="qrCodeInformation.qrCodeIns.cTaskId"></van-cell>
      <van-cell size="large"  title="操作工" :value="qrCodeInformation.qrCodeIns.barPieceUserName"></van-cell>
      <van-cell size="large"  title="卷烟名称" :value="qrCodeInformation.qrCodeIns.brandName" v-show="qrCodeInformation.qrCodeIns.parentCode"></van-cell>

      <van-cell size="large"  title="卷烟状态">
        <span v-if="qrCodeInformationP.status == 10" style="color: #ffc400">行业发码</span>
        <span v-if="qrCodeInformationP.status == 20" style="color: red">关联异常</span>
        <span v-if="qrCodeInformationP.status == 40" style="color: springgreen">成品下线</span>
        <span v-if="qrCodeInformationP.status == 60" style="color: #1B856F">工业出库</span>
      </van-cell>
      <van-cell size="large"  title="上报状态">
        <span v-if="qrCodeInformationP.uploadStatus == 0">未上报</span>
        <span v-if="qrCodeInformationP.uploadStatus == 1">上报中</span>
        <span v-if="qrCodeInformationP.uploadStatus == 2">上报成功</span>
        <span v-if="qrCodeInformationP.uploadStatus == 3" style="color: red;text-decoration: underline;" @click="getUploadTaskDetailByQrCode(qrCodeInformationP.qrCode)">上报失败</span>
        <span v-if="qrCodeInformationP.uploadStatus == 4">撤销中</span>
        <span v-if="qrCodeInformationP.uploadStatus == 5">替换中</span>
      </van-cell>
      <van-cell size="large"  title="黑户状态" v-if="qrCodeInformation.qrCodeIns.unregistered == 5">
        <span style="color: red;">黑户</span>
      </van-cell>
      <van-cell size="large"  title="条件关联时间" :value="qrCodeInformationP.relationTime"></van-cell>
      <van-cell size="large"  title="卷烟批次号" value=""></van-cell>
    </van-cell-group>

    <van-popup title="重码A件烟" v-model:show="openAPiece" round position="center" style="width: 90%;height: 50%">
      <div class="popup-header">
        <span>{{ popupTitle }}</span>
      </div>
      <van-row>
        <van-form ref="form">
          <van-cell-group>
            <van-cell  v-for="(item, index) in aPieceList" :key="index" class="celldd">
              <div >
                <span><span>{{ index + 1 }}.</span>{{ item }}</span>
              </div>
            </van-cell>
            <div v-if="aPieceList.length<=0"  class="empty-message">
              <span>{{aPieceMsg}}</span>
            </div>
          </van-cell-group>
        </van-form>
      </van-row>
    </van-popup>

    <van-popup title="上报失败原因" v-model:show="error" round position="center" style="width: 90%;height: 50%">
      <div class="popup-header">
        <span>上报失败原因</span>
      </div>
      <van-cell-group>
        <van-cell v-for="(item, index) in errorDesc" :key="index" class="celldd" style="height: 90px;">

          <span>{{ index + 1 }}.</span>
          <span>{{ item.codeTid }}</span>
          <span>{{ item.message }}</span>
          <span>,原绑定件二维码：{{ item.prePieceCodeTid }}</span>

        </van-cell>
        <div v-if="errorDesc.length <= 0"  class="empty-message">
          <span>{{errorDescMsg}}</span>
        </div>
      </van-cell-group>
    </van-popup>
  </div>

</template>

<script>
import {getQrcodeInfoByCode, getQrcodeInsByCode} from "@/api/qrcode/relation/qrcodeIns";
import {Cell, CellGroup, Loading, NavBar, Notify, Overlay, Popup, Tab, Tabs} from "vant";
import ScanOverlay from "@/components/overlay/scanOverlay/ScanOverlay";
import {QrCodeUtil} from "@/api/qrcode/device/brand/brand";
import {getStringByTwo} from "@/utils/transition";
import {getAPiece} from "@/api/qrcode/relation/qrDiscardCode";
import {getUploadTaskDetailByQrCode} from "@/api/qrcode/upload/uploadTaskDetail";
import {getQrCodeUploadTaskByCode} from "@/api/qrcode/oneCode";
import {decryptAES} from "@/utils/cryptoJS ";
import JSON5 from "json5";

export default {
  name: "informationQuery",
  components: {
    [NavBar.name]: NavBar,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Overlay.name]: Overlay,
    [Loading.name]: Loading,
    [Popup.name]: Popup,
  },
  data() {
    return {
      // 烟码类型
      qrCodeTypeName:'烟码',
      parentName:'盒烟码',
      qrCodeTypes:{
        '10': "盒烟码",
        '20': "条烟码",
        '30': "件烟码"
      },
      qrCodeInformation: {
        productionLine:{},
        qrBrand:{},
        qrCodeIns:{},
        sysDept:{}
      },
      //扫条时展示件烟码信息
      barCode:"",
      qrCodeInformationP:{},
      pieceShow:false,
      barShow:false,
      boxShow:false,
      boxBarProductLineDeviceName:"",
      pkgNum:"",
      openAPiece:false,
      aPieceList:[],
      popupTitle: '重码A件烟',
      aPieceMsg:'暂未查询到重码信息！！',
      error:false,
      errorDesc:[],
      errorDescMsg:'暂未查询到上报失败原因！！',
      // 黑户数量
      unregisteredNum: 0,
    }
  },
  mounted() {
    this.$nativeQRCode.setCallBackFun((res) => {
      let qrCode = getStringByTwo(res)
      this.onScanQrCode(qrCode);
    });
    this.$nativeQRCode.setStatusBarColor("#006953", "white");
    ScanOverlay.show('请扫描二维码')
    // this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC20150710025V12GTGRVRWVWMELBCDVY020")
    // this.onScanQrCode("HTTPS://T2DC.CN/99.1000.1/AC30150752037000169010280752062202410140016460168A00296NUANE5NSCAKMKIMC36D3P251")
    // this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC1015070002RPVY1IVSMGQTIJDCCOSP039")
    // this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC1021224002RBLRUA3JZOQOSSAE0KV0F")

  },
  computed:{
    // 显示数据
    parentName(){
      if ( this.qrCodeInformation.qrCodeIns.type == '10'){
        return "所属条码";
      }else if (this.qrCodeInformation.qrCodeIns.type == '20'){
        return "所属件码"
      }
    }
  },
  methods: {
    // 时间格式化
    formatDate(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
      // 校验时间戳有效性
      if (isNaN(Number(timestamp)) || timestamp < 0) {
        return '--';
      }

      // 创建 Date 对象
      const date = new Date(timestamp);

      // 定义格式化映射
      const formatMap = {
        'YYYY': date.getFullYear(),
        'YY': String(date.getFullYear()).slice(-2),
        'MM': String(date.getMonth() + 1).padStart(2, '0'), // 月份补零（0→1月）
        'M': date.getMonth() + 1, // 不补零
        'DD': String(date.getDate()).padStart(2, '0'), // 日期补零
        'D': date.getDate(), // 不补零
        'HH': String(date.getHours()).padStart(2, '0'), // 24小时制（补零）
        'H': date.getHours(), // 24小时制（不补零）
        'hh': String(date.getHours() % 12 || 12).padStart(2, '0'), // 12小时制（补零）
        'h': date.getHours() % 12 || 12, // 12小时制（不补零）
        'mm': String(date.getMinutes()).padStart(2, '0'), // 分钟补零
        'm': date.getMinutes(), // 分钟不补零
        'ss': String(date.getSeconds()).padStart(2, '0'), // 秒补零
        's': date.getSeconds(), // 秒不补零
        'SSS': String(date.getMilliseconds()).padStart(3, '0'), // 毫秒补零
        'S': date.getMilliseconds(), // 毫秒不补零
        'a': date.getHours() < 12 ? 'AM' : 'PM', // 上/下午（英文）
        'A': date.getHours() < 12 ? '上午' : '下午' // 上/下午（中文）
      };

      // 替换格式字符串中的占位符
      return format.replace(/YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|SSS|S|a|A/g, (match) => {
        return formatMap[match] !== undefined ? formatMap[match] : match;
      });
    },
    // 获取上报任务详情
    getQrCodeUploadTaskByCode(){
      getQrCodeUploadTaskByCode({"qrCode":this.qrCodeInformation.qrCodeIns.qrCode}).then(r=>{
        if(r.code === 200){
          Notify({type: 'success', message: r.msg, duration: 2500});
        }
      })
    },
    // 获取二维码信息
    onScanQrCode(qrcode) {
      // 再次扫描先清空，防止下一次扫描时出现缓存
      this.qrCodeInformation = {
        productionLine:{},
        qrBrand:{},
        qrCodeIns:{},
        sysDept:{}
      };
      this.qrCodeInformationP = {};
      //判断条烟的盒条关联关系是否完整
      QrCodeUtil({"qrcode": qrcode}).then(r => {
        if (r.data.cgtCode == null){
          Notify({type: 'warning', message: '请扫描正确烟码', duration: 1500});
        }else {
          this.pkgNum=r.data.pkgNum
          // 进入页面首次扫码
          getQrcodeInfoByCode({qrcode}).then(res => {
            if (res.code == 200){
              this.qrCodeInformation = res.data;
              if (this.qrCodeInformation.qrCodeIns.type == "10"){
                this.barCode = "";
                //展示件烟码
                let pCode = res.data.qrCodeIns.parentCode;
                if (pCode !=null && pCode != ""){
                  getQrcodeInsByCode({"qrcode":pCode}).then(r=>{
                    this.barCode = r.data.parentCode
                  })
                }
                this.pieceShow =false;
                this.barShow =false;
                this.boxShow =true;
              }else if (this.qrCodeInformation.qrCodeIns.type == "20"){
                let pCode = res.data.qrCodeIns.parentCode;
                if (pCode !=null && pCode != ""){
                  getQrcodeInsByCode({"qrcode":pCode}).then(r=>{
                    this.qrCodeInformationP = r.data
                  })
                }
                this.pieceShow =false;
                this.barShow =true;
                this.boxShow =true;
              }else if (this.qrCodeInformation.qrCodeIns.type == "30"){
                this.pieceShow =true;
                this.barShow =false;
                this.boxShow =false;
                let uniqueValues = [...new Set( res.data.qrCodeIns.childrenList.map(item => item.boxBarProductLineDeviceName))];
                this. boxBarProductLineDeviceName = uniqueValues.join(',');
                this.unregisteredNum = res.data.qrCodeIns.childrenList.filter(item => item.unregistered === 5).length
              }
            }
          })
        }
      })
    },
    // 激活
    getAPiece(qrCode){
      getAPiece(qrCode).then(res=>{
        this.aPieceList = res.data.aPiece
        this.openAPiece = true
      })
    },
    // 获取上报详情
    getUploadTaskDetailByQrCode(qrCode){
      let boxCode = {"boxCode":qrCode}
      getUploadTaskDetailByQrCode(boxCode).then(res=>{
        if (res.code == 200 && res.data){
          this.error = true
          this.errorDesc = JSON.parse(res.data[0].errorDesc)
        }
      })
    }
  }


}
</script>

<style lang="scss" scoped>
.custom-btn {
  /* 自定义按钮样式 */
  color: #006953;
}
:deep(.van-cell-group){
  width: 660px;
  margin: auto;
  border-radius: 15px;
  background: none !important;
}
.empty-message {
  text-align: center;
  margin-top: 20px;
  font-size: 26px;
}
.popup-header {
  padding: 16px;
  font-size: 30px;
  font-weight: bold;
}
.celldd{
  display: flex;
  flex-direction: row;
  align-items: center;
}
:deep(.van-cell__value span){
  line-height: 25px;
}
:deep(.van-cell__title){

  line-height: 120px;
  max-width: 150px;

  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-size: 25px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  flex: 1;
}
:deep(.van-cell){
  height: 104px;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 500;
  color: #000000;
  border-radius: 15px;
  margin-bottom: 20px;
  align-items: center;
}
:deep(.one .van-cell__title){
  flex: .3;
}
:deep(.one .van-cell__value){
  line-height: 30px;
  height: 67px;
}

:deep(.tree .van-cell__title){
  flex: .3;
}
:deep(.tree .van-cell__value){
  line-height: 30px;
}
:deep(.van-nav-bar__right){
    font-size: 32px;
    font-family: Source Han Sans CN,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
  }
:deep(.van-cell-group__title){
  font-size: 30px;
  line-height: 50px;
  padding-left: 30px;
}
.vancell{
  height: 120px;
  .van-cell__value {
    min-width: 70%;

  }
}
:deep(.van-cell__value){
  flex: 3;
  overflow-x: visible !important;
  overflow-y: visible !important;
  width: 250px !important;
}
</style>
