<template>
  <view
    class="item-wrapper relative mt-[32rpx]"
    :style="`--start-color: ${startColor}; --end-color: ${endColor}`"
    @click="toAssessmentPage"
  >
    <view
      class="flag text-[22rpx] text-center absolute top-0 right-0"
      :class="{ free: item.isFree }"
    >
      {{ isFree ? '免费' : 'VIP' }}
    </view>
    <view class="flex items-stretch gap-[30rpx] justify-between">
      <view class="flex flex-col gap-[29rpx] mt-[16rpx]">
        <view class="text-[#333] text-[40rpx] font-semibold">{{ item.name }}</view>
        <view class="text-[24rpx] text-[#999] line-clamp-3">
          {{ item.summary }}
        </view>
      </view>

      <image
        :src="item.minImg"
        mode="scaleToFill"
        class="w-[240rpx] h-[240rpx] min-w-[240rpx] min-h-[240rpx]"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const props = defineProps({
  isFree: {
    type: Boolean,
    default: true,
  },
  item: {
    type: Object,
    default: () => {},
  },
  startColor: {
    type: String,
    default: '#e5f2fa',
  },
  endColor: {
    type: String,
    default: '#dae8fa',
  },
})

const toAssessmentPage = () => {
  if (!userStore.userInfo.openid) {
    uni.navigateTo({
      url: '/login-sub/index',
    })
    return
  }
  if (props.item.isFree) {
    uni.navigateTo({
      url: `/pages-sub/evaluation/assessmentPage?id=${props.item.id}&name=${props.item.name}`,
    })
  } else if (userStore.userInfo.estimatedAchievement.isVIP) {
    uni.navigateTo({
      url: `/pages-sub/evaluation/assessmentPage?id=${props.item.id}&name=${props.item.name}`,
    })
  } else {
    uni.showToast({
      title: '请先开通VIP',
      icon: 'none',
    })
  }
}
</script>

<style scoped lang="scss">
.item-wrapper {
  background: linear-gradient(90deg, var(--start-color) 0%, var(--end-color) 100%);
  border-radius: 18rpx;
  padding: 32rpx;

  .flag {
    width: 64rpx;
    height: 32rpx;

    border-radius: 0rpx 16rpx 0rpx 16rpx;
  }
  .free {
    background: linear-gradient(51deg, #00c3fc 0%, #00acf7 100%);
    color: #fff;
  }

  .vip {
    background: linear-gradient(229deg, #fab55e 0%, #ffeec3 100%);
    color: #663800;
  }
}
</style>
