<template>
  <ul>
    <li v-for="item in listData" :key="item" @click="changeOpen(item)">
      <img :src="item.imgUrl" alt="">
      <div class="text">{{ item.text }}</div>
    </li>
  </ul>
  <PrpcPopup ref="prpc" :key="pcKey + 'pc'" />
</template>
<script setup>
import { ref, onMounted,nextTick  } from "vue";
import { useRouter, useRoute } from "vue-router";
import PrpcPopup from "../spsHome/components/prpcPopup.vue";
const router = useRouter();
const pcKey = ref(0);
const prpc = ref(null);
const listData = ref([
  {
    text: '勤务报备',
    imgUrl: require("@/assets/home/qwbb.png"),
    type: 'qwbb',
    path: '/yyzx/xfbb/addXfbb'
  },
  {
    text: '人车盘查',
    imgUrl: require("@/assets/home/rcpc.png"),
    type: 'rcpc',
    path: '/yyzx/xfbb/addXfbb'
  },
  {
    text: '巡逻打卡',
    imgUrl: require("@/assets/home/xldk.png"),
    type: 'xldk',
    path: '/patrolList'
  },
  {
    text: '任务中心',
    imgUrl: require("@/assets/home/xldk.png"),
    type: 'rwzx',
    path: '/taskList'
  },
  {
    text: '信息交互',
    imgUrl: require("@/assets/home/zllz.png"),
    type: 'zllz',
    path: '/yyzx/zlzx/zlzxIndex'
  },
  {
    text: '必到点采集',
    imgUrl: require("@/assets/home/bddcj.png"),
    type: 'bddcj',
    path: '/collectPage'
  },
  {
    text: '处警报送',
    imgUrl: require("@/assets/home/dqwz.png"),
    type: 'cjbs',
    path: '/cjbsPage'
  },
  {
    text: '个人信息',
    imgUrl: require("@/assets/home/grxx.png"),
    type: 'grxx',
    path: '/my'
  }
])
const changeOpen = (val) => {
  switch (val.type) {
    case 'qwbb':
    case 'xldk':
    case 'zllz':
    case 'grxx':
    case 'cjbs':
    case 'bddcj':
    case 'rwzx':
    case 'clockIn':
      router.push(val.path)
      break
    case 'rcpc':
      pcKey.value++;
      nextTick(() => {
        prpc.value.handleOpen();
      });
      break;
  }
}
</script>
<style lang="scss" scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
  overflow: auto;

  li {
    width: 48%;
    height: 31.5vh;
    text-align: center;
    padding-top: 80px;
    box-sizing: border-box;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    margin-bottom: 10px;
  }
}
</style>
