<template>
  <div class="passenger_flow">
    <div class="left_passenger_flow">
      <div class="flex_spection">
        <HeadlineTag value="客流监控"></HeadlineTag>
        <div class="box_arch">
          <monitoring></monitoring>
        </div>
      </div>
      <div class="flex_spection">
        <HeadlineTag value="安全监控"></HeadlineTag>
        <div class="box_arch">
          <security></security>
        </div>
      </div>
      <div class="flex_spection">
        <HeadlineTag value="实时预警信息"></HeadlineTag>
        <div class="box_arch">
          <earlyWarning></earlyWarning>
        </div>
      </div>
    </div>
    <div class="right_passenger_flow">
      <div class="flex_spection">
        <HeadlineTag type="right" value="指标区客流排行榜"></HeadlineTag>
        <div class="box_arch">
          <district></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">
        <HeadlineTag type="right" value="安全事件列表"></HeadlineTag>
        <div class="box_arch">
          <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeadlineTag from '@/components/HeadlineTag'
import monitoring from './monitoring'
import earlyWarning from './earlyWarning'
import security from './security'
import district from './district'
import * as echarts from 'echarts'
const chartFlow = ref(null);
let chartInstanceWater = null;
const config = ref({
  headerBGC: '#10285c',
  oddRowBGC: '#10285c7f',
  evenRowBGC: '#10285c00',
  header: ['名称', '位置', '列3'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ]
})
const initChart = () => {
  let list = [
    { name: "男性", value: 88 },
    { name: "女性", value: 75 },
    { name: "新老客", value: 66 }
  ]
  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(() => {
  initChart()
});
// 窗口自适应
window.addEventListener('resize', () => {
  chartInstanceWater?.resize();
});
</script>

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

.left_passenger_flow {
  position: absolute;
  left: 0;
  width: 25%;
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}

.right_passenger_flow {
  position: absolute;
  right: 0;
  width: 25%;
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
}

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

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