<template>
    <div class="top-middle-cmp">
        <div class="chart-name">
            {{ props.dataInfo.reportName }}<br />(今日：{{ indays }})
            <dv-decoration-3 style="width:200px;height:20px;" />
        </div>
        <dv-charts :option="option" />
    </div>
</template>
  
<script setup name='TopMiddleCmp' lang="ts">
import { reactive, onUpdated, ref, Ref, nextTick } from 'vue'
import { getDayAgo } from '../../../utils/date'

const props = defineProps({
    dataInfo: {
        type: Object,
        default: {}
    }
})

const indays = ref('')

const day7Ago = reactive([
    getDayAgo(-6, '/', 0), 
    getDayAgo(-5, '/', 0), 
    getDayAgo(-4, '/', 0), 
    getDayAgo(-3, '/', 0), 
    getDayAgo(-2, '/', 0), 
    getDayAgo(-1, '/', 0), 
    getDayAgo(0, '/', 0), 
])

interface dataType {
    x: string,
    y: string
}

const dataArrX: Ref<Array<any>> = ref([])
const dataArrY: Ref<Array<any>> = ref([])

let option = ref({
    legend: {
        data: [''],
        textStyle: {
            fill: '#fff'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    xAxis: {
        data: day7Ago as Array<any>,
        boundaryGap: false,
        axisLine: {
            style: {
                stroke: '#999'
            }
        },
        axisLabel: {
            style: {
                fill: '#999'
            }
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        data: 'value',
        splitLine: {
            show: false
        },
        axisLine: {
            style: {
                stroke: '#999'
            }
        },
        axisLabel: {
            style: {
                fill: '#999'
            },
            formatter(val: any) {
                return Number.isNaN(val.value) ? 0 : val.value.toFixed(2)
            }
        },
        axisTick: {
            show: false
        },
        min: 0,
        // max: 1000,
    },
    series: [
        {
            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
            type: 'line',
            name: '',
            label: {
                show: true
            },
            smooth: true,
            lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
            },
            linePoint: {
                radius: 4,
                style: {
                    fill: '#00db95'
                }
            }
        }
    ]
})

onUpdated(async () => {
    dataArrX.value = []
    dataArrY.value = []

    let unit = props.dataInfo.unit
    await nextTick(() => {
        if (props.dataInfo.dataList) {
            props.dataInfo.dataList.forEach((e: dataType) => {
                dataArrX.value.push(e.x)
                dataArrY.value.push(e.y)
            })

            option.value.legend.data[0] = props.dataInfo.reportName
            option.value.xAxis.data = dataArrX.value
            option.value.series[0].data = dataArrY.value
            option.value.series[0].name = props.dataInfo.reportName

            indays.value = props.dataInfo.dataList[props.dataInfo.dataList.length - 1].y + unit
        }
    })

})

</script>
  
<style lang="scss">
.top-middle-cmp {
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
    display: flexbox;

    .chart-name {
        position: absolute;
        right: 70px;
        text-align: right;
        font-size: 20px;
        top: 10px;
    }
}
</style>