<script setup>
import ChartCard from '@/components/ChartCard.vue'
import { getMemberAttrs } from '../api'
import { useMetaAttr } from '../composables/useMetaAttr'

const props = defineProps({ ssoId: String })

const { metaAttrList, metaAttrValue } = useMetaAttr()

const loading = ref(false)
const attrs = ref([])
async function fetchAttrs() {
  if (!props.ssoId || !metaAttrValue.value) return
  loading.value = true
  try {
    const res = await getMemberAttrs({ sso_id: props.ssoId, member_meta_id: metaAttrValue.value })
    attrs.value = res.data.items.map(item => {
      return { name: item.group_name, value: item.total }
    })
  } finally {
    loading.value = false
  }
}
watchEffect(() => {
  fetchAttrs()
})

const chartTypeList = [
  { value: 1, label: '柱状图' },
  { value: 2, label: '线状图' },
  { value: 3, label: '面积图' },
  { value: 4, label: '饼状图' },
  { value: 5, label: '环形图' }
]
const chartType = ref(1)

const options = computed(() => {
  if (!attrs.value.length) return
  if (chartType.value === 1) {
    // 柱状图
    return {
      grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'category',
        data: attrs.value.map(item => item.name)
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '用户',
          type: 'bar',
          label: { show: true, position: 'top' },
          data: attrs.value.map(item => item.value)
        }
      ]
    }
  } else if (chartType.value === 2) {
    // 线状图
    return {
      grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'category',
        data: attrs.value.map(item => item.name)
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '用户',
          type: 'line',
          label: { show: true, position: 'top' },
          data: attrs.value.map(item => item.value)
        }
      ]
    }
  } else if (chartType.value === 3) {
    // 面积图
    return {
      grid: { left: '5%', top: '10%', right: '5%', bottom: '5%', containLabel: true },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: attrs.value.map(item => item.name)
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '用户',
          type: 'line',
          areaStyle: {},
          label: { show: true, position: 'top' },
          data: attrs.value.map(item => item.value)
        }
      ]
    }
  } else if (chartType.value === 4) {
    return {
      tooltip: { trigger: 'item', formatter: '{b}: {c}<br />{d}%' },
      series: [
        {
          type: 'pie',
          label: { formatter: '{b}\n{d}%' },
          itemStyle: { borderRadius: 6 },
          radius: [0, '70%'],
          data: attrs.value
        }
      ]
    }
  } else {
    return {
      tooltip: { trigger: 'item', formatter: '{b}: {c}<br />{d}%' },
      series: [
        {
          type: 'pie',
          label: { formatter: '{b}\n{d}%' },
          itemStyle: { borderRadius: 6 },
          radius: ['40%', '70%'],
          data: attrs.value
        }
      ]
    }
  }
})
</script>

<template>
  <ChartCard :options="options" :loading="loading">
    <template #title>
      <el-row justify="space-between" style="flex: 1">
        <el-select v-model="metaAttrValue" filterable style="width: 200px">
          <el-option v-for="item in metaAttrList" :label="item.name" :value="item.id" :key="item.id"></el-option>
        </el-select>
        <el-select v-model="chartType" style="width: 86px">
          <el-option v-for="item in chartTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-row>
    </template>
  </ChartCard>
</template>
