<script setup>
import ptgk from './ptgk.vue'
import ptyxqk from './ptyxqk.vue'
import bjyjqs from './bjyjqs.vue'
import yjlxfb from './yjlxfb.vue'
import bjlxfb from './bjlxfb.vue'
import jqxxclqk from './jqxxclqk.vue'
import ssbjlb from './ssbjlb.vue'
import { initFontSize } from '~/utils/size'
import { user } from '~/store/index'

const loading = ref(false);
const sm_id = ref('')
const detailInfo = ref({})

const schoolData = ref([]);

initSchoolData();
async function initSchoolData() {
  let obj = {};
  if(user.value.user_role_id == "72") {
    obj.schoolid = user.value.sm_info.sm_id;
  }
  const { code, data } = await request({
    baseURL: window.GLOBAL_CONFIG.myxjyszptx,
    url: '/openapi/chart/school_list.php',
    data: obj
  })
  if (code == 1) {
    for (let key in data.data) {
      schoolData.value.push({
        id: key,
        name: data.data[key]
      })
    }
    if(schoolData.value.length == 0) {
      ElMessage({
        showClose: true,
        type: 'error',
        message: '当前学校没有设备！',
        duration: 0
      })
    } else {
      sm_id.value = schoolData.value[0].id;
      initData();
    }
  }
}

async function initData() {
  loading.value = true;
  const res = (
    await request({
      baseURL: window.GLOBAL_CONFIG.myxjyszptx,
      url: '/openapi/chart/power_data.php',
      data: { sm_id: sm_id.value != 0 ? sm_id.value : "" }
    })
  )

  if (res.code == 1)
    detailInfo.value = res.data.power_data

  loading.value = false;
}

initFontSize()
window.addEventListener('resize', async () => {
  initFontSize()
})
</script>

<template>
  <div v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)" element-loading-text="加载时间较长, 请耐心等待~" class="dldgsjtj overflow-hidden">
    <top-bottom-bg title="电力灯光数据统计" />
    <div class="topOperate flex items-center px-8">
      <el-select v-model="sm_id" placeholder="项目名称" popper-class="dsjSelect" @change="initData">
        <el-option v-for="(item, index) in schoolData" :key="index" :label="item.name" :value="item.id" />
      </el-select>
    </div>

    <div class="jypjContent p-25px flex space-x-25px">
      <div class="leftCon">
        <div class="dsjCon" style="height: 30%;">
          <title-bg title="平台概况" />
          <ptgk class="childCon" :data="detailInfo.ptgkData" />
        </div>
        <div class="dsjCon my-25px" style="height: calc(36% - 50px);">
          <title-bg title="平台运行情况" />
          <ptyxqk class="childCon" :data1="detailInfo.ptyxqkObj" :data2="detailInfo.ptyxqkPer" :data3="detailInfo.ptyxqkPro" />
        </div>
        <div class="dsjCon" style="height: 34%;">
          <title-bg title="报警预警趋势" />
          <bjyjqs class="childCon" :data="detailInfo.bjyjqsData" />
        </div>
      </div>
      <div class="flex-1">
        <div class="dsjCon half">
          <title-bg title="预警类型分布" />
          <yjlxfb class="childCon" :data="detailInfo.yjlxfbData" />
        </div>
        <div class="dsjCon half mt-25px">
          <title-bg title="报警类型分布" />
          <bjlxfb class="childCon" :data="detailInfo.bjlxfbData" />
        </div>
      </div>
      <div class="flex-1" style="width: 30%;">
        <div class="dsjCon half">
          <title-bg title="警情信息处理情况(月度)" padding="px-15" />
          <jqxxclqk class="childCon" :data="detailInfo.jqxxclqkData" />
        </div>
        <div class="dsjCon half mt-25px overflow-auto">
          <title-bg title="实时报警列表" />
          <ssbjlb class="childCon" :column-data="detailInfo.ssbjlbColumnData" :table-data="detailInfo.ssbjlbTableData" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dldgsjtj {
  background: url(/images/dsj/bg.png) no-repeat;
  background-size: 100% 100%;
  background-color: #000;
  position: relative;
  // min-width: 1440px;
  .topOperate {
    position: absolute;
    width: 100%;
    height: 4.375rem;
    top: 0;
    z-index: 20;
    :deep() {
      .el-input__wrapper {
        box-shadow: none !important;
        background: rgba(102, 255, 255, 0.1);
        border: 1px solid #00b7b2;
        width: 13.375rem;
        .el-input__inner {
          color: rgba($color: #fff, $alpha: 0.8);
          height: 2.625rem;
        }
      }
      .el-select__caret {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  .jypjContent {
    height: calc(100% - 6.5625rem - 1rem);
    .leftCon {
      width: 35%;
    }
    .half {
      height: calc(50% - 12px);
    }
    .dsjCon {
      background: rgba($color: #012337, $alpha: 0.6);
      .childCon {
        height: calc(100% - 4.0625rem);
      }
    }
  }
}
</style>
