<template>
  <div class="passenger_flow">
    <layout>
      <template #left>
        <div class="left_passenger_flow">
          <div class="flex_spection">
            <HeadlineTag value="客流监控"></HeadlineTag>
            <div class="box_arch">
              <monitoring :resultData="leftData"></monitoring>
            </div>
          </div>
          <div class="flex_spection">
            <HeadlineTag value="安全监控等级"></HeadlineTag>
            <div class="box_arch">
              <security :resultData="leftData"></security>
            </div>
          </div>
          <div class="flex_spection">
            <HeadlineTag value="实时预警信息"></HeadlineTag>
            <div class="box_arch">
              <earlyWarning :resultData="leftData"></earlyWarning>
            </div>
          </div>
        </div>
      </template>
      <template #right>
        <div class="right_passenger_flow">
          <div class="flex_spection">
            <HeadlineTag type="right" value="指标区客流排行榜"></HeadlineTag>
            <div class="box_arch">
              <district :resultData="leftData"></district>
            </div>
          </div>
          <div class="flex_spection">
            <HeadlineTag type="right" value="客群分析统计"></HeadlineTag>
            <div class="box_arch">
              <div ref="chartFlow" style="width: 100%;height: 100%;" />
            </div>
          </div>
          <div class="flex_spection" style="height: 33%;">
            <HeadlineTag type="right" value="安全事件列表"></HeadlineTag>
            <div class="box_arch" v-if="leftData.Event && leftData.Event.length > 0">
              <incident :resultData="leftData.Event"></incident>
            </div>
            <Empty :bottom="true" v-else></Empty>
          </div>
        </div>
      </template>
    </layout>
  </div>
</template>

<script setup>
import { getPassenger } from "@/api/system/passenger"
import layout from "@/components/layout_/index.vue";
import HeadlineTag from '@/components/HeadlineTag'
import monitoring from './monitoring'
import earlyWarning from './earlyWarning'
import security from './security'
import district from './district'
import incident from './incident'
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted, watch } from 'vue';
import Empty from '@/components/Empty'
const chartFlow = ref(null);
let chartInstanceWater = null;
const initChart = (arrData) => {
  let list = arrData
  if (!chartInstanceWater) {
    chartInstanceWater = echarts.init(chartFlow.value);
  }
  chartInstanceWater.setOption({
    grid: {
      left: '10%',
      top: '10%',
      bottom: '10%',
      right: '10%',
    },
    xAxis: {
      show: true,
      axisLine: {
        show: true,
        symbol: ['none'],
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 14,
          fontWeight: 600,
          color: '#ffffff',
        },
      },
      axisTick: {
        show: false,
      },
      data: list.map(val => {
        return val.name
      })
    },
    yAxis: [{
      splitNumber: (123 % 5).toFixed(0),
      show: true,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 12,
          fontWeight: 600,
          color: '#ffffff'
        },
      },
      splitArea: {
        areaStyle: {
          color: 'rgba(255,255,255,.5)',
        },
      },
      splitLine: {
        show: false,
      }
    }],
    series: [{
      type: 'pictorialBar',
      barCategoryGap: '-20%',
      symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,5 C3.5,5 4.5,10 0,10 z',
      label: {
        show: true,
        position: 'top',
        distance: 10,
        color: '#ffffff',
        fontWeight: 'bolder',
        fontSize: 12,
      },
      itemStyle: {
        normal: {
          color: params => {
            const colorList = [{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#297ff2',
              },
              {
                offset: 1,
                color: '#cce7fc',
              },
              ]
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#3bfafe',
              },
              {
                offset: 1,
                color: '#aaf4fe',
              },
              ]
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#e08440',
              },
              {
                offset: 1,
                color: '#decabd',
              },
              ]
            }
            ];
            return colorList[params.dataIndex];
          },
          opacity: 0.7
        },
        // 鼠标移入柱子上 透明度变为 1
        emphasis: {
          opacity: 1,
        },
      },
      data: list.map(v => {
        return v.value
      })
      // data: [123, 60, 25]
    },],
  });
}
// 生命周期
onMounted(() => {
  intervalId.value = setInterval(getPassengerData, 10000);
  getPassengerData()
  let list = [
    { name: "男性", value: 0 },
    { name: "女性", value: 0 },
    { name: "新老客", value: 0 }
  ]
  initChart(list)
});
onUnmounted(() => {
  clearInterval(intervalId.value);
})
const intervalId = ref(null)
const leftData = ref({})
function getPassengerData() {
  getPassenger().then((res) => {
    if (res.code == 200) {
      leftData.value = res.data
    }
  })
}
watch(() => leftData.value, (newVal) => {
  if (chartInstanceWater) {
    let arr = newVal.Customers
    let result = Object.entries(arr).map(([name, value]) => ({ name, value }));
    initChart(result)
  }
}, { deep: true, immediate: true } // 开启深度监听
)
// 窗口自适应
window.addEventListener('resize', () => {
  chartInstanceWater?.resize();
});
</script>

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

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

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

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

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