<!--
 * 疫情防控
  -->
<script lang="ts">
export default {
  name: 'PAGE7',
};
</script>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {
  X_DATA,
  LOCAL_INFECTED,
  PROVINCE_INNER_INFECTED,
  PROVINCE_OUT_INFECTED,
  OFFSHORE_INPUT_INFECTED,
  LABEL_DATA,
  COLOR_LIST,
} from './config';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

var chartMain;
const chartMainRef = ref<any>(null);

onMounted(() => {
  initDom();
  let abc = false;
  let type = Object.prototype.toString.call(abc);
  console.log(type);
});

function initDom() {
  chartMain = echarts.init(chartMainRef.value);
  const option: EChartsOption = {
    tooltip: {
      trigger: 'axis',
    },
    color: COLOR_LIST,
    legend: {
      data: LABEL_DATA,
      show: true,
    },
    grid: {
      left: 80,
      right: 100,
      bottom: 80,
      top: 40,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: X_DATA,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: LABEL_DATA[0],
        type: 'line',
        data: LOCAL_INFECTED,
      },
      {
        name: LABEL_DATA[1],
        type: 'line',
        data: PROVINCE_INNER_INFECTED,
      },
      {
        name: LABEL_DATA[2],
        type: 'line',
        data: PROVINCE_OUT_INFECTED,
      },

      {
        name: LABEL_DATA[3],
        type: 'line',
        data: OFFSHORE_INPUT_INFECTED,
      },
    ],
  };

  chartMain.setOption(option);
}
</script>
<template>
  <div class="box container-height">
    <div class="title">
      成都市新冠疫情 {{ X_DATA[X_DATA.length - 1] }} 新增情况
    </div>
    <div class="single-box">
      <div class="single" :style="{ color: COLOR_LIST[0] }">
        <div class="single-label">{{ LABEL_DATA[0] }}</div>
        <div class="single-value">
          + {{ LOCAL_INFECTED[LOCAL_INFECTED.length - 1] }}
        </div>
      </div>
      <div class="single" :style="{ color: COLOR_LIST[1] }">
        <div class="single-label">{{ LABEL_DATA[1] }}</div>
        <div class="single-value">
          + {{ PROVINCE_INNER_INFECTED[PROVINCE_INNER_INFECTED.length - 1] }}
        </div>
      </div>
      <div class="single" :style="{ color: COLOR_LIST[2] }">
        <div class="single-label">{{ LABEL_DATA[2] }}</div>
        <div class="single-value">
          + {{ PROVINCE_OUT_INFECTED[PROVINCE_OUT_INFECTED.length - 1] }}
        </div>
      </div>
      <div class="single" :style="{ color: COLOR_LIST[3] }">
        <div class="single-label">{{ LABEL_DATA[3] }}</div>
        <div class="single-value">
          + {{ OFFSHORE_INPUT_INFECTED[OFFSHORE_INPUT_INFECTED.length - 1] }}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="chart-main" ref="chartMainRef"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.title {
  text-align: center;
  margin: $padding-md auto;
  font-size: 26px;
  color: #414141;
}
.content {
  display: flex;
  justify-content: center;
  flex: 1;
  .chart-main {
    flex: 1;
  }
}
.single-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: $padding-md;
  margin-bottom: 0;
}
.single {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 14px;
  .single-label {
    font-size: 12px;
  }
  .single-value {
    font-size: 20px;
  }
}
</style>