<template>
  <div>
    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
    <AnalysisChart shadow="always" :option="option" height="800" v-loading="loading"></AnalysisChart>
  </div>
</template>

<script>
import AnalysisChart from '@/components/Analysis/AnalysisChart'
import { dateFormat } from '@/utils/date'
export default {
  name: 'StatisticsCard',
  components: {
    AnalysisChart
  },
  props: {
    api: Function,
    assignFn: Function
  },
  data () {
    return {
      loading: false,
      option: {},
      searchItems: [
        {
          label: '月份',
          prop: 'month',
          type: 'datePicker',
          options: {
            placeholder: '请选择月份',
            clearable: false,
            type: 'month',
            valueFormat: 'yyyy-MM',
            format: 'yyyy 年 MM 月'
          }
        }
      ],
      searchValues: {
        month: dateFormat('YYYY-mm', new Date())
      }
    }
  },
  created () {
    this.onInit()
  },
  methods: {
    async onInit () {
      this.loading = true
      try {
        const { data } = await this.api({
          ...this.searchValues
        })
        if (this.assignFn) {
          this.option = this.assignFn(data)
          return
        }
        this.option = data
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      this.onInit()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
