<template>
  <div class="cart-item">
    <slot name="title" />
    <v-chart :option="option" :init-options="{ height: 400 }" autoresize style="width: 100%; height: 100%" />

    <!-- <el-empty :image="emptyImg" v-show="!option.dataset.some((item) => item.source && item.source.length > 0)">
      <template v-slot:description>&nbsp;</template>
    </el-empty> -->
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
  import { IStatisticsDayNHour } from '../api/common'
  import emptyImg from '@/assets/icon/null.png'
  import { IPointTarget } from '../../configuration/api/common'

  const toFixed2 = (num: number | string) => Math.floor(Number(num) * 100) / 100

  const toXAxis = (dateStr: string) => {
    const [date, time] = String(dateStr).split(' ')
    if (!time) return dateStr
    return `${date} ${time.length === 1 ? '0' : ''}${time}:00`
  }

  @Component({ name: 'DayAndHourChart' })
  export default class DayAndHourChart extends Vue {
    @Prop({ type: String }) title!: string
    @Prop({ type: Object, default: () => ({}) }) data!: IStatisticsDayNHour
    @Prop({ type: Array, default: () => [] }) standards!: IPointTarget['showVos']
    @Prop({ type: String, default: 'rfallTotal' }) rainfallKey!: keyof IStatisticsDayNHour['rainFallVos'][0]
    emptyImg = emptyImg

    getCodeName(code) {
      const { targetName } = this.standards.find((item) => item.targetCode === code) || {}
      return targetName || code
    }

    get option() {
      const { datas = [], rainFallVos = [] } = this.data
      const dataset = [
        {
          id: 'rainfall',
          source: (rainFallVos || [])
            .filter((item) => item[this.rainfallKey] !== null || item[this.rainfallKey] !== undefined)
            .map(({ xposition, [this.rainfallKey]: val }) => {
              return {
                xposition: toXAxis(xposition),
                [this.rainfallKey]: toFixed2(val)
              }
            })
        },
        ...datas.map(({ checkCode, statisticalData }) => ({
          id: checkCode,
          source: statisticalData.map(({ avgValue, maxValue, minValue, xposition }) => {
            return {
              avgValue: toFixed2(avgValue),
              maxValue: toFixed2(maxValue),
              minValue: toFixed2(minValue),
              xposition: toXAxis(xposition)
            }
          })
        }))
      ].map((item) => ({ ...item, source: item.source.sort((a, b) => a.xposition.localeCompare(b.xposition)) }))
      const series = dataset
        .map(({ id }, index) => {
          return index === 0
            ? {
                name: '降雨量',
                dimensions: ['xposition', this.rainfallKey],
                datasetIndex: index,
                // type: 'line',
                // symbol: 'circle',
                // smooth: true,
                type: 'bar',
                barMaxWidth: 30,
                yAxisIndex: 1
              }
            : [
                { name: 'maxValue', displayName: '最大值' },
                { name: 'avgValue', displayName: '平均值' },
                { name: 'minValue', displayName: '最小值' }
              ].map((item, typeIndex) => {
                return {
                  name: `${this.getCodeName(id)}-${item.displayName}`,
                  dimensions: ['xposition', item],
                  datasetIndex: index,
                  type: 'line',
                  symbol: { '0': 'emptyCircle', '1': 'rect', '2': 'triangle' }[String(typeIndex)],
                  smooth: true,
                  yAxisIndex: 0
                }
              })
        })
        .flat()

      return {
        tooltip: { trigger: 'axis' },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              ...new Set(
                dataset.map((item) => (item.source as { xposition: string }[]).map((item) => item.xposition)).flat()
              )
            ].sort((a, b) => a.localeCompare(b))
          }
        ],
        yAxis: [
          { type: 'value', boundaryGap: false, offset: 15 },
          {
            type: 'value',
            boundaryGap: false,
            inverse: true,
            alignTicks: true,
            position: 'right',
            name: '降雨量',
            nameLocation: 'start',
            offset: 15
          }
        ],
        dataZoom: dataset.some(({ source }) => source.length > 100) && [
          { type: 'inside', start: 0, end: 100 },
          { start: 0, end: 100 }
        ],
        legend: { show: true, type: 'scroll', width: '80%' },
        grid: { top: 45, left: 50, right: 50, bottom: 45, containLabel: true },
        toolbox: { show: true, feature: { saveAsImage: { show: true } } },
        dataset,
        series
      }
    }
  }
</script>

<style lang="scss"></style>
