<template>
  <view>
    <view class="py-20">
      <uv-tabs :list="list" :current="current" :itemStyle="itemStyle" :customStyle="customStyle" lineColor="transparent"
        @change="handleChange">
        <template #default="{ data: { item, index } }">
          <view class="px-20 py-10 flex items-center flex-col justify-center transition-all duration-300"
            :class="[index === current ? 'bg-primary text-white' : 'bg-white']">
            <view class=" text-26">{{ item.name }}</view>
            <view class=" text-22">{{ item.salaryMin }}-{{ item.salaryMax }}{{ item.salaryUnit }}</view>
          </view>
        </template>
      </uv-tabs>
    </view>
    <view class="bg-white p-30">
      <view class="flex items-center justify-between">
        <span class="text-30 font-bold text-fore-title">薪资情况</span>
        <view class="w-240">
          <uv-subsection :list="section1" keyName="name" :current="currentSection1" @change="changeSection1" />
        </view>
      </view>
      <view class="min-h-[200px]">
        <salary-chart v-if="detail" :data="detail" :type="salaryType" />
      </view>
    </view>
    <view class="mt-20 bg-white p-30">
      <view class="flex items-center justify-between">
        <span class="text-30 font-bold text-fore-title">收入情况</span>
        <view class="w-240">
          <uv-subsection :list="section2" keyName="name" :current="currentSection2" @change="changeSection2" />
        </view>
      </view>
      <view class="min-h-[200px] mt-30">
        <view v-for="item in income" :key="item.name" class="flex items-center text-28 py-10">
          <text>{{ item.name }}</text>
          <view class="flex-1 mx-20">
            <uv-line dashed />
          </view>
          <text class="text-fore-content">¥{{ item.value }}</text>
        </view>
      </view>
    </view>
    <view class="mt-20 bg-white p-30">
      <view class="flex items-center justify-between">
        <span class="text-30 font-bold text-fore-title">就业情况</span>
        <view class="w-240">
          <uv-subsection :list="section3" keyName="name" :current="currentSection3" @change="changeSection3" />
        </view>
      </view>
      <view class="min-h-[200px]">
        <employment-chart v-if="detail" :data="detail" :type="employmentType" />
      </view>
    </view>
    <view class="mt-20 bg-white p-30">
      <view class="flex items-center gap-8">
        <uv-icon name="info-circle" size="16" color="#888" />
        <text class="text-28 text-fore-content">数据来源说明</text>
      </view>
      <view class="mt-20 text-24 text-fore-light">{{ detail?.salarySource }}</view>
      <view class="text-24 text-fore-light">{{ detail?.vocationalSource }}</view>
    </view>
    <ie-safe-area-bottom bg-color="#FFFFFF" />
  </view>
</template>
<script lang="ts" setup>
import SalaryChart from './salary-chart.vue';
import EmploymentChart from './employment-chart.vue';
import { Career } from '@/types';
import { getCareerJob, getCareerJobDetail } from '@/api/modules/career';

const props = defineProps<{
  code: string;
  name: string;
}>();
const itemStyle = {
  height: 'fit-content',
  padding: '0 10rpx !important',
}
const customStyle = {
  padding: '0 10rpx',
}

watch(() => props.name, (newVal) => {
  if (newVal) {
    const index = list.value.findIndex(item => item.name === newVal);
    getJobDetail(index);
    setTimeout(() => {
      nextTick(() => {
        current.value = index;
      });
    }, 350);
  }
});

const section1 = [
  {
    name: '按趋势',
    type: 'trend'
  },
  {
    name: '按分布',
    type: 'distribution'
  }
]
const section2 = [
  {
    name: '按行业',
    type: 'industry'
  },
  {
    name: '按城市',
    type: 'city'
  }
]
const section3 = [
  {
    name: '按学历',
    type: 'education'
  },
  {
    name: '按经验',
    type: 'experience'
  }
]
const current = ref(-1);
const currentSection1 = ref(0);
const currentSection2 = ref(0);
const currentSection3 = ref(0);
const list = ref<Career.CareerJob[]>([]);
const detail = ref<Career.CareerJobDetail | null>(null);
const salaryType = computed(() => section1[currentSection1.value].type as 'trend' | 'distribution');
const industryType = computed(() => section2[currentSection2.value].type as 'industry' | 'city');
const employmentType = computed(() => section3[currentSection3.value].type as 'education' | 'experience');
const income = computed(() => {
  if (industryType.value === 'industry') {
    return detail.value?.industrySalary.map(item => {
      return {
        name: item.name,
        value: item.salary
      }
    });
  } else {
    return detail.value?.citySalary.map(item => {
      return {
        name: item.city,
        value: item.salary
      }
    });
  }
})
const handleChange = (e: any) => {
  current.value = e.index;
  getJobDetail(e.index);
}
const changeSection1 = (index: number) => {
  currentSection1.value = index;
}
const changeSection2 = (index: number) => {
  currentSection2.value = index;
}
const changeSection3 = (index: number) => {
  currentSection3.value = index;
}
const getJobDetail = (index: number) => {
  uni.$ie.showLoading();
  const name = list.value[index].name;
  getCareerJobDetail(name).then(res => {
    detail.value = res.data;
  }).finally(() => uni.$ie.hideLoading());
}
const loadData = () => {
  getCareerJob(props.code).then(res => {
    list.value = res.data;
    current.value = 0;
    getJobDetail(0);
  });
}
onMounted(() => {
  loadData();
});
</script>
<style lang="scss" scoped></style>