<template>
  <!-- 盒条件-基础管理-离线数据上传 -->
  <div style="background-color: rgb(237, 237, 237);position: relative;">
    <!-- 导航条  -->
    <van-nav-bar class="bar" title="离线关联数据" left-arrow @click-left="onClickLeft" z-index="999" id="topDiv"/>
    <div class="hader">
      <span class="hederspan">关联未上传数量</span>
      <span class="hedernum">{{ offlineQuantity }}</span>
    </div>
    <div class="list" v-for="(item, index) in allArr" key="index">
      <h3 class="mesTitle">未上传数据详情</h3>
      <van-row class="listTab">
        <van-col class="tabTitle" span="5">二维码</van-col>
        <van-col class="tabValue" span="19" style="word-wrap: break-word; word-break: break-all; height: auto; line-height: 1.5;">
          {{ item.parentCode }}
        </van-col>
        <van-col class="tabTitle" span="5">卷烟名称</van-col>
        <van-col class="tabValue" span="7">{{ item.cgtName }}</van-col>
        <van-col class="tabTitle" span="5">二维码类型</van-col>
        <van-col class="tabValue" span="7" style="display: flex; align-items: center;">
          {{ item.type === '1' ? '卷烟条码' : '卷烟件码' }}
          <span style="margin-left: 8px;" class="underline-italic" v-on:click="relationDataUpload(item)">上传</span>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import {Search, Button, NavBar, Tab, Tabs, Popup, Card, Cell, CellGroup, Toast, Col, Row, Notify, Dialog} from "vant";
import OpenDataWap from "@/common/nativeJSdk/OperData";
import {related, relatedBefore} from "@/api/qrcode/relation/qrDiscardCode";
export default {
  components: {
    [Search.name]: Search,
    [Button.name]: Button,
    [Notify.name]: Notify,
    [NavBar.name]: NavBar,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Popup.name]: Popup,
    [Card.name]: Card,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
    [Col.name]: Col,
    [Dialog.Component.name]: Dialog.Component,
    [Row.name]: Row
  },
  data() {
    return {
      timer:null,
      content:"一键上传10条",
      statusUpload:false,
      hearBeatStatus: false,
      offlineQuantity: 0,
      allArr: [],
    }
  },
  beforeUnmount() {
    clearInterval(this.timer)
    this.timer = null
  },
  created() {
    this.$nextTick(() => {
      this.hearBeatStatus = localStorage.getItem("hearBeatStatus")=='true'  ? true : false
    });
    this.init()
  },
  mounted() {
    this.timer = setInterval(() => {
      this.$nextTick(() => {
        this.hearBeatStatus = localStorage.getItem("hearBeatStatus")=='true'  ? true : false
      });
      // 定时执行的操作
    }, 3000);
  },
  methods: {
    // 解析对象
    generateResObject(str) {
      let res = null;
      try {
        res = JSON.parse(str);
        return res;
      } catch (e) {
        return res;
      }
    },
    // 初始化页面数据
    init() {
      let result = OpenDataWap.pkgbox.queryQrCodeInsRelations();
      let res = this.generateResObject(result);
      console.log("res3...", res)
      if (res.length > 0) {
          this.offlineQuantity = res.length
          this.allArr = res
      }else if (res.length == 0) {
        this.offlineQuantity = 0
        this.allArr = []
      }
    },
    // 返回
    onClickLeft() {
      window.history.back(-1);
    },
    // 关联数据上传
    relationDataUpload(item) {
      if (!this.hearBeatStatus) {
        Notify({type: "danger", message: "请检测网络后再将数据上传边侧"});
        return
      }
      var parse = JSON.parse(item.code);
      let data = {
        parentCode: item.parentCode,
        code: parse,
        type: item.type,
        barPieceClassGroupName: item.barPieceClassGroupName === '' ? "" : item.barPieceClassGroupName,
        barPieceProductShiftDetailName: item.barPieceProductShiftDetailName === '' ? "" : item.barPieceProductShiftDetailName,
      }
      this.statusUpload=true;
      relatedBefore(data).then(res => {
        if (res.code == 200 && res.data != null) {
          Dialog.confirm({
            message: '二维码中存在关联数据,提交后会对老关联关系进行解绑,是否提交',
          }).then(() => {
            related(data).then((res) => {
              if (res.code == 200) {
                OpenDataWap.pkgbox.delQrCodeInsByCode(JSON.stringify({"code":data.parentCode}))
                console.log(data)
                this.init();
                Notify({type: 'success', message: '上传成11功'});
              }
            })
          }).catch(() => {
            this.init();
            Notify({type: 'warning', message: '上传取消', duration: 1500});
          });
        } else if (res.code == 200) {
          OpenDataWap.pkgbox.delQrCodeInsByCode(JSON.stringify({"code":data.parentCode}))
          this.init();
          Notify({type: 'success', message: '上传成功'});
        }
      }).catch(() => {
        Notify({type: "danger", message: "上传失败"});
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "/public/assets/css/styles.scss";

.bar {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

body {
  background: rgb(237, 237, 237) !important;
}
.underline-italic {
  text-decoration: underline;
  color: #006953FF;
}
.mesTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.hader {
  margin-left: 20px;
  width: 620px;
  height: 70px;
  display: flex;
  flex: row;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 10px 30px;
  margin-top: 120px;
}

.hederspan {
  font-size: 26px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 500;
  color: #000000;
}

.hedernum {
  font-size: 26px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: #B70505;
}

.list {
  margin-left: 20px;
  width: 620px;
  height: 280px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
}

::v-deep.tabValue[data-v-88edd52e],
.tabTitle[data-v-88edd52e] {
  border: 1px solid #f1f1f1;
  height: 0.9rem;
  line-height: 0.9rem;
  padding-left: 0.13889rem;
  font-family: "SourceHanSansCN-Medium",sans-serif;
  border-bottom: 0.01389rem solid #d8d8d8;
}

.twobtn {
  text-align: center;
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  bottom: 0px;
  background-color: white;
  height: 90px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.qualityRegulationsbtnassociated {
  bottom: 10px;
  background: linear-gradient(-90deg, rgba(0, 105, 83, 1), rgba(33, 143, 120, 0.6));
  width: 30%;
  height: 40px;
  border-radius: 30px;
  color: rgba(255, 255, 255, 1);
  float: right;
  margin-top: 20px;
}

.qualityRegulationsbtnassociatedgrey {
  bottom: 10px;
  background: linear-gradient(-90deg, rgb(110, 119, 117), rgba(127, 134, 133, 0.6));
  width: 30%;
  height: 40px;
  border-radius: 30px;
  color: rgba(255, 255, 255, 1);
  float: right;
  margin-top: 20px;
}



.btnassociated {
  bottom: 10px;
  background: linear-gradient(-90deg, rgba(0, 105, 83, 1), rgba(33, 143, 120, 0.6));
  width: 40%;
  height: 65px;
  line-height: 65px;
  border-radius: 30px;
  color: rgba(255, 255, 255, 1);
  font-size: 26px;
}
</style>