<template>
  <view class="flex fld-c p15">
    <u-sticky>
      <view class="flex ai-c">
        <view v-for="(item, index) in vipAllList" :key="index" class="km-item" :class="{ actived: index == current }"
          @click="current = index">
          {{ getKmTitle(item.subjects) }}
        </view>
      </view>
    </u-sticky>
    <view class="mt15">
      <swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
        :disable-programmatic-animation="true" @change="onChange">
        <swiper-item v-for="(item, index) in vipAllList" :key="index">
          <view class="relative">
            <image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
            <view class="vip-info">
              <u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
              <view class="ml10">
                <view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
                  {{ item.memberName }}
                </view>
                <view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
                  {{ getExpireText(item) }}
                </view>
              </view>
            </view>
            <view v-if="vipHasOpened(item)" class="corner">
              VIP已开通
            </view>
            <view v-if="vipHasOpened(item)" class="renew">
              {{ item.price }}元立即续费
            </view>
            <view v-else class="buy">
              立即充值
            </view>
          </view>
        </swiper-item>
        <swiper-item>
        </swiper-item>
      </swiper>
    </view>
    <view class="mt20">
      <swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
        :disable-programmatic-animation="true" @change="onChange">
        <swiper-item v-for="(item, index) in vipAllList" :key="index">
          <view v-if="index == 0 || index == 3" class="p15 br8 cor-fff">
            <view class="fs18 cor-000 fwb">
              3步轻松学{{ getKmTitle(item.subjects) }}
            </view>
            <view class="mt25 flex ai-c jc-sb">
              <view class="flex ai-c">
                <image src="../../static/image/mine/1.png" mode="widthFix" style="width:25px;"></image>
                <view class="ml7">
                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
                    精简500题
                  </view>
                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
                    题目全部做对，视为完成
                  </view>
                </view>
              </view>
              <view class="study" @tap="to500(item)">
                去学习
              </view>
            </view>
            <view class="mt45 flex ai-c jc-sb">
              <view class="flex ai-c">
                <image src="../../static/image/mine/2.png" mode="widthFix" style="width:25px;"></image>
                <view class="ml7">
                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
                    真实考场模拟
                  </view>
                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
                    10次95分以上，视为完成
                  </view>
                </view>
              </view>
              <view class="study" @tap="toRealExam(item)">
                去学习
              </view>
            </view>
            <view class="mt45 flex ai-c jc-sb">
              <view class="flex ai-c">
                <image src="../../static/image/mine/3.png" mode="widthFix" style="width:25px;"></image>
                <view class="ml7">
                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
                    考前密卷
                  </view>
                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
                    2套试卷95分以上，视为完成
                  </view>
                </view>
              </view>
              <view class="study" @tap="toSpecExam(item)">
                去学习
              </view>
            </view>
          </view>
          <view v-else style="margin-top: 30rpx;">
            <view class="video-box">
              <view class="flex jc-sb ai-c wp100">
                <text style="color: #873E1D;font-size: 36rpx;">考场实况</text>
                <text class="cor-666 fs12">全部 ></text>
              </view>
              <view class="flex ai-c mt20">
                <image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image>
                <view class="ml18 text-center">
                  <u-button :customStyle="{ width: '200rpx', height: '66rpx', borderRadius: '33rpx' }" iconColor="#fff"
                    text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle" @click="toPlaceLive(item)">
                  </u-button>
                  <view class="cor-333 fs15 mt17">真实考场模拟</view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import useUserStore from '@/jtools/store/user'
export default {
  computed: {
    vipAllList() {
      return useUserStore().vipAllList.filter(it => [1, 2, 3, 4].includes(Number(it.subjects)))
    },
    vipOnList() {
      return useUserStore().vipOnList
    },

  },
  data() {
    return {
      current: 0
    }
  },
  methods: {
    onChange(e) {
      this.current = e.detail.current
    },
    getKmTitle(km) {
      return {
        '1': '科一',
        '2': '科二',
        '3': '科三',
        '4': '科四',
      }[km]
    },
    getExpireText(item) {
      const vipOn = this.vipOnList.find(it => it.memberId == item.memberId)
      if (vipOn) {
        return `${vipOn.endDate.split(' ')[0]}到期`
      } else {
        return '开通vip助您快速拿证'
      }
    },
    vipHasOpened(item) {
      return !!this.vipOnList.find(it => it.memberId == item.memberId)
    },
    // 去精选500题 item=> 当前科目vip信息
    to500(item) {
      // 当前vip是否已开通
      if (this.vipHasOpened(item)) {
        // 跳转
      } else {
        uni.showToast({
          title: `请先充值${this.getKmTitle(item.subjects)}vip`,
          icon: 'none'
        })
      }
    },
    // 去真实考场 item=> 当前科目vip信息
    toRealExam(item) {
      // 当前vip是否已开通
      if (this.vipHasOpened(item)) {
        // 跳转
      } else {
        uni.showToast({
          title: `请先充值${this.getKmTitle(item.subjects)}vip`,
          icon: 'none'
        })
      }
    },
    // 去秘卷 item=> 当前科目vip信息
    toSpecExam(item) {
      // 当前vip是否已开通
      if (this.vipHasOpened(item)) {
        // 跳转
      } else {
        uni.showToast({
          title: `请先充值${this.getKmTitle(item.subjects)}vip`,
          icon: 'none'
        })
      }
    },
    // 去考场实况 item=> 当前科目vip信息
    toPlaceLive(item) {
      // 当前vip是否已开通
      if (this.vipHasOpened(item)) {
        // 跳转
      } else {
        uni.showToast({
          title: `请先充值${this.getKmTitle(item.subjects)}vip`,
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.km-item {
  margin-right: 8px;
  width: 72px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #333;
  text-align: center;
  border-radius: 15px;
  border: 1px solid #CCCCCC;
}

.actived {
  background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
  color: #fff;
}

.km-item:last-of-type {
  margin-right: 0;
}

.vip-info {
  position: absolute;
  top: 15px;
  left: 10px;
  display: flex;
  align-items: center;
}

.corner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 77px;
  height: 23px;
  background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
  opacity: 0.86;
  border-radius: 0px 8px 0px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}

.renew {
  position: absolute;
  right: 10%;
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 185rpx;
  height: 52rpx;
  background: #873E1D;
  border-radius: 26rpx;
  font-size: 12px;
  color: #F6E99F;
}

.buy {
  position: absolute;
  left: 45%;
  transform: translateX(-50%);
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 60rpx;
  background: #873E1D;
  border-radius: 30rpx;
  font-size: 14px;
  color: #F6E99F;
}

.study {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 161rpx;
  height: 67rpx;
  background: #F6E99F;
  border-radius: 34rpx;
  font-size: 12px;
  color: #873E1D;
}

.video-box {
  padding: 20rpx;
  width: 694rpx;
  height: 369rpx;
  background: #F9F3E7;
  border: 2rpx solid #CF8B6D;
  border-radius: 16rpx;
}
</style>