<template>
  <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff] mt-16rpx">
    <text class="text-[32rpx] font-semibold text-[#333]">就业方向</text>
    <text class="text-[26rpx] font-normal text-[#636363] my-[20rpx] line-clamp-3 line-height-[1.6]">
      {{ careerInfo.jobs || '暂无' }}
    </text>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
      @click="handleFullFun(1)"
      v-if="careerInfo.jobs.length > 0"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>
  <view class="h-[16rpx] bg-[#f8f8f8]"></view>
  <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff]">
    <text class="text-[32rpx] font-semibold text-[#333]">具体职位</text>
    <text class="text-[26rpx] font-normal text-[#636363] my-[20rpx] line-clamp-3 line-height-[1.6]">
      {{ careerInfo.profession || '暂无' }}
    </text>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
      @click="handleFullFun(2)"
      v-if="careerInfo.profession.length > 0"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>
  </view>

  <view class="h-[16rpx] bg-[#f8f8f8]"></view>

  <view class="flex flex-col py-[32rpx] px-[24rpx] bg-[#fff]">
    <text class="text-[32rpx] font-semibold text-[#333]">从事行业</text>
    <view class="my-[24rpx] flex flex-col gap-[30rpx]">
      <view v-for="item in careerInfo.rates" :key="item.key" class="grid grid-cols-12 items-center">
        <text class="col-span-4 text-[24rpx]">{{ item.key }}</text>
        <ProgressBar :progress="item.value ?? 0" class="col-span-6 h-[16rpx]" />
        <text class="col-span-2 text-end">{{ item.value ?? 0 }}%</text>
      </view>
    </view>
  </view>

  <ActionSheet v-model:show="show" :title="title" :show-close="true">
    <view
      class="mx-[32rpx] mt-[32rpx] text-[24rpx] text-[#636363] line-height-[1.6]"
      v-show="showType !== 3"
    >
      {{ innerContent }}
    </view>
  </ActionSheet>
</template>

<script lang="ts" setup>
import { getCareerProspects } from '@/service/index/api'
import ProgressBar from '../../components/ProgressBar.vue'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

const props = defineProps({
  zydm: {
    type: String,
    default: '',
  },
})

const careerInfo = ref<{
  jobs: string
  profession: string
  rates: { key: string; value: string }[]
}>({
  jobs: '',
  profession: '',
  rates: [],
})

watch(
  () => props.zydm,
  (newV) => {
    getCareerProspects({ zydm: newV }).then((resp) => {
      if (resp.code === 200) {
        careerInfo.value = resp.result as {
          jobs: string
          profession: string
          rates: { key: string; value: string }[]
        }
      }
    })
  },
)

const show = ref(false)
const title = ref('')
const innerContent = ref('')
const showType = ref(1)

const handleFullFun = (type: number) => {
  show.value = true
  showType.value = type
  if (type === 1) {
    innerContent.value = careerInfo.value.jobs
    title.value = '就业方向'
  } else if (type === 2) {
    innerContent.value = careerInfo.value.profession
    title.value = '具体职位'
  } else if (type === 3) {
  }
}
</script>
