<template>
  <div :class="['bg', tabBarMenuIndex == 2 ? 'a' : 'b']">

    <div class="top-bg" @click="backMainPage">

      <div class="device-name">{{ deviceData?.deviceName ?? '' }}</div>

      <div class="right-top">
        <div class="date">{{ date }}</div>
        <div class="week">{{ week }}</div>


      </div>

    </div>

    <div class="ledger" v-if="tabBarMenuIndex == 1">

      <!-- 设备台账 -->
      <device-ledger v-if="deviceData" :deviceId="deviceId" />
    </div>


    <div class="integrated-display" v-if="tabBarMenuIndex == 2">

      <!-- 综合显示 -->
      <integrated-display v-if="deviceData" :deviceId="deviceId" :deviceCode="deviceData.deviceCode" />

    </div>

    <div class="curve" v-if="tabBarMenuIndex == 3">

      <!-- 硬件曲线 -->
      <device-curve v-if="deviceData" :deviceId="deviceId" :deviceCode="deviceData.deviceCode" />

    </div>

    <div class="tab-bar-container">
      <div class="tab-bar-bg"
        :class="{ 'a': tabBarMenuIndex == 1, 'b': tabBarMenuIndex == 2, 'c': tabBarMenuIndex == 3 }">
        <div class="menu-text" style="padding-left: 25px;" @click="tabBarMenuClick(1)">
          台账</div>
        <div class="menu-text" style="padding-left: 20px;" @click="tabBarMenuClick(2)">
          综合显示</div>
        <div class="menu-text" style="padding-right: 10px;" @click="tabBarMenuClick(3)">
          硬件曲线</div>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import { getDeviceInfoDetails } from '@/api';
import router from '@/router';
import { parseInt } from 'lodash';
import deviceLedger from '@/components/device-ledger/index.vue'
import integratedDisplay from '@/components/integrated-display/index.vue'
import deviceCurve from '@/components/device-curve/index.vue'

const weekDay = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

const date = ref('')
const week = ref('')

const timer = ref()

const tabBarMenuIndex = ref(2)

const tabBarMenuClick = (index: number) => {
  tabBarMenuIndex.value = index
}

const deviceId = ref(0)
const deviceData: any = ref(null)

onMounted(async () => {
  deviceId.value = parseInt(useQuery('id'))

  getDeviceData()
  timer.value = setInterval(() => updateDate(), 1000)

})


const getDeviceData = async () => {
  deviceData.value = await getDeviceInfoDetails({ deviceId: deviceId.value })
}

onUnmounted(() => {
  clearInterval(timer.value)
  timer.value = ''
})


var nowDate;

const updateDate = () => {

  nowDate = new Date();
  let y = nowDate.getFullYear();//年
  let m  = (nowDate.getMonth() + 1).toString().padStart(2, "0");//月
  let d = nowDate.getDate().toString().padStart(2, "0");//日
  let h = nowDate.getHours().toString().padStart(2, "0");//时
  let mm = nowDate.getMinutes().toString().padStart(2, "0");//分
  let s = nowDate.getSeconds().toString().padStart(2, "0");//，秒

  //周
  let w = weekDay[nowDate.getDay()];

  date.value = y + "-" + m + "-" + d + "\xa0" + h + ":" + mm + ":" + s;
  week.value = w
}



const backMainPage = () => {
  router.go(-1)
}


</script>

<style lang="less" scoped>
.bg {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/img/screen_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;

  &.a {
    background-image: url(../../assets/img/screen_bg.png);
  }

  &.b {
    background-image: url(../../assets/img/big_screen_curve_bg.png);
  }
}

.top-bg {
  width: 100%;
  height: 80px;
  background-image: url(../../assets/img/big_screen_top_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  cursor: pointer;


  .device-name {
    color: #AAF4FC;
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 35%;
    font-weight: bold;
    transform: translateX(-50%) translateY(-35%);
  }


  .right-top {
    position: absolute;
    right: 2%;
    top: 10%;
    display: flex;
    align-items: center;
  }

  .date {
    color: white;
    font-size: 18px;
    min-width: 180px;
  }

  .week {
    color: white;
    font-size: 18px;
  }

}

.tab-bar-container {
  position: absolute;
  left: 50%;
  top: 9%;
  transform: translateX(-50%);

  .tab-bar-bg {
    width: 422px;
    height: 44px;
    background-image: url(../../assets/img/big_screen_tab_menu1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto;
    align-items: center;

    &.a {
      background-image: url(../../assets/img/big_screen_tab_menu1.png);
    }

    &.b {
      background-image: url(../../assets/img/big_screen_tab_menu2.png);
    }

    &.c {
      background-image: url(../../assets/img/big_screen_tab_menu3.png);
    }

    .menu-text {
      font-size: 16px;
      font-weight: bold;
      color: #62EDFD;
      cursor: pointer;
      text-align: center;
    }

  }


}

.container {
  display: flex;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  width: 100%;
  height: 100%;
  flex-direction: row;
  position: absolute;
  top: 8%;
}


.ledger {
  display: flex;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  width: 100%;
  height: 100%;
  flex-direction: row;
  position: absolute;
  top: 8%;
}


.ledger {
  display: flex;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  width: 100%;
  height: calc(100% - 9%);
  flex-direction: row;
  position: absolute;
  top: 9%;
}


.integrated-display {
  display: flex;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  width: 100%;
  height: calc(100% - 8%);
  flex-direction: row;
  position: absolute;
  top: 8%;
}


.curve {
  display: flex;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  width: 100%;
  height: calc(100% - 9%);
  flex-direction: row;
  position: absolute;
  top: 9%;
}
</style>
