<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '保障',
  },
}
</route>
<template>
  <view class="invest-page">
    <NavBar />
    <view class="py-20 flex flex-col mx-15 rounded-20 main-content text-white">
      <view class="text-14 pl-15">保险概览</view>
      <view class="flex mt-30">
        <view class="flex-1 text-center">
          <view class="text-14">全部</view>
          <view class="text-16 font-bold mt-15">
            {{ userStore.userInfo?.yanglao + userStore.userInfo?.yiliao }}份
          </view>
        </view>
        <view class="flex-1 text-center">
          <view class="text-14">养老</view>
          <view class="text-16 font-bold mt-15">{{ userStore.userInfo?.yanglao }}份</view>
        </view>
        <view class="flex-1 text-center">
          <view class="text-14">医疗</view>
          <view class="text-16 font-bold mt-15">{{ userStore.userInfo?.yiliao }}份</view>
        </view>
      </view>
    </view>

    <view class="flex p-15 mt-15">
      <view
        v-for="item in tabList"
        :key="item.value"
        class="px-24 mr-15 bg-#DEEBFF text-#3B81F3 py-4 rounded-full text-14"
        :class="{ 'btn-gradient text-white': item.value === tabValue }"
        @click="tabValue = item.value"
      >
        {{ item.title }}
      </view>
    </view>

    <view>
      <template v-if="tabValue === 1">
        <view
          v-for="item in investmentList"
          :key="item.id"
          class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
        >
          <view class="flex">
            <image
              class="rounded-10 w-100 h-100"
              mode="aspectFill"
              :src="getImageUrl(item.leftimage)"
            />
            <view class="flex-1 ml-15">
              <view class="text-15 text-#333 font-bold">{{ item.name }}</view>
              <view class="w-200 flex flex-wrap items-center mt-5">
                <view
                  class="px-14 mr-5 mb-5 py-2 whitespace-nowrap text-12 text-#D6A165 rounded-2 bg-#FFEBD4"
                  v-for="(tag, index) in item.labeltag.split(',')"
                  :key="tag"
                  :class="{
                    '!text-#3B81F3 !bg-#D4E8FF': index % 2 === 1,
                  }"
                >
                  {{ tag }}
                </view>
              </view>
              <view class="text-12 mt-15 text-#999" v-html="item.content"></view>
            </view>
          </view>
          <view class="flex items-center mt-15">
            <view class="flex-1 text-center">
              <view class="text-15 text-#FF3B30">{{ item.dividend }}(%)</view>
              <view class="text-14 text-#999">日收益</view>
            </view>
            <view class="text-#D9D9D9">|</view>
            <view class="flex-1 text-center">
              <view class="text-15 text-#FF3B30">{{ item.days }}(天)</view>
              <view class="text-14 text-#999">周期</view>
            </view>
          </view>
          <view
            class="mt-15 px-30 text-center text-15 text-white rounded-full py-8 btn-gradient"
            @click="onInvest(item)"
          >
            购买（{{ item.money }}元）
          </view>
        </view>
      </template>

      <template v-else>
        <view
          v-for="item in investmentList"
          :key="item.id"
          class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
        >
          <view class="flex">
            <image
              class="rounded-10 w-100 h-100"
              mode="aspectFill"
              :src="getImageUrl(item.leftimage)"
            />
            <view class="flex-1 ml-15">
              <view class="text-15 text-#333 font-bold">{{ item.name }}</view>
              <view class="text-12 mt-15 text-#999" v-html="item.content" />
            </view>
          </view>
          <view
            class="text-center text-15 text-white rounded-full py-8 border-#3B81F3 border-1 border-solid mt-15"
          >
            <text class="text-gradient" @click="onShowRights(item)">查看权益</text>
          </view>
          <view
            class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15"
            @click="onInvest(item)"
          >
            我要投保（{{ item.money }}元）
          </view>
        </view>
      </template>
    </view>
    <wd-popup
      v-model="showRightConfig.show"
      :title="`${showRightConfig.data?.name}权益`"
      custom-style="border-radius: 15px"
    >
      <view>
        <image
          class="w-345 h-345"
          :src="getImageUrl(showRightConfig.data?.rightimage)"
          mode="widthFix"
        />
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import AlipayIcon from '@/static/images/invest/alipay-icon.png'
import WechatIcon from '@/static/images/invest/wechat-icon.png'
import UnionpayIcon from '@/static/images/invest/unionpay-icon.png'
import { getInvestmentListAPI, submitInvestAPI } from '@/service'
import { useUserStore } from '@/store'
import { getImageUrl, mergeStep, showModal } from '@/utils'

defineOptions({
  name: 'Home',
})

const tabList = [
  {
    value: 1,
    title: '养老',
  },
  {
    value: 2,
    title: '医疗',
  },
]
const tabValue = ref(1)

const { list: investmentList, onReload } = useListPageRequest((params) =>
  getInvestmentListAPI({
    ...params,
    type: tabValue.value,
  }),
)

watch(
  () => tabValue.value,
  () => {
    onReload()
  },
)

const userStore = useUserStore()

const onGoInvestDetail = () => {
  uni.navigateTo({
    url: '/pages-sub/invest-detail/index',
  })
}

const showRightConfig = ref({
  show: false,
  data: null,
})
watch(
  () => showRightConfig.value.show,
  (val) => {
    if (!val) {
      showRightConfig.value.data = null
    }
  },
)
const onShowRights = (item: any) => {
  showRightConfig.value = {
    show: true,
    data: item,
  }
}

const onInvest = mergeStep(async (item: any) => {
  try {
    uni.showLoading()
    await submitInvestAPI({
      investid: item.id,
      type: 3,
    })
  } catch (error) {
    if (error?.data?.msg.includes('邀请')) {
      return uni.switchTab({
        url: '/pages/invite/index',
      })
    }
    return
  } finally {
    uni.hideLoading()
  }
  await userStore.loadUserInfo()
  uni.showToast({
    title: '投保成功',
    icon: 'none',
  })
})
</script>

<style scoped>
.invest-page {
  min-height: 100vh;
  padding-bottom: 100px;
  background-image: url('@/static/images/home/bg.jpg');
  background-position: top;
  background-size: cover;
}
.main-content {
  background: linear-gradient(90deg, #71a4f8 0%, #3b81f3 103.83%);
}
.bg-blue-red {
  background-image: linear-gradient(90.02deg, #8bb9ff 0.02%, #be4343 100.27%);
}
.text-blue-red {
  background-image: linear-gradient(90.02deg, #8bb9ff 0.02%, #be4343 100.27%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
