<template>
  <!-- 盒条件-离线基础缓存 -->
  <div id="qualitytesting">
    <!-- 导航条  -->
    <van-nav-bar title="离线基础数据缓存" left-arrow @click-left="onClickLeft" z-index="1" id="topDiv">
    </van-nav-bar>
    <div class="cellAllto" v-if="nobrandFlag">
      <span style="color: red;font-size: 16px;font-weight: bold;margin-left: 5px">数据正在存储中,请耐心等待...</span>
    </div>
    <div class="cellAll">
      <span style="color: red;font-size: 16px;font-weight: bold;margin-left: 5px">本地品规缓存</span>
      <div class="bdr"></div>
      <van-cell title="边侧品规缓存数量" :value="bianbrandCount+'个'"/>
      <div class="bdr"></div>
      <van-cell title="本地品规缓存数量" :value="localbrandCount+'个'"/>
      <van-button class="huancunno" v-if="!hearBeatStatus">刷新本地品规数据</van-button>
      <van-button class="huancun" v-if="hearBeatStatus" :disabled="nobrandFlag" @click="localBrandSet">
        刷新本地品规数据
      </van-button>
    </div>
    <div class="cellAll">
      <span style="color: red;font-size: 16px;font-weight: bold;margin-left: 5px">本地班次缓存</span>
      <div class="bdr"></div>
      <van-cell title="边侧班次缓存数量" :value="shiftDetailCount+'个'"/>
      <div class="bdr"></div>
      <van-cell title="本地班次缓存数量" :value="localshiftDetailCount+'个'"/>
      <van-button class="huancunno" v-if="!hearBeatStatus">刷新本地班次数据</van-button>
      <van-button class="huancun" v-if="hearBeatStatus" :disabled="nobrandFlag" @click="localShiftSet">
        刷新本地班次数据
      </van-button>
    </div>
    <div class="cellAll">
      <span style="color: red;font-size: 16px;font-weight: bold;margin-left: 5px">本地班组缓存</span>
      <div class="bdr"></div>
      <van-cell title="边侧班组缓存数量" :value="classGroupCount+'个'"/>
      <div class="bdr"></div>
      <van-cell title="本地班组缓存数量" :value="localclassGroupCount+'个'"/>
      <van-button class="huancunno" v-if="!hearBeatStatus">刷新本地班组数据</van-button>
      <van-button class="huancun" v-if="hearBeatStatus" :disabled="nobrandFlag" @click="localClassSet">
        刷新本地班组数据
      </van-button>
    </div>
  </div>
</template>

<script>
import {
  Checkbox,
  CheckboxGroup,
  Search,
  Button,
  NavBar,
  Empty,
  Card,
  Cell,
  CellGroup,
  Icon,
  Picker,
  Popup,
  Field,
  Notify,
  DatetimePicker
} from "vant";
import {listBrand} from "@/api/qrcode/device/brand/brand";
import List from '@/components/list/List.vue'
import OpenDataWap from "@/common/nativeJSdk/OperData";
import {getClassGroup, getShiftDetail} from "@/api/qrcode/smoke/exportQrCode";


export default {
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Notify.name]: Notify,
    [Search.name]: Search,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Empty.name]: Empty,
    [Card.name]: Card,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [DatetimePicker.name]: DatetimePicker,
    List
  },
  created() {
    this.$nextTick(() => {
      this.hearBeatStatus = localStorage.getItem("hearBeatStatus") === 'true'
    });
    this.brandDataNum();
    this.getShiftDetail();
    this.getClassGroup();
    this.getBrandNum();
    this.getShiftClassNum();
  },
  data() {
    return {
      timer: null,
      nobrandFlag: false,
      bianbrandData: [],
      shiftDetailData: [],
      classGroupData: [],
      hearBeatStatus: false,
      localbrandCount: 0,
      localshiftDetailCount: 0,
      localclassGroupCount: 0,
      bianbrandCount: 0,
      shiftDetailCount: 0,
      classGroupCount: 0,
      currentDate: new Date(new Date().getFullYear() + ',' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1) + ',' + (new Date().getDate() < 10 ? '0' + (new Date().getDate()) : new Date().getDate())),
      columnsType: 'date',
      listHeight: 0,
    }
  },
  beforeUnmount() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.initHeight()
    this.timer = setInterval(() => {
      this.$nextTick(() => {
        this.hearBeatStatus = localStorage.getItem("hearBeatStatus") === 'true'
      });
      // 定时执行的操作
    }, 3000);
  },
  methods: {
    // 解析对象
    generateResObject(str) {
      let res = null;
      try {
        if (str != null) {
          res = JSON.parse(str);
        }
        return res;
      } catch (e) {
        return res;
      }
    },
    // 品规信息
    brandDataNum() {
      listBrand().then((res) => {
        if (res.rows != null && res.rows.length > 0) {
          this.bianbrandData = res.rows;
          this.bianbrandCount = res.total
        }
      })
    },

    //班次信息
    getShiftDetail() {
      getShiftDetail().then(res => {
        if (res.data.length > 0) {
          this.shiftDetailData = res.data;
          this.shiftDetailCount = res.data.length
        }
      })
    },
    //班组信息
    getClassGroup() {
      getClassGroup().then(res => {
        if (res.data.length > 0) {
          this.classGroupData = res.data;
          this.classGroupCount = res.data.length
        }
      })
    },

    //品规缓存本地
    localBrandSet() {
      this.nobrandFlag = true
      if (this.bianbrandData.length > 0) {
        setTimeout(() => {
          let result = OpenDataWap.pkgbox.insertQrBrand(JSON.stringify(this.bianbrandData));
          let res = this.generateResObject(result);
          if (res != null) {
            if (res.code == 200) {
              Notify({type: "success", message: '缓存同步边侧品规数据成功!'});
              this.getBrandNum()
            } else {
              Notify({type: "danger", message: '缓存同步边侧品规数据失败!'});
            }
          } else {
            Notify({type: "danger", message: '缓存同步边侧品规数据失败!'});
          }
          this.nobrandFlag = false
        }, 700)

      } else {
        Notify({type: "danger", message: '没有查询到边侧品规数据,请检查网络!'});
        this.nobrandFlag = false
      }
    },

    // 班次缓存本地
    localShiftSet() {
      this.nobrandFlag = true
      if (this.shiftDetailData.length > 0) {
        setTimeout(() => {
          // 使用 map 方法添加 type 属性
          const updatedArray = this.shiftDetailData.map(({shiftDetailName, shiftDetailCode, ...rest}) => ({
            ...rest, // 保留其余的属性
            name: shiftDetailName,
            code: shiftDetailCode,
            type: 1 // 添加新属性
          }));
          let result = OpenDataWap.pkgbox.insertShiftDetailClassGroup(JSON.stringify(updatedArray));
          let res = this.generateResObject(result);
          if (res != null) {
            if (res.code == 200) {
              Notify({type: "success", message: '缓存同步边侧班次数据成功!'});
              let type = {"type": 1}
              this.localShiftClassNum(type)
            } else {
              Notify({type: "danger", message: '缓存同步边侧班次数据失败!'});
            }
          } else {
            Notify({type: "danger", message: '缓存同步边侧班次数据失败!'});
          }
          this.nobrandFlag = false
        }, 700)

      } else {
        Notify({type: "danger", message: '没有查询到边侧班次数据,请检查网络!'});
        this.nobrandFlag = false
      }
    },

    // 班组缓存本地
    localClassSet() {
      this.nobrandFlag = true
      if (this.classGroupData.length > 0) {
        setTimeout(() => {
          // 使用 map 方法添加 type 属性
          const updatedArray = this.classGroupData.map(obj => ({
            ...obj, // 保留原有的属性
            type: 2 // 添加新属性
          }));
          let result = OpenDataWap.pkgbox.insertShiftDetailClassGroup(JSON.stringify(updatedArray));
          let res = this.generateResObject(result);
          if (res != null) {
            if (res.code === 200) {
              Notify({type: "success", message: '缓存同步边侧班组数据成功!'});
              let type = {"type": 2}
              this.localShiftClassNum(type)
            } else {
              Notify({type: "danger", message: '缓存同步边侧班组数据失败!'});
            }
          } else {
            Notify({type: "danger", message: '缓存同步边侧班组数据失败!'});
          }
          this.nobrandFlag = false
        }, 700)

      } else {
        Notify({type: "danger", message: '没有查询到边侧班组数据,请检查网络!'});
        this.nobrandFlag = false
      }
    },
    // 获取本地数据条数
    initHeight() {
      this.$nextTick(() => {
        // 屏幕高度
        let windowH = document.documentElement.clientHeight;

        // 顶部内容区域高度
        let topDivH = document.getElementById('topDiv').offsetHeight;
        this.listHeight = windowH - topDivH - 46;
      })
    },
    getBrandNum() {
      let result = OpenDataWap.pkgbox.queryBrandAll();
      let res = this.generateResObject(result);
      if (res !== null && res.length > 0) {
        this.localbrandCount = res.length;
      }
    },
    getShiftClassNum() {
      let result = OpenDataWap.pkgbox.queryShiftClassCount();
      let res = this.generateResObject(result);
      if (res !== null && res.length > 0) {
        for (let i = 0; i < res.length; i++) {
          if (res[i].type === '1') {
            this.localshiftDetailCount = res[i].count;
          } else if (res[i].type === '2') {
            this.localclassGroupCount = res[i].count;
          }
        }
      }
    },
    localShiftClassNum(type) {
      let result = OpenDataWap.pkgbox.queryShiftClassByType(JSON.stringify(type));
      let res = this.generateResObject(result);
      if (res !== null && res.length > 0) {
        if (type.type === 1) {
          this.localshiftDetailCount = res.length;
        } else if (type.type === 2) {
          this.localclassGroupCount = res.length;
        }
      }
    },
    onClickLeft() {
      window.history.go(-1);
    },
  },
  computed: {
    initializationStartTime() {
      let currentDate = new Date();
      // 设置为当年的第一个月
      currentDate.setMonth(0); // 0 表示一月
      // 设置为当月的第一天
      currentDate.setDate(1);
      return currentDate
    },
  },

};
</script>

<style scoped>
.huancun {
  background-color: #04a175;
  height: 50px;
  border-radius: 41px;
  font-size: 25px;
  color: rgb(255, 255, 255);
  margin-top: 20px;
}

:deep(.van-checkbox__label) {
  margin-left: var(--van-checkbox-label-margin);
  color: #000000;
  line-height: 100px;
}

.huancunno {
  background-color: #606760;
  height: 50px;
  border-radius: 41px;
  font-size: 25px;
  color: rgb(255, 255, 255);
  margin-top: 20px;
}

.orderForGoodsSearchItem {
  width: 94.5%;

}

:deep(.van-cell__value) {
  position: relative;
  overflow: hidden;
  color: var(--van-cell-value-color);
  text-align: right;
  vertical-align: middle;
  word-wrap: break-word;
  flex: 2.5;
  /* font-weight: 400 !important; */
  font-size: 23px !important;
}


::v-deep.van-search__field .van-field__left-icon {
  color: #000 !important;
}

[data-v-ef63022a].van-cell ::-webkit-input-placeholder {
  font-size: 25px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: #979797;
  margin-left: 2px;
}

::v-deep.van-cell__right-icon {
  height: var(--van-cell-line-height);
  font-size: var(--van-cell-icon-size);
  line-height: var(--van-cell-line-height);
  margin-top: 20px !important;
  display: flex;
  justify-content: center;
  align-content: center;
}

::v-deep[data-v-ef63022a].van-cell {
  border-radius: 8px;
  margin-top: 10px;
  height: 62px;
  display: flex;
  /* line-height: 62px; */
  flex-direction: row;
  align-items: center;
  padding-left: 24px;
}

.van-search ::-webkit-input-placeholder {
  font-size: 25px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: #979797;
}

.btn {
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 600;
  margin: 60px auto 0px;
  background-color: #04a175;
  height: 80px;
  width: 40%;
  border-radius: 41px;
  font-size: 28px;
  color: rgb(255, 255, 255);
}



::v-deep.dropdown[data-v-f7229668] {
  position: absolute;
  z-index: 999;
  width: 100%;
  background-color: #006953;
}

.searchtop {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  z-index: 1;
}

::v-deep.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: 26px;
  font-weight: 600;
  line-height: var(--van-cell-line-height);
  background: var(--van-cell-background-color);
}

.cellAll {

  margin-left: 2%;
  width: 90%;
  height: 259px;
  background: #FFFFFF;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 33px 20px;
  margin-top: 20px;
  white-space: nowrap;
}

.cellAllto {
  margin-left: 2%;
  width: 90%;
  height: 50px;
  background: #FFFFFF;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 33px 20px;
  margin-top: 20px;
  white-space: nowrap;
}

.bdr {
  width: 100%;
  height: 2px;
  background: #E7E7E7;
}

.one_b {
  border-bottom: 1px solid #999;
  margin-top: 40px;
  font-size: 30px;
  line-height: 30px;
  font-weight: 400;
  color: #919191;
}


.btns {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.fields {
  width: 98% !important;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 1%;
  /*padding: 7% 0;*/
}

.bHeader {
  font-size: 35px;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  font-weight: bold;
}

.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;
}
</style>
