<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-item>
        </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>