<template>
  <van-popover
      placement="bottom-end"
      v-model:show="showPopover"
      theme="dark"
      trigger="click"
      @select="typeSelect"
      :actions="option">
      <template #reference>
        <div class="popoverWrapper">
          <img class="userSystemSetup" src="/public/assets/user.png" alt="">
        <span class="userSystemSetupTXT" type="primary">{{$store.state.user.name}}</span>
        <img class="userSystemSetupimg" src="/public/assets/userbot.png" alt="">
        </div>

      </template>
    </van-popover>
  <van-grid direction="horizontal" :column-num="1">
    <div class="content">
      <div class="topImg">
          <div>
            <p class="typeTxt">“盒条件”关联人工作业单元</p>
            <p class="zw"></p>
          </div>
          <div class="Imgbox">
            <img src="/public/assets/untitled.52.png" alt="">
          </div>
        </div>
      <div class="gotopush">
        <div class="gotopushCon" v-for="i in routers" :key="i.name" v-show="this.shouldShow(i)">
          <div class="gotopushConItem" @click="gotorouter(i.path)">
            <div class="gotopushConItemimg gotopushConItemimgone">
              <i :class="i.query"></i>
            </div>
            <p class="itemExplain">{{ i.meta.title }}</p>
          </div>
        </div>
      </div>
    </div>

    <div v-if="!hearBeatStatus">
      <p class="VersionNumber">PDA {{information.version}}离线模式</p>
      <van-button v-if="!hearBeatStatus" class="VersionNumbertwo" @click="jumpToLogin()">
        <span style="  font-size: 0.33111rem; font-weight: bold;color: white; ">重新登录</span>
      </van-button>
    </div>
    <div v-if="hearBeatStatus">
      <p class="VersionNumber">PDA {{information.version}}</p>
    </div>

  </van-grid>
</template>

<script>
import { getSubSysInfo } from "@/api/system/registerConfig";
import {Image, Grid, GridItem, Toast, NavBar, Icon, Popover, Button, Dialog, Notify} from "vant";
import '/public/assets/iconfont/iconfont.css';
import { mapState } from "vuex";

export default {
  name: "BoxHome",
  components: {
    [Image.name]: Image,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Toast.name]: Toast,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Popover.name]: Popover,
    [ Button.name]:  Button,
    [ Dialog.name]:  Dialog,
  },
  computed: {
    ...mapState("sysConf", ["authCode", "cloudServerAddress"]),
    ...mapState({routers:state=>state.permission.addRoutes})
  },
  data() {
    return {
      option:[
        { text: '系统设置' },
        { text: '注销登录' },
        { text: '离线模式'},
      ],
      timer: null,
      hearBeatStatus: false,
      showPopover:false,
      winSize: {
        windowH: "",
        windowW: "",
      },
      switchOn: {
          show: true
      },
      information: {
        authCode: "",
        //唯一编码
        code: "",
        externalCode: "",
        id: "",
        //ip地址
        ip: null,
        // 系统名称
        name: "",
        //系统类型
        typeCode: 7,
        //产线名
        productLineName: "",
        userId: null,
        //负责人
        userName: "",
        // 版本号
        version: "",
      },
      power:[],
    };
  },
  created() {

    console.log(this.hearBeatStatus,5556)
    console.log(localStorage.getItem("hearBeatStatus"),333)
    this.$nextTick(() => {
      if (localStorage.getItem("hearBeatStatus") == null) {
        this.hearBeatStatus = true
      } else {
        this.hearBeatStatus = localStorage.getItem("hearBeatStatus") === 'true'
      }
    });
    console.log(localStorage.getItem("hearBeatStatus"),333)
  },
  beforeUnmount() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.timer = setInterval(() => {
      this.$nextTick(() => {
        if (localStorage.getItem("hearBeatStatus") == null) {
          this.hearBeatStatus = true
        } else {
          this.hearBeatStatus = localStorage.getItem("hearBeatStatus") === 'true'
        }
      });
      // 定时执行的操作
    }, 6500);
    this.initHeight();
    this.$nativeQRCode.setStatusBarColor("#ededed", "black")
    this.getSubSysInfo();
  },
  methods: {
    // 路由跳转
    gotorouter(val){
      this.$router.push({path:val})
    },
    // 判断是否显示
    shouldShow(val){
      if (this.hearBeatStatus && val.path !== '/off-lineData' && val.path !== '/off-line-package-carton' && val.path !== '/off-line-carton'){
        return true
      }else return !this.hearBeatStatus && (val.path === '/off-lineData' || val.path === '/off-line-package-carton' || val.path === '/off-line-carton');
    },
    // 用户类型选择
    typeSelect(val,index){
      if (index == 0) {
        this.onClickRight()
      }else if (index == 1) {
        this.logout()
      }else  if (index == 2){
        Notify({type: 'warning', message: '切换离线模式中。。', duration: 2000});
        this.option=[]
        this.hearBeatStatus = false
        localStorage.setItem('hearBeatStatus', 'false');
      }
    },
    //重新登录
    jumpToLogin() {
      Dialog.confirm({
        title: "是否重新登录",
        message: "请保证网络连通边侧的情况下再重新登录",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$router.replace("login");
        });
      }).catch(() => {});
    },
    // 注销登录
    logout() {
      Dialog.confirm({
        title: "是否退出当前账户",
        message: "退出后再次使用需重新登录",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            this.$router.replace("login");
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 获取子系统信息
    getSubSysInfo() {
      getSubSysInfo(this.authCode).then((res) => {
        if (res.code == 200) this.information = res.data;
        else this.information = "";
      });
      // this.information.version = config.version
    },
    // 初始化高度
    initHeight() {
      this.$nextTick(() => {
        // 屏幕高度
        this.winSize.windowH = document.documentElement.clientHeight;
        this.winSize.windowW = document.documentElement.clientWidth - 40;
      });
    },
    // 点击右侧按钮
    onClickRight() {
      this.$router.push({name: "setup"});
    },
  },
};
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
:deep(.van-nav-bar__text) {
  font-size: 36px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 500;
  color: #3e3e3e;
}

  .VersionNumbertwo {
    height: 65px;
    line-height: 35px;
    bottom: 50px;
    border-radius: 30px;
    background: linear-gradient(-90deg, rgba(0, 105, 83, 1), rgba(33, 143, 120, 0.6));
    width: 35%;
    text-align: center;
    font-size: 26px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
.imgs_one {
  width: 220px;
  height: 240px;
  margin: 50px 50px;
}



.box {
  margin: auto;
}

.list {
  width: 100%;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
}

.van-grid-item {
  flex-basis: 45% !important;
}

.img_a {
  padding-top: 40px;
  box-sizing: border-box;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  width: 322px;
  height: 221px;
  background-size: cover;
}

.icon-quality, .icon-OA-circulation, .icon-jiebang-fill, .icon-bg-combination {
  font-size: 90px;
}

.icon-baofei, .icon-shiyongchaxun {
  font-size: 80px;
}

.list p {
  font-size: 36px;
  margin-top: 20px;
}
.popoverWrapper{
  display: flex;
  align-items: center;
  margin-left: 550px;
  margin-top: 4%;
}
.userSystemSetup{
  width: 22%;
  margin-right: 3%;
}
.userSystemSetupTXT{
  width: 90px;
  font-size: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: none;
  border: none;
  color: rgba(62, 62, 62, 1);
}
.userSystemSetupimg{
  width: 10%;
  margin-top: 5%;
}

.VersionNumber{
  width: 100%;
  position: fixed;
  bottom: 20px;
  text-align: center;
  font-size: 26px;
}
.content{
    width: 100%;
    height: 600px;
    padding: 25px 20px 0 20px;
}
.topImg{
  width: 100%;
  height: 40%;
  background: linear-gradient(90deg, #54A48E, #1C856B);
  border-radius: 10px;
  box-sizing: border-box;
  padding: 60px 10px;
  display: flex;
}
.typeTxt{
  font-size: 30px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 500;
  color: #FFFFFF;
}
.zw{
    width: 10%;
    height: 5%;
    margin-top: 10%;
    margin-left: 8%;
    border-radius: 15px;
    background-color: #D5B44F;
}
.Imgbox{
    width: 35%;
    margin-left: 4%;
}
.Imgbox img{
    width: 100%;
    margin-top: -30px;
}
.gotopush{
  margin-top: 1%;
  min-height: 200px;
  width: 100%;
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  /* border: 1px solid; */
}
.gotopushCon{
    width: 32.8%;
    margin-top: 3%;
    /*height: 70%;*/
    /* justify-content: space-between; */
    /* border: 1px solid; */
}
.gotopushConItem{
    width: 100%;
    font-size: 20px;
    /* overflow: hidden; */
    /* border: 1px solid; */
    height: 160px;

}

.contTop{
  /* border: 1px solid; */
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}
.gotopushConItemimgone{
  background: linear-gradient(90deg, #73CAB2, #10A568, #26AE9C);
}
.gotopushConItemimg{
    width: 55%;
    height: 70%;
    margin: auto;
    margin-bottom: 5%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.itemExplain{
  font-size: 26px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 400;
  color: #4B4B4B;
  text-align: center;
}
 .icon-zhangbuguanlianguizeguanli{
    font-size: 50px;
 }
 .icon-a-yiweimashuzishang1,.icon-tihuan,.icon-jiebang,.icon-gongchengjiancha{
  font-size: 70px ;
 }
  .icon-jiebang2,.icon-guanli,.icon-fanchang,.icon-chaxun{
    font-size: 60px;
  }
.icon-huanhuo1{
font-size: 1rem;
}
.icon-ziyuan143{
  font-size: .8rem;
}
.icon-jichuguanli{
  font-size: .8rem;
}

</style>
