<!--
  Description: 场站管理-设备控制
  Author: 李亚光
  Date: 2024-09-05
 -->
<script lang="ts" setup name="StationDeviceControl">
import dayjs from 'dayjs'
import control from './components/control.vue'
import { getDeptStation } from '@/api/home/station/station'
import { toTreeList } from '@/utils/structure'
import { getDeptTreeList } from '@/api/system/dept'

const loadingTree = ref<boolean>(false)

const defaultProps = {
  children: 'children',
  label: 'name',
}
const treeData = ref<any[]>([])

// 点击树形结构
const handleNodeClick = (data: any) => {
  if (data.id === 'station') {
    // 点击的设备(加载视频)
    console.log('station')
  }
}
// 获取组织列表树数据
const fetchTreeData = () => {
  loadingTree.value = true
  getDeptTreeList({ deptType: '' }).then((res) => {
    getDeptStation({}).then((res1) => {
      const data = res1.data.map((item: any) => ({
        ...item,
        checked: false,
        code: '',
        id: 'station',
        name: `${item.LEDGER_NAME}云台`,
        open: false,
        pCodes: '',
        pid: item.DEPTID,
        value: '',
      }))
      console.log(data)
      treeData.value = toTreeList([...res.data, ...data], '0', true)
      loadingTree.value = false
    })
  }).catch(() => {
    loadingTree.value = false
  })
}
fetchTreeData()

const xAxisData = ref<string[]>([])
const data = ref<any[]>([])
onMounted(() => {
  // dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss')
  xAxisData.value = [
    `${dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss')}`,
    `${dayjs().subtract(20, 'hour').format('YYYY-MM-DD HH:mm:ss')}`,
    `${dayjs().subtract(16, 'hour').format('YYYY-MM-DD HH:mm:ss')}`,
    `${dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss')}`,
    `${dayjs().subtract(8, 'hour').format('YYYY-MM-DD HH:mm:ss')}`,
    `${dayjs().subtract(4, 'hour').format('YYYY-MM-DD HH:mm:ss')}`,
    `${dayjs().subtract(0, 'hour').format('YYYY-MM-DD HH:mm:ss')}`,
  ]
  data.value = [
    {
      name: '当前浓度',
      data: ['0', '0', '0', '0', '0', '0', '0'],
    },
  ]
})
const { proxy } = getCurrentInstance() as any
</script>

<template>
  <app-container style="overflow: hidden;">
    <div class="container">
      <!-- 左侧组织机构 -->
      <div class="left-container">
        <div class="dept-div">
          <el-card class="box-card" shadow="always">
            <template #header>
              <div class="clearfix">
                <!-- <div>监控点列表</div> -->
                <el-input placeholder="请输入搜索内容" />
              </div>
            </template>
            <el-scrollbar height="100%" class="user-dept-scroll">
              <el-tree
                v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
                :expand-on-click-node="false" @node-click="handleNodeClick"
              />
            </el-scrollbar>
          </el-card>
        </div>
      </div>
      <!-- 右侧表格 -->
      <div ref="tableContainer" class="table">
        <el-card class="box-card1" shadow="always">
          <div class="container1">
            <div class="left1">
              <video class="video1" src="" controls autoplay />
              <!-- 图表 -->
              <div>
                <span>当前浓度：0.00%LEL</span>
                <span style="margin-left: 50px;">报警阈值：50%LEL</span>
              </div>
              <div class="chart">
                <line-chart
                  :x-axis-data="xAxisData" :data="data" :gradient="false" :smooth="false" unit="%LEL"
                  :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
                />
              </div>
            </div>
            <div class="right1">
              <el-card v-if="proxy.hasPerm('/station/control/video')" shadow="always">
                <template #header>
                  <div class="clearfix">
                    <div>云台控制</div>
                  </div>
                </template>
                <control />
              </el-card>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.container1 {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left1 {
    width: 75%;

    // background-color: antiquewhite;
    .video1 {
      width: 100%;
      height: 55vh;
    }

    .chart {
      width: 100%;
      height: 23vh;
    }
  }

  .right1 {
    width: 24%;
    // background-color: aquamarine;

    :deep(.el-card) {
      height: 80vh;
      background-color: #fff;
    }

    :deep(.el-card__body) {
      padding: 5px;
      padding-top: 10px;
    }

    // .header {
    //   text-align: center;
    //   font-size: 16px;
    //   font-weight: 700;
    //   padding: 10px;
    //   border-bottom: 1px solid #ccc;
    // }
  }
}

// 样式
.container {
  width: 100%;
  display: flex;

  .left-container {
    width: 22%;
  }

  :deep(.el-radio__label) {
    display: none;
  }

  .table {
    width: 78%;
  }
}

.video {
  width: 49%;
  height: 40vh;
}

.mar-bottom {
  margin-bottom: 8px;
}

.dept-div {
  padding-right: 12px;

  :deep(.el-card) {
    height: 85vh;
    background-color: #fff;
  }

  .box-card {
    width: 100%;

    .user-dept-scroll {
      width: 100%;
      height: calc(100vh - 120px);
    }
  }
}
</style>