<template>
  <div class="sub_title" style="margin-bottom: 0px">完成任务</div>
  <div style="height: 150px;" id="complete-task-num"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, defineProps, watch } from "vue"
import * as echarts from 'echarts';
import { GetCompleteTaskList } from '@/api/demo/taskhall'

const props = defineProps(['getValueType'])

watch(() => props.getValueType, () => {
  getValue()
})

let myChart:any = {}
const dayList = ref([])
const valueList = ref([])

onMounted(() => {
  let chartDom = document.getElementById('complete-task-num');
  myChart = echarts.init(chartDom)
  getValue()
})

const getValue = () => {
  GetCompleteTaskList().then(res => {
    dayList.value = res.map(item => {
      return item.time.slice(5,10).split('-').join('.')
    })
    valueList.value = res.map(item => {
      return item.count
    })
    setChartsOptions()
  })
}

onBeforeUnmount(() => {
  myChart.dispose();
})

const setChartsOptions = () => {
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: dayList.value,
      axisTick:{
        show: false
      },
      axisLine:{
        lineStyle:{
          color: '#0095FF',
        }
      },
      axisLabel:{
        interval: 1,
        margin: 9,
        color: '#FFFFFF',
        fontFamily: 'DINPro',
        fontSize: 12,
        fontWeight: 500,
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: ['#0095FF'],
          opacity: 0.3,
        },
        width: 1,

      },
      axisLabel:{
        color: '#8FADCC',
        fontFamily: 'DINPro',
        fontSize: 12,
      }
    },
    series: [
      {
        data: valueList.value,
        type: 'bar',
        itemStyle:{
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#7FB5FF' },
            { offset: 1, color: '#006AFF' }
          ])
        }
      }
    ],
    grid:{ // 让图表占满容器
      top:"20px",
      left:"30px",
      right:"10px",
      bottom:"20px"
    }
  })
}
</script>

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