<template>
  <div class="inspection">
    <layout>
      <template #left>
        <div class="left_spection">
          <HeadlineTag value="巡检点列表"></HeadlineTag>
          <div class="box_arch_point">
            <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
              <el-input v-model="input" placeholder="按巡查点名称搜索" />
            </div>
            <div v-if="leftData.DeviceList && Object.keys(leftData.DeviceList).length != 0">
              <point :resultData="leftData.DeviceList"></point>
            </div>
            <div style="height: calc(100% - 160px);" v-else>
              <Empty :bottom="true"></Empty>
            </div>
            <!-- <div style="height: calc(100% - 160px);">
              <Empty></Empty>
            </div>
            <div class="center_in">
              <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                layout="total, prev, pager, next" @pagination="getList" />
            </div> -->
          </div>
        </div>
      </template>
      <template #right>
        <div class="right_spection">
          <div class="operation_spection">
            <HeadlineTag type="right" value="运行统计"></HeadlineTag>
            <div class="box_arch">
              <div class="image_tubbiness">
                <div class="work_num">{{ leftData.TodayTotal || 0 }}<span>个</span></div>
                <div class="work_title">今日总数</div>
              </div>
              <div class="right_content">
                <div class="work_week">
                  <div class="color_line_xj" style="background-color: rgb(21, 213, 21);"></div>
                  <span>巡检点数:</span>{{ leftData.InspectionPoints || 0 }}
                </div>
                <div class="work_week">
                  <div class="color_line_xj" style="background-color: rgb(196, 127, 19);"></div>
                  <span>巡检计划:</span>{{ leftData.InspectionPlan || 0 }}
                </div>
                <div class="work_week">
                  <div class="color_line_xj" style="background-color: rgb(195, 56, 56);"></div>
                  <span>巡检线路:</span>{{ leftData.InspectTheLine || 0 }}
                </div>
              </div>
            </div>
          </div>
          <div class="flex_spection">
            <HeadlineTag type="right" value="巡检统计"></HeadlineTag>
            <div class="box_arch">
              <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
            </div>
          </div>
          <div class="flex_spection" style="height: 33%;">
            <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
            <div class="box_arch" v-if="leftData.realTime && leftData.realTime.length > 0">
              <polling :resultData="leftData.realTime"></polling>
            </div>
            <Empty :bottom="true" v-else></Empty>
          </div>
        </div>
      </template>
    </layout>
  </div>
</template>

<script setup>
import { getEndpoint } from "@/api/system/endpoint"
import layout from "@/components/layout_/index.vue";
import HeadlineTag from '@/components/HeadlineTag'
import Empty from '@/components/Empty'
import polling from './polling.vue'
import point from './point.vue'
import * as echarts from 'echarts'
const total = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const input = ref('')
/** 查询列表 */
function getList() {
};
const chartRouting = ref(null);
let chartInstance = null;
// 初始化图表
const initChart = () => {
  chartInstance = echarts.init(chartRouting.value);
  chartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      textStyle: {
        color: '#fafafa',
      },
      borderColor: 'transparent',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      extraCssText: 'backdrop-filter: blur(6px);',
    },
    grid: {
      right: '4%',
      bottom: '10%',
      top: '16%',
    },
    xAxis: {
      type: 'category',
      // 使用 24 小时数据
      data: [],
      axisLabel: {
        color: '#fff'
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ffffff',
        fontSize: 12,
        padding: [0, 10, 0, 0],
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: '增加值',
        data: [1, 2, 3, 4, 7, 6, 7, 8, 4, 10],
        type: 'line',
        smooth: true,
        color: '#00F7FF',
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [{
              offset: 0,
              color: 'rgba(0, 247, 255, .6)',
            },
            {
              offset: 0.8,
              color: 'rgba(0, 247, 255, .2)',
            },
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10,
        },
        symbol: 'circle',
        symbolSize: 6,
      },
    ],
  });
};
// 生命周期
onMounted(() => {
  intervalId.value = setInterval(getAccessData, 10000);
  getAccessData()
  initChart()
});

onUnmounted(() => {
  clearInterval(intervalId.value);
})
const intervalId = ref(null)
const leftData = ref({})
function getAccessData() {
  getEndpoint().then((res) => {
    if (res.code == 200) {
      leftData.value = res.data
    }
  })
}

watch(() => leftData.value, (newVal) => {
  if (chartInstance) {
    chartInstance.setOption({
      xAxis: {
        data: Object.keys(newVal.Inspect),
      },
      series: [{
        type: 'line',
        data: Object.entries(newVal.Inspect),
      }],
    })
  }
}, { deep: true, immediate: true } // 开启深度监听
)
// 窗口自适应
window.addEventListener('resize', () => {
  chartInstance?.resize();
});
</script>

<style scoped lang="scss">
.inspection {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.left_spection {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.right_spection {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box_arch_point {
  height: calc(100% - 40px);
}

.operation_spection {
  height: 30%;
  color: #fff;
}

.flex_spection {
  flex: 1;
  color: #fff;
}

.box_arch {
  display: flex;
  align-items: center;
  height: calc(100% - 40px);
}

.image_tubbiness {
  position: relative;
  flex: none;
  width: 200px;
  height: 220px;
  background: url("@/assets/images/tubbiness.png");
  background-size: 80% 80%;
  background-position: center center;
  background-repeat: no-repeat;

  .work_num {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgb(84, 218, 250);
    font-size: 20px;

    span {
      font-size: 14px;
      color: rgb(158, 174, 195);
    }
  }

  .work_title {
    position: absolute;
    bottom: 43px;
    left: 0px;
    right: 0px;
    text-align: center;
  }
}

.right_content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  .work_week {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    color: #fff;

    span {
      padding-right: 10px;
      font-size: 16px;
      color: rgb(214, 218, 222);
    }
  }
}

.color_line_xj {
  width: 6px;
  height: 6px;
  margin-right: 10px;
}
</style>
<style lang="scss" scoped>
.point_box :deep(.el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
}

.point_box :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset !important;
}

.point_box :deep(.el-input__inner) {
  color: #ffffff !important;
}
</style>