<template>
  <uni-card title="近一年每月项目数量统计" margin="0px" padding="0px">
    <view style="height: 300px;">
      <LEchart ref="chartRef" style="width: 100%;height: 100%;" @touchstart="touchStart" @touchmove="touchMove"
        @touchend="touchEnd" />
    </view>
  </uni-card>
</template>

<script setup lang="ts">
import LEchart from '@/components/l-echart/l-echart.vue';
import { ref, watch, nextTick, onMounted } from 'vue'
import {
  endOfYear,
  format,
  startOfYear,
  eachMonthOfInterval
} from 'date-fns'
import useChartOption from '@/hooks/chart-option'

import { getProjectMonthCountStat } from '@/api/dashboard/project';
// #ifdef MP
const echarts = require('./static/echarts.min')
// #endif

// #ifndef MP
// import * as echarts from 'echarts'
// #endif



const { mobile } = uni.getStorageSync('info_status')
const proxy = getCurrentInstance()?.proxy
const { $onLaunched } = proxy as any
const chartRef = ref()
const xAxisStat = ref<string[]>([])
const totalCount = ref<number[]>([])
const undoneCount = ref<number[]>([])
const initData = async (data: any) => {
  await nextTick()
  if (chartRef.value) {
    const myChart = await chartRef.value?.init(echarts)
    myChart.setOption(data)
  }
}




const { chartOption } = useChartOption(() => {
  return {
    animation: false,
    grid: {
      right: 0,
      top: '20',
      bottom: '60'
    },
    legend: {
      bottom: 0,
      icon: 'circle',
      textStyle: {
        color: '#4E5969'
      }
    },
    xAxis: {
      type: 'category',
      data: xAxisStat.value,
      axisLine: {
        lineStyle: {
          color: '#A9AEB8'
        }
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
        lineStyle: {
          color: '#86909C'
        }
      },
      axisLabel: {
        color: '#86909C'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#86909C',
        formatter(value: number, idx: number) {
          if (idx === 0) return `${value}`
          return `${value}个`
        }
      },
      splitLine: {
        lineStyle: {
          color: '#E5E6EB'
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      confine: true
    },
    series: [
      {
        name: '总数',
        data: totalCount.value,
        type: 'bar',
        barWidth: 10,
        color: '#246EFF'
      },
      {
        name: '未完成',
        data: undoneCount.value,
        barWidth: 10,
        type: 'bar',
        color: '#ff7d00'
      }
    ]
  }
})

const getDataStat = async () => {
  const beginAt = startOfYear(new Date())
  const endAt = endOfYear(new Date())
  const xValue = eachMonthOfInterval({
    start: beginAt,
    end: endAt
  }).map(item => {
    return format(item, 'yyyy-MM')
  })
  await $onLaunched
  if(!mobile){
            return
        }
  const { list } = await getProjectMonthCountStat({
    begin_at: format(beginAt, 'yyyy-MM'),
    end_at: format(endAt, 'yyyy-MM')
  })
  xAxisStat.value = xValue
  xValue.map(item => {
    const data = list.find(l => l.ts === item)
    if (data) {
      totalCount.value.push(data.amount)
      undoneCount.value.push(data.undone)
    } else {
      totalCount.value.push(0)
      undoneCount.value.push(0)
    }
    return item
  })
}

onMounted(() => {
  getDataStat()
})

watch(
  () => chartOption.value,
  () => {
    initData(chartOption.value)
  },
  {
    flush: 'post',
    deep: true
  }
)

const touchStart = (e: any) => {
  chartRef.value?.touchStart(e)
}

const touchMove = (e: any) => {
  chartRef.value?.touchMove(e)
}


const touchEnd = (e: any) => {
  chartRef.value?.touchEnd(e)
}
// watch(() => props.options, (newValue) => {
//   console.log(props.options)
//   initData(newValue)
// }, {
//   deep: true
// })

</script>

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