<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const canvas1Ref = ref()
const canvas2Ref = ref()

import wingsUrl from '~/assets/wings.png';


onMounted(() => {
  const chart1 = echarts.init(canvas1Ref.value)

  const data1 = [
    { value: 40, name: '幼儿园' },
    { value: 30, name: '小学' },
    { value: 20, name: '初中' },
    { value: 10, name: '高中' },
  ]

  chart1.setOption({

    legend: {
      right: '20%',
      top: 'center',
      orient: 'vertical',
      textStyle: {
        color: 'white'
      },
      // data: [
      //   '幼儿园',
      //   '小学',
      //   '初中',
      //   '高中',
      // ]    ,
      formatter: function (name) {
        return `${name} ${data1.find((item) => name === item.name).value}`
      }
    },
    series: [
      {
        name: '各分布占比',
        type: 'pie',
        radius: [20, 140],
        center: ['25%', '50%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 5
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: false
          }
        },
        data: data1
      },
    ]
  })

  const chart2 = echarts.init(canvas2Ref.value)
  chart2.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      right: '10',
      top: '10',
      textStyle: {
        color: 'white'
      },
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },
    xAxis:
    {
      type: 'category',
      show: true,
      name: '学期',
      data: ['2019年上', '2019年下', '2020年上', '2020年下', '2021年上', '2021年下', '2022年上']
    }
    ,
    yAxis:
    {
      type: 'value',
      name: '数量',
      show: true,
    }
    ,
    series: [
      {
        name: '遗失损坏报废',
        type: 'bar',
        stack: 'me',
        emphasis: {
          focus: 'series'
        },
        data: [12, 32, 10, 14, 90, 20, 10]
      },
      {
        name: '新增',
        type: 'bar',
        stack: 'me',
        emphasis: {
          focus: 'series'
        },
        data: [32, 33, 30, 33, 39, 30, 20]
      },

    ]
  })
})

const tableData = ref(Array.from({ length: 9 }).map((_, i) => ({
  xxmc: '第一学校名称名称',
  sbmc: '后摄像头2',
  sbwz: '教学楼三年2班',
  sbzt: '故障',
  gzms: '电阻阻值增大甚至开路电...',
})))
</script>

<template>
  <div class="w-full h-screen flex flex-col text-white">
    <div class="flex-none w-full h-60px nav flex justify-center items-center relative">
      <div class="text-hex-1BBEEE text-3xl ">巡课平台驾驶舱</div>
      <div class="absolute h-20px"><img :src="wingsUrl" class="h-full"></div>
    </div>
    <div class="main flex-auto bg-hex-080570 flex p-2">
      <div class="w-1/2 p-2 flex flex-col justify-between min-w-900px">

        <div>
          <div class="flex-none flex mb-10px">
            <div class="w-1 h-28px bg-hex-5979FF mr-2"></div>
            <div class="text-lg ">设备总览</div>
          </div>
          <div class="flex w-full justify-between">
            <div
              class=" flex flex-col justify-between bg-hex-030062  w-290px h-400px px-50px py-30px box-border  border border-hex-27399a">
              <div class="flex justify-between ">
                <div class="flex_center w-60px h-60px rounded-1/2 bg-blue-700">
                  <svg class="w-36px h-36px fill-white" aria-hidden="true" @click="handleSwitchClick">
                    <use xlink:href="#icon-jiankong"></use>
                  </svg>
                </div>
                <div>
                  <div>设备总数</div>
                  <div class="text-hex-1BBEEE text-4xl mt-2">9985</div>
                </div>
              </div>
              <div class="flex justify-between"><span>小学：</span><span>80台</span></div>
              <div class="flex justify-between"><span>幼儿园：</span><span>18台</span></div>
              <div class="flex justify-between"><span>初中：</span><span>80台</span></div>
              <div class="flex justify-between mb-10"><span>高中：</span><span>58台</span></div>
            </div>
            <div
              class="flex-none flex flex-col justify-between bg-hex-030062  w-290px h-400px px-50px py-30px border border-hex-27399a">
              <div class="flex justify-between ">
                <div class="flex_center w-60px h-60px rounded-1/2 bg-blue-500">
                  <svg class="w-36px h-36px fill-white" aria-hidden="true" @click="handleSwitchClick">
                    <use xlink:href="#icon-jiankong"></use>
                  </svg>
                </div>
                <div>
                  <div>运行总数</div>
                  <div class="text-hex-1BBEEE text-4xl mt-2">9985</div>
                </div>
              </div>
              <div class="flex justify-between"><span>小学：</span><span>80台</span></div>
              <div class="flex justify-between"><span>幼儿园：</span><span>18台</span></div>
              <div class="flex justify-between"><span>初中：</span><span>80台</span></div>
              <div class="flex justify-between mb-10"><span>高中：</span><span>58台</span></div>
            </div>
            <div
              class="flex-none flex flex-col justify-between bg-hex-030062  w-290px h-400px px-50px py-30px border border-hex-27399a">
              <div class="flex justify-between ">
                <div class="flex_center w-60px h-60px rounded-1/2 bg-red-600">
                  <svg class="w-36px h-36px fill-white" aria-hidden="true" @click="handleSwitchClick">
                    <use xlink:href="#icon-jiankong"></use>
                  </svg>
                </div>
                <div>
                  <div>故障总数</div>
                  <div class="text-hex-1BBEEE text-4xl mt-2">9985</div>
                </div>
              </div>
              <div class="flex justify-between"><span>小学：</span><span>80台</span></div>
              <div class="flex justify-between"><span>幼儿园：</span><span>18台</span></div>
              <div class="flex justify-between"><span>初中：</span><span>80台</span></div>
              <div class="flex justify-between mb-10"><span>高中：</span><span>58台</span></div>
            </div>
          </div>
        </div>

        <div class=" bg-hex-030062 p-4 ">
          <div class="flex-none flex mb-10px">
            <div class="w-1 h-28px bg-hex-5979FF mr-2"></div>
            <div class="text-lg ">各分布占比</div>
          </div>
          <div class="flex_center">
            <canvas ref="canvas1Ref" width="800" height="400"></canvas>
          </div>
        </div>

      </div>


      <div class="w-1/2 p-2 flex flex-col justify-between min-w-900px">
        <div>
          <div class="flex-none flex mb-10px">
            <div class="w-1 h-28px bg-hex-5979FF mr-2"></div>
            <div class="text-lg ">设备故障报警</div>
          </div>
          <el-table :data="tableData" class="bg-hex-030062" :style="{
            '--el-table-border-color': 'transparent',
            '--el-table-text-color': '#ffffff67',
            '--el-table-header-text-color': '#fff',
            '--el-table-row-hover-bg-color': 'transparent',
            '--el-table-current-row-bg-color': 'transparent',
            '--el-table-header-bg-color': 'transparent',
            '--el-table-fixed-box-shadow': 'transparent',
            '--el-table-bg-color': 'transparent',
            '--el-table-tr-bg-color': 'transparent',
            '--el-table-expanded-cell-bg-color': 'transparent',
          }">
            <el-table-column prop="xxmc" label="学校名称" width="auto" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sbmc" label="设备名称" width="auto" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sbwz" label="设备位置" width="auto" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sbzt" label="设备状态" width="auto" show-overflow-tooltip></el-table-column>
            <el-table-column prop="gzms" label="故障描述" width="auto" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
        <div>
          <div class="flex-none flex mb-10px">
            <div class="w-1 h-28px bg-hex-5979FF mr-2"></div>
            <div class="text-lg ">设备盘点</div>
          </div>
          <div class="flex_center bg-hex-030062">
            <canvas ref="canvas2Ref" width="890" height="420"></canvas>
          </div>
        </div>


      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.nav {
  background: linear-gradient(90deg, #03005c 3%, #00145f 49%, #03005a);
}

// .text-hex-1BBEEE {
//   color: #1BBEEE
// }

// .bg-hex-080570 {
//   background-color: #080570;
// }

// .bg-hex-5979FF {
//   background-color: #5979FF;
// }

// .bg-hex-030062 {
//   background-color: #030062;
// }

// .border-hex-27399a {
//   border-color: #27399a;
// }
</style>
