<!--
 * 疫情防控
  -->
<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,
} 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',
    },
    legend: {
      data: [
        '本土感染者',
        '省内感染者',
        '外省来（返）蓉感染者',
        '境外输入感染者',
      ],
      show: false,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: 40,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: X_DATA,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '本土感染者',
        type: 'line',
        data: LOCAL_INFECTED,
        itemStyle: {
          color: '#E8110F',
        },
      },
      {
        name: '省内感染者',
        type: 'line',
        data: PROVINCE_INNER_INFECTED,
        itemStyle: {
          color: '#FBC723',
        },
      },
      {
        name: '外省来（返）蓉感染者',
        type: 'line',
        data: PROVINCE_OUT_INFECTED,
        itemStyle: {
          color: '#1B6AA5',
        },
      },

      {
        name: '境外输入感染者',
        type: 'line',
        data: OFFSHORE_INPUT_INFECTED,
        itemStyle: {
          color: '#333333',
        },
      },
    ],
  };

  chartMain.setOption(option);
}
</script>
<template>
  <div>
    <div class="title">
      成都市新冠疫情 {{ X_DATA[X_DATA.length - 1] }} 新增情况
    </div>
    <div class="single-box">
      <div class="single" style="color: #e8110f">
        <div class="single-label">本土感染者</div>
        <div class="single-value">
          + {{ LOCAL_INFECTED[LOCAL_INFECTED.length - 1] }}
        </div>
      </div>
      <div class="single" style="color: #fbc723">
        <div class="single-label">省内感染者</div>
        <div class="single-value">
          + {{ PROVINCE_INNER_INFECTED[PROVINCE_INNER_INFECTED.length - 1] }}
        </div>
      </div>
      <div class="single" style="color: #1b6aa5">
        <div class="single-label">外省来（返）蓉感染者</div>
        <div class="single-value">
          + {{ PROVINCE_OUT_INFECTED[PROVINCE_OUT_INFECTED.length - 1] }}
        </div>
      </div>
      <div class="single" style="color: #333333">
        <div class="single-label">境外输入感染者</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"
        style="width: 1400px; height: 700px"
      ></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  text-align: center;
  margin: $padding-md auto;
  font-size: 26px;
  color: #414141;
}
.content {
  display: flex;
  justify-content: center;
}
.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>
