<!--  -->
<template>
  <el-skeleton :loading="loading" animated>
    <el-card shadow="never">
      <template #header>
        <CardTitle title="职位类型发布数量Top10" />
      </template>
      <div>
        <Echart :height="400" :options="chartOptions" />
      </div>
    </el-card>      
  </el-skeleton>
</template>

<script lang="ts" setup>
defineOptions({name: 'JobTop10'})
import { EChartsOption } from 'echarts'
import { statisticAnalysisApi } from '@/api/menduner/system/analysis/statisticAnalysis'

const props = defineProps({
  queryParams: Object
})

const loading = ref(false)
const chartOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 0,
    bottom: 10,
    right: 40,
    top: 30,
    containLabel: true
  },
  xAxis: {
    type: 'value',
    name: '个'
  },
  yAxis: {
    type: 'category',
    name: '职位类型',
    data: []
  },
  series: [
    {
      data:  [],
      type: 'bar',
      // barWidth: 40,
      label: { show: true }
    }
  ]
}) as EChartsOption

const getData = async (queryParams: any) => {
  loading.value = true
  try {
    const data = await statisticAnalysisApi.getJobPositionTop({ ...queryParams, jobStatus: 0 })
    chartOptions.yAxis.data = data.x || []
    chartOptions.series![0].data = data.y || []
    if (data.y && data.y.length < 5) chartOptions.series![0].barWidth = 40
    else delete chartOptions.series![0].barWidth
  } catch (err) {
    console.log(err);
    loading.value = false
  } finally {
    loading.value = false
  }
}

watch(() => props.queryParams, (newVal) => {
  getData(newVal)
}, { immediate: true, deep: true })
</script>
