<template>
  <view class="w-full h-[200px]">
    <ie-echart :option="options" />
  </view>
</template>
<script lang="ts" setup>
import IeEchart from '@/pagesOther/components/ie-echart/ie-echart.vue';
import { Career } from '@/types';

const props = defineProps({
  data: {
    type: Object as PropType<Career.CareerJobDetail>,
    default: () => ({})
  },
  type: {
    type: String as PropType<'trend' | 'distribution'>,
    default: 'trend'
  }
});
const options = computed(() => {
  const data = props.type === 'trend' ? props.data.experience : props.data.citySalary;
  const xAxisData = data.map(item => {
    return props.type === 'trend' ? (item as Career.CareerJobExperience).year : (item as Career.CareerJobSalary).city;
  });
  const seriesData = data.map(item => {
    return props.type === 'trend' ? (item as Career.CareerJobExperience).salary : (item as Career.CareerJobSalary).salary;
  });
  return {
    title: {
      show: false
    },
    tooltip: {
      trigger: 'axis',
      confine: true,
    },
    legend: {
      show: false
    },
    grid: {
      top: '10%',
      left: '1%',
      right: '2%',
      bottom: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#333'
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: '#333'
        }
      },
      axisLabel: {
        interval: 0,
        rotate: 25,
        textStyle: {
          color: '#333',
          fontSize: 10
        }
      }
    },
    yAxis: {
      type: 'value',
      title: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#333',
          fontSize: 10
        }
      },
      splitLine: {
        show: true
      }
    },
    series: [
      {
        name: '薪资情况',
        type: 'line',
        smooth: true,
        title: {
          show: false
        },
        data: seriesData,
        itemStyle: {
          color: '#65dc79'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#65dc79' },
              { offset: 1, color: '#fff' }
            ]
          }
        }
      }
    ]
  };

});
</script>
<style lang="scss" scoped></style>