<template>
  <div class="layout">
    <div class="mask"></div>
    <div class="header">
      <img class="header-bg" src="@/assets/images/header.png" alt="" />
      <div class="menu">
        <div class="menu-item" :class="{ active: route.path === '/home' }">
          <router-link to="/home"><span>项目看板</span></router-link>
        </div>
        <div class="menu-item" :class="{ active: route.path === '/quality' }">
          <router-link to="/quality"><span>质量管理</span></router-link>
        </div>
      </div>
      <div class="title">智慧工地大屏看板</div>
      <div class="menu">
        <div class="menu-item" :class="{ active: route.path === '/safety' }">
          <router-link to="/safety"><span>安全管理</span></router-link>
        </div>
        <div class="menu-item" :class="{ active: route.path === '/process' }">
          <router-link to="/process"><span>进度管理</span></router-link>
        </div>
      </div>
      <div class="absolute right-20px z-99">
        <el-cascader
          v-model="projectCode"
          effect="dark"
          :show-all-levels="false"
          :options="options"
          :props="{ label: 'prj_name', value: 'prj_code' }"
          :popper-style="{
            maxWidth: '500px'
          }"
        />
      </div>
      <div class="absolute left-20px z-99">
        <el-button :icon="Back" circle @click="$router.back()" >
        </el-button>
      </div>
    </div>
    <div class="content">
      <router-view :key="projectCode?.[1]"></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { ref, onBeforeUnmount, provide } from 'vue';
import { Back } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import { invoke } from '@/api';

const route = useRoute();
const time = ref(dayjs().format('YYYY-MM-DD dddd HH:mm:ss'));
const projectCode = ref<string[]>();
const options = ref();

invoke({
  interfaceCode: 'BigScreen.projectList',
}).then((res: any) => {
  options.value = (res || []).map((item: any) => ({
    prj_name: item.text,
    prj_code: item.com_code,
    children: item.children,
  }));
  if(options.value?.[0].children?.length) {
    projectCode.value = [options.value?.[0].prj_code, options.value?.[0].children[0].prj_code];
  }
});

provide('projectCode', projectCode);

const timer = setInterval(() => {
  time.value = dayjs().format('YYYY-MM-DD dddd HH:mm:ss');
}, 1000);

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

<style lang="less">
.layout {
  width: 100%;
  height: 100%;
  background: url(@/assets/images/bg.png) no-repeat center;
  background-size: cover;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(36, 50, 99, 0.6);
}

.header {
  position: relative;
  display: flex;
  height: 83px;
  align-items: center;
  justify-content: center;
  z-index: 9;
  background-color: rgba(4, 50, 99, 0.4);
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 73px;
    z-index: 1;
  }
  .title {
    width: 680px;
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 40px;
    color: #fff;
    margin-top: -18px;
    z-index: 9;
  }
  .menu {
    display: flex;
    align-items: center;
    z-index: 9;
    margin-top: 16px;
    a {
      color: #c1d4e3;
      text-decoration: none;
    }
    &-item {
      width: 143px;
      height: 48px;
      text-align: center;
      font-family: 'Arial Bold Oblique', 'Arial Bold', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 700;
      font-style: oblique;
      font-size: 22px;
      color: #ebf9f9;
      line-height: 48px;
      background: url(@/assets/images/menu.svg) no-repeat center;
    }
    .active {
      background: url(@/assets/images/menu-active.svg) no-repeat center;
      span {
        color: #56efef;
      }
    }
  }
}

.content {
  position: relative;
  width: 100%;
  height: calc(100% - 83px);
  padding: 20px;
  box-sizing: border-box;
  z-index: 1;
}
</style>
