<template>
  <div class="" @click="showThemeSetting = false">
    <div class="new_leaderTop">
      <div class="new_welcome">
        <div class="userName_box">
          <div class="wd">
            {{ weatherInfo.typeName }} {{ weatherInfo.minTemp }}℃-{{
              weatherInfo.maxTemp
            }}℃ {{ weatherInfo.wind }}风 {{ weatherInfo.power }} 级
          </div>
          <img class="face" src="../../assets/images/leader/face@2x.png" />
          <span class="tq_box">欢迎您&ensp;{{ userInfo.userName }}</span>
        </div>
        <van-popover v-model:show="showThemeSetting" :actions="actions" :theme="defaultThemeQp" :offset="[16, -25]"
          placement="bottom-end" @select="onSelectSeting" :teleport="isbody">
          <template #reference>
            <van-icon name="weapp-nav" color="#fff" size="22px" @click.stop="showThemeSetting = true" />
          </template>
        </van-popover>
      </div>
    </div>
    <div class="center_function_box">
      <div class="f_item" v-for="item in home.functionList" :key="item" @click="onRouter(item.path)">
        <img :src="item.imgUrl" alt="" />
        <div>{{ item.name }}</div>
      </div>
    </div>
    <div style="height: 3vw; background: #eff0f5"></div>
    <div style="padding: 3vw" @click="onClickLdjsc">
      <div class="ldjsc_box">
        <div class="ldjsc_detail">
          <span class="ldjsc_title">领导驾驶舱</span>
          <span class="ldjsc_hint">点击进入领导驾驶舱看板</span>
        </div>
        <div class="ckgd">查看更多</div>
      </div>
    </div>
    <div style="height: 3vw; background: #eff0f5"></div>
    <div class="zszh_box_box">
      <div class="zszh">掌上指挥</div>
      <!-- <div class="zszh_box">
        <div
          class="zszh_box_item"
          style="
            background: linear-gradient(90deg, #fff9f1 0%, #f9f1e4 100%);
            color: #783000;
          "
          @click="onCLickFqzl"
        >
          <van-icon
            :name="require('../../assets/images/new/cswdzl.png')"
            size="11vw"
            badge="+"
          ></van-icon>
          <div class="zszh_title">新增指令</div>
        </div>
        <div
          class="zszh_box_item"
          style="
            background: linear-gradient(90deg, #fff9f1 0%, #f9f1e4 100%);
            color: #783000;
          "
          @click="onCLickZlLb"
        >
          <van-icon
            :name="require('../../assets/images/new/cswdzl.png')"
            size="11vw"
            :badge="myzlCount"
          ></van-icon>
          <div class="zszh_title">我发起的指令</div>
        </div>
        <div
          class="zszh_box_item"
          style="
            background: linear-gradient(90deg, #f6fafd 0%, #e8f0fc 100%);
            color: #163678;
          "
          @click="onCLickYwcldzl"
        >
          <van-icon
            :name="require('../../assets/images/new/wcldzl.png')"
            size="11vw"
            :badge="ywclzlCount"
          ></van-icon>
          <div class="zszh_title">由我处理指令</div>
        </div>
        <div
          class="zszh_box_item"
          style="
            background: linear-gradient(90deg, #f6fafd 0%, #e8fcfa 100%);
            color: #397361;
          "
        >
          <van-icon
            :name="require('../../assets/images/new/wfsdzl.png')"
            size="11vw"
            :badge="cswdzlCount"
          ></van-icon>
          <div class="zszh_title">抄送我的指令</div>
        </div>
      </div> -->
      <div class="zszh_box">
        <div class="zszh_box_item" v-for="item in home.totalLit" :key="item"
          :style="{ background: item.bg, color: item.colors }" @click="onCLickSelect(item.url)">
          <van-icon :name="item.icons" size="11vw" :badge="item.badges"></van-icon>
          <div class="zszh_title">{{ item.text }}</div>
        </div>
      </div>
    </div>
    <van-dialog :show="showUserChangePicker" title="选择角色" show-cancel-button @confirm="onConfirm"
      @cancel="showUserChangePicker = false" confirmButtonColor="#3e6ee8">
      <van-radio-group v-model="isActive">
        <van-radio v-for="item in radioList" :key="item.id" :name="item.id">{{
          item.homename
        }}</van-radio>
      </van-radio-group>
    </van-dialog>
    <!-- 盘人 -->
    <checkedPeople ref="peo" :key="zdgzKey + 'pr'" />
    <!-- 盘车 -->
    <checkedCar ref="car" :key="zdgzKey + 'pc'" />

    <PcModel ref="dhcr" :key="zdgzKey + 'dhcr'"></PcModel>
    <!-- 底部tas -->
    <div style="height: 11.8666vw"></div>
    <BottomTabs type="sy" />
  </div>
</template>
<script setup>
import BottomTabs from "../../components/bottomTabs.vue";
import { getUserSelectPage } from "../../api/gxHomeApi.js";
import { dateFormat, setUserHome, getWeatherData } from "../../utils/tools.js";
import checkedCar from "../../pages/spsHome/components/checkCar.vue";
import checkedPeople from "../../pages/spsHome/components/checkPeople.vue";
import PcModel from "../../components/pcModel.vue";
import { getHomejqtj } from "../../api/jqxx.js";
import { getZdRyCount } from "../../api/zdry.js";
import { ref, onMounted, onUnmounted, onActivated, reactive } from "vue";
import { getMyTaskList, getMyTaskTotal, upGrzt } from "../../api/rwzx.js";
import { getMyZlList } from "../../api/zlzx.js";
import router from "../../router";
import { onBeforeRouteLeave } from "vue-router";
const isActive = ref(6); //用户选中的身份
const radioList = ref([]); //用户身份数据
const showUserChangePicker = ref(false); //用户换身份弹窗
const showThemeSetting = ref(false); //是否显示设置主题模板
const defaultThemeQp = ref("light"); //默认的右侧气泡框主题
const isbody = ref("body");
const weatherInfo = ref({
  maxTemperature: 24,
  minTemperature: 14,
  type: "多云",
}); //天气数据
const actions = [
  {
    text: "切换身份",
    icon: "exchange",
  },
];
const dhcr = ref(); //电话查人组件对象
const peo = ref(); //盘查人员组件对象
const car = ref(); //盘查车辆组件对象
const ywclzlCount = ref(0); //由我处理的指令统计
const myzlCount = ref(0);
const cswdzlCount = ref(0); //抄送我的指令统计
const zdgzKey = ref(1);
const userInfo = JSON.parse(window.localStorage.getItem("userInfo")); //用户信息
const home = reactive({
  functionList: [
    {
      name: "人员盘查",
      imgUrl: require("../../assets/images/menu-yyhc.png"),
      path: "pr",
    },
    {
      name: "勤务统计",
      imgUrl: require("../../assets/images/qwtj.png"),
      path: "/hisQwCenter",
    },
    {
      name: "车辆盘查",
      imgUrl: require("../../assets/images/menu-clhc.png"),
      path: "pc",
    },
    {
      name: "巡防报备",
      imgUrl: require("../../assets/images/menu-rwzx.png"),
      path: "/yyzx/xfbb/addXfbb",
    },
    {
      name: "预警统计",
      imgUrl: require("../../assets/images/jq_home.png"),
      path: "/yyzx/yjxx/yjTotal",
    },
    {
      name: "值班报备",
      imgUrl: require("../../assets/images/menu-qwzx.png"),
      path: "/yyzx/views/addZbbb",
    },
    {
      name: "查看更多",
      imgUrl: require("../../assets/images/new_gd.png"),
      path: "/yyzx",
    },
  ], //中间功能区
  rwList: [],
  totalLit: [
    {
      url: "/newTwoHome/addZl",
      icons: require("../../assets/images/new/cswdzl.png"),
      text: "新增指令",
      bg: "linear-gradient(90deg, #fff9f1 0%, #f9f1e4 100%)",
      colors: "#783000",
      badges: "+",
    },
    {
      url: "/newTwoHome/myZl",
      icons: require("../../assets/images/new/cswdzl.png"),
      text: "我发起的指令",
      bg: "linear-gradient(90deg, #fff9f1 0%, #f9f1e4 100%)",
      colors: "#783000",
      badges: 0,
    },
    {
      url: "/yyzx/zlzx/zlzxIndex",
      icons: require("../../assets/images/new/wcldzl.png"),
      text: "由我处理的指令",
      bg: "linear-gradient(90deg, #f6fafd 0%, #e8f0fc 100%)",
      colors: "#163678",
      badges: 0,
    },
    {
      url: "/newTwoHome/myZl?type=cs",
      icons: require("../../assets/images/new/wfsdzl.png"),
      text: "抄送我的指令",
      bg: "linear-gradient(90deg, #f6fafd 0%, #e8fcfa 100%)",
      colors: "#397361",
      badges: 0,
    },
  ],
});
const timeObj = reactive({
  kssj: "",
  jssj: "",
});
onMounted(() => {
  zdgzKey.value++;
  _getUserSelectPage();
  _getMyTaskTotal();
});
//跳转
function onCLickSelect(url) {
  router.push(url);
}
//发起指令
function onCLickFqzl() {
  router.push("/newTwoHome/addZl");
}
// 我发起的指令列表
function onCLickZlLb() {
  router.push("/newTwoHome/myZl");
}
//点击由我处理的指令
function onCLickYwcldzl() {
  router.push("/yyzx/zlzx/zlzxIndex");
}
//跳转领导驾驶舱
function onClickLdjsc() {
  router.push("/newTwoHome/ldjsc");
}
//获取任务统计
function _getMyTaskTotal() {
  getMyTaskTotal({ sfzh: userInfo.idEntityCard }).then((res) => {
    if (res) {
      res.forEach((item) => {
        if (item.rwxl == "05") {
          ywclzlCount.value = item.count;
        }
        if (item.rwxl == "06") {
        }
      });
    }
  });
  getMyZlList({
    pageSize: 10,
    pageCurrent: 1,
  }).then((res) => {
    myzlCount.value = res.total;
  });
}
//获取用户首页模板
function _getUserSelectPage() {
  getUserSelectPage({
    size: 20,
    current: 1,
  }).then((res) => {
    res.records.forEach((item) => {
      radioList.value.push(item);
    });
  });
}
//选中的设置信息
function onSelectSeting(e) {
  switch (e.text) {
    case "切换身份":
      showUserChangePicker.value = true;
      break;
  }
}
//用户选中身份
function onConfirm() {
  showUserChangePicker.value = false;
  setUserHome(isActive.value);
}
//跳转页面
function onRouter(path) {
  switch (path) {
    case "/rw":
    case "/yyzx":
      router.replace(path);
      break;
    case "pr":
      checkPeople();
      break;
    case "pc":
      checkCar();
      break;
    case "/dhcr":
      checkDhcr();
      break;
    case "rhjs":
      try {
        bridge.toFusionComputing();
      } catch (error) { }
      break;
    default:
      router.push(path);
  }
}
//点击盘人
function checkPeople() {
  peo.value.handleOpen();
}
//点击盘车
function checkCar() {
  car.value.handleOpen();
}
// 点击电弧查人
function checkDhcr() {
  dhcr.value.peoplePopupShow = true;
}
</script>
<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";

.zszh_box_box {
  padding: 3vw;

  .zszh {
    @include font_size($font_medium);
    font-weight: 700;
  }
}

.zszh_box {
  @include font_size($font_medium_s);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 4vw;

  .zszh_box_item {
    text-align: center;
    width: 30%;
    padding: 4vw 0;
    border-radius: 3vw;
    margin-bottom: 5vw;

    .zszh_title {
      margin-top: 2vw;
    }
  }
}

.new_leaderTop {
  height: 26.33334vw;
  background: url("../../assets/images/new/banner.png") no-repeat;
  background-size: 100%;
  top: 0;
  @include font_size($font_medium_s);
}

.new_welcome {
  padding: 5.5vw 5vw 3vw 5vw;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  @include font_size($font_medium_s);

  .userName_box {
    color: #fff;

    .wd {
      margin-bottom: 3vw;
    }

    .tq_box {
      @include font_size($font_medium);
      position: relative;
      top: -0.5vw;
    }

    .face {
      width: 5vw;
      height: 4vw;
      margin-right: 2.5vw;
    }
  }
}

.center_function_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #fff;
  @include font_size($font_medium_s);
  @include font_color($font-color-theme);
  padding: 4vw 1vw 0 1vw;

  .f_item {
    text-align: center;
    width: 20%;
    margin: 0 0 4.5vw 0;

    &>img {
      width: 13vw;
      height: 13vw;
      margin-bottom: 2vw;
    }
  }
}

::v-deep .van-radio-group {
  padding: 5vw;
}

::v-deep .van-radio {
  padding: 2vw 0;
}

.ldkb_img {
  width: 100%;
}

.ldjsc_box {
  background: url("../../assets/images/new/ldjsc_url.png");
  background-size: 100% 100%;
  height: 26vw;
  @include font_size($font_medium_s);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6vw;
}

.ldjsc_detail {
  display: flex;
  flex-direction: column;

  .ldjsc_title {
    font-size: 5vw;
    font-weight: 700;
    color: #104ca5;
  }

  .ldjsc_hint {
    margin-top: 3vw;
  }
}

.ckgd {
  height: 7vw;
  line-height: 7vw;
  width: 20vw;
  text-align: center;
  color: #fff;
  border-radius: 4vw;
  background: linear-gradient(90deg, #2972fa 0%, #0aa7f8 100%);
}
</style>