<template>
  <div class="main">
    <page-header class="page-header"></page-header>
    <div class="page-main">
      <side-bar
        class="side-bar"
        ref="sideBarDom"
        @changeTab="changeTab"
      ></side-bar>
      <div class="container">
        <div class="container-message" v-show="isShowBasic">
          <basic-message
            v-if="basciName === 'basic_message'"
            @handleClose="handleClose"
            @showModal="showModal"
          ></basic-message>
          <basic-information
            v-else
            @handleClose="handleClose"
          ></basic-information>
          <information-msg class="information-msg"></information-msg>
        </div>
        <div
          v-show="!isShowBasic"
          class="container-message-icon"
          @click="handleShowBasic"
        >
          <img src="/image/basic-message-icon.png" alt="" />
        </div>
        <map-container
          class="map"
          :reloadData="reloadData"
          :isShowBasic="isShowBasic"
          @handleSend="handleSend"
        ></map-container>
      </div>
    </div>
    <Modal
      v-model="isShow"
      :mask-closable="false"
      :footer-hide="true"
      :title="title"
      :closable="isCloseable"
      :width="modalWidth"
      @on-visible-change="modeChange"
    >
      <component
        :is="currentTag"
        :is-show="isShow"
        @handleSend="handleSend"
        @closeModal="closeModal"
      ></component>
    </Modal>
    <Modal
      v-model="isShowTip"
      :mask-closable="false"
      :mask="false"
      :footer-hide="isFooterHide"
    >
      <p>{{ vehicleTip }}</p>
      <p>{{ remaintime }}</p>
      <template #footer>
        <Button type="info" class="footer" @click="doClose">确定</Button>
      </template>
    </Modal>
    <Modal
      v-model="isShowBoxCheck"
      title="确认信息"
      class="box-check"
      :closable="false"
      :mask-closable="false"
    >
      <span>{{ checkMsg.msg }}</span>
      <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
        <Radio v-for="key in checkMsg.option"></Radio>
        <Radio label="爪哇犀牛"></Radio>
        <Radio label="印度黑羚"></Radio>
      </Radio-group>
      <template #footer>
        <Button type="info" class="footer" @click="handleBoxCheck(1)"
          >确定</Button
        >
        <Button type="info" class="footer" @click="handleBoxCheck(0)"
          >取消</Button
        >
      </template>
    </Modal>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  ref,
  getCurrentInstance,
  computed,
  watch,
  toRefs,
  reactive,
  onBeforeUnmount,
  shallowRef,
} from "vue";
import { useVehicleStore } from "../store/VehicleStore";
import { storeToRefs } from "pinia";
import { Message } from "view-ui-plus";
import PageHeader from "./PageHeader.vue";
import SideBar from "./SideBar.vue";
import BasicMessage from "./BasicMessage.vue";
import BasicInformation from "./BasicInformation.vue";
import InformationMsg from "./InformationMsg.vue";
import AlarmModal from "./AlarmModal.vue";
import ModeSwitch from "./ModeSwitch.vue";
import LogModal from "./LogModal.vue";
import SetView from "./SetView.vue";
import Logout from "./Logout.vue";
import MapContainer from "./MapContainer.vue";

let tipTimer = null;
const isShowBasic = ref(true);
const currentName = ref("basic_message");
const basciName = ref("basic_message");
const isShow = ref(false);
const isShowTip = ref(false);
const isShowBoxCheck = ref(true);
const title = ref("");
const isCloseable = ref(true);
const currentTag = shallowRef("");
const sideBarDom = ref(null);
const vehicleTip = ref("");
const remaintime = ref("");
const isFooterHide = ref(true);
const reloadData = ref(false);
const boxCheckMsg = reactive({
  checkMsg: {},
  optionModel: "",
});
const { checkMsg, optionModel } = toRefs(boxCheckMsg);
const instance = getCurrentInstance();
const { appContext } = instance;
const { $indexRoot } = appContext.config.globalProperties;
const vehicleStore = useVehicleStore();
const vehicleStoreToRefs = storeToRefs(vehicleStore);
const { tipInfo, infoPop } = vehicleStoreToRefs;

onBeforeMount(() => {
  window.addEventListener("beforeunload", () => {
    handleSubscribe();
  });
  // // 发送同步地图版本号信息
  // if (!$indexRoot.sock) {
  //     $indexRoot.init()
  // }
});

function handleSubscribe() {
  reloadData.value = true;
  $indexRoot.destroyData();
}

const modalWidth = computed(() => {
  if (currentName.value === "log" || currentName.value === "set") return "70%";
  return "520px";
});

function handleSend(msg) {
  if ($indexRoot.sock) {
    console.log("发送信息", msg);
    $indexRoot.sock.send(JSON.stringify(msg));
  } else {
    $indexRoot.init().then((socket) => {
      console.log("发送信息", msg);
      socket.send(JSON.stringify(msg));
    });
  }
}

function doModeSwitch() {
  isCloseable.value = false;
  title.value = "确认信息";
  isShow.value = true;
  currentTag.value = ModeSwitch;
}

function handleModal(name) {
  title.value = name === "log" ? "日志获取" : "设置";
  currentTag.value = name === "log" ? LogModal : SetView;
  isCloseable.value = true;
  isShow.value = true;
}

function handleLogout() {
  title.value = "";
  currentTag.value = Logout;
  isCloseable.value = true;
  isShow.value = true;
}

function changeTab(name) {
  console.log(name);
  currentName.value = name;
  switch (name) {
    case "mode_switch":
      doModeSwitch();
      break;
    case "mode_information":
    case "basic_message":
      basciName.value = name;
      break;
    case "log":
    case "set":
      handleModal(name);
      break;
    case "logout":
      handleLogout();
      break;
  }
}

function handleClose() {
  isShowBasic.value = false;
}

function handleShowBasic() {
  isShowBasic.value = true;
}

function closeModal() {
  isShow.value = false;
}

function modeChange(visible) {
  if (!visible) {
    let sideBar = sideBarDom.value;
    sideBar.changeMode();
  }
}

function showModal() {
  isShow.value = true;
  currentTag.value = AlarmModal;
  title.value = "车辆故障码";
  isCloseable.value = true;
}

function doClose() {
  isShowTip.value = false;
  if (tipTimer) {
    clearTimeout(tipTimer);
    tipTimer = null;
  }
}

function handleShowBoxCheck(list) {
  let data = list[0];
  if (!data) return;
  boxCheckMsg.checkMsg = data;
  isShowBoxCheck.value = true;
}

function handleBoxCheck(accept) {
  let { type, value } = boxCheckMsg.checkMsg;
  handleSend({
    type: "/info/popupack",
    msg: {
      type,
      value,
      accept,
    },
  });
  vehicleStore.splitInfoPop();
}

watch(
  tipInfo,
  (msg) => {
    if (!msg) return;

    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
    if (type === 1) {
      isShowTip.value = true;
      vehicleTip.value = value;
      isFooterHide.value = false;
      tipTimer = setTimeout(() => {
        doClose();
      }, 5 * 1000);
    } else if (type === 2) {
      Message.info({
        content: value,
        duration: 10,
        closable: true,
      });
    } else {
      isFooterHide.value = true;
      if (isFirst === 1) {
        isShowTip.value = true;
      }
      vehicleTip.value = value;
      remaintime.value = vehicleRemainTime;
      if (vehicleRemainTime < 1) {
        isShowTip.value = false;
      }
    }
    vehicleStore.setData("tipInfo", null);
  },
  {
    deep: true,
  }
);

watch(
  infoPop,
  (list) => {
    if (list.length) {
      handleShowBoxCheck(list);
    } else {
      isShowBoxCheck.value = false;
    }
  },
  {
    deep: true,
  }
);

onBeforeUnmount(() => {
  $indexRoot.destroyData();
  window.removeEventListener("beforeunload", handleSubscribe());
});
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .page-header {
    flex: 0 0 10vh;
    min-height: 46px;
    // align-items: flex-end;
  }
  .page-main {
    background: url("/image/background.png") no-repeat;
    background-size: cover;
    flex: auto;
    display: flex;
    height: calc(100% - 10vh);
    .side-bar {
      flex: 0 0 7vw;
      min-width: 70px;
    }
    .container {
      flex: auto;
      display: flex;
      position: relative;
      .container-message {
        flex: 0 0 22vw;
        min-width: 240px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        .container-basic {
          flex: auto;
          height: calc(100% - 150px);
          overflow-y: auto;
          overflow-x: hidden;
        }
      }
      .container-message-icon {
        position: absolute;
        z-index: 9999;
        top: 5vh;
        left: 1vw;
        background: #4a75a9;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        opacity: 1;
        display: flex;
        cursor: pointer;
      }
      .map {
        flex: auto;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
