<template>
	<view class="bc-f5">
    <!-- <view class="wp100" style="background-color: #333;height: 205px;"></view> -->
    <view class="relative" style="height: 205px;">
      <image src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/vip%E8%83%8C%E6%99%AF%E7%BB%BF_20230831010645.png" mode="widthFix" style="width: 100%;"></image>
      <view class="info flex ai-c" v-if="isLogin">
        <u-avatar class="br-p50 overflow-h" :size="64" mp-avatar shape="circle"></u-avatar>
        <view class="ml12">
          <view class="flex ai-c fs18 cor-333 fwb">
            <text class="mr10">{{ user.userName }}{{ user.userId }}</text>
            <image v-if="vipOn.length" src="../../static/image/mine/vip.png" mode="widthFix" style="width: 18px;"></image>
          </view>
          <view class="mt5 fs14 cor-666">陪您学车 第{{ user.days }}天</view>
        </view>
      </view>
      <view class="info flex ai-c" v-else @tap="toLogin">
        <u-avatar class="br-p50 overflow-h" :size="64" src="@/static/image/mine/default_avatar.png" shape="circle"></u-avatar>
        <view class="ml12">
          <view class="flex ai-c fs18 cor-333 fwb">
            <text class="mr10">立即登录</text>
          </view>
          <view class="mt5 fs14 cor-666">登录后获得更多学车信息</view>
        </view>
      </view>
    </view>
    <view class="p15lr" style="transform: translateY(-90px);">
      <view class="relative mb10" @tap="handleVip">
        <image src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/vip%E8%83%8C%E6%99%AF%E9%BB%841_20230831010645.png" mode="widthFix" style="width: 100%;"></image>
        <view  class="absolute p15lr p10tb flex ai-c jc-sb" style="left: 0;top: 0;right: 0;height: 40px;">
          <view class="flex ai-c">
            <view class="p3 br-p50" style="background-color: #873E1D;">
              <image src="/static/image/mine/vip.png" mode="widthFix" style="width: 18px;height: 15px;"></image>
            </view>
            <text class="ml5 fs16 fwb" style="color: #7E4012FF;">VIP会员</text>
          </view>
          <text v-if="!isLogin || !vipOn.length" class="fs12" style="color: #7E4012FF;">您还不是VIP会员</text>
          <text v-else-if="vipOn.length" class="fs12" style="color: #7E4012FF;">{{ expireTime }}到期</text>
        </view>
        <view class="absolute flex ai-c jc-c" style="left: 0;top: 40px;right: 0;bottom: 0;">
          <view v-if="!isLogin || !vipOn.length" class="text-center">
            <view class="fs18 fwb" style="color: #7E4012FF;">开通VIP尊享以下权益</view>
            <view class="fs15" style="color: #7E4012FF;">精选500题 / 真是模考 / 考前密卷</view>
            <view class="study fs16 text-center" style="margin: 25px auto 0;color: #F6E99FFF;">{{ isIOS ? 'iOS暂不可用' : '立即开通' }}</view>
          </view>
          <view v-else-if="vipOn.length" class="text-center">
            <view class="fs18 fwb" style="color: #7E4012FF;">{{ vipText }}</view>
            <view class="study fs16 text-center" style="margin: 25px auto 0;color: #F6E99FFF;">马上学习</view>
          </view>
        </view>
      </view>
      <view v-if="isLogin" class="br8 bc-fff p15 z-index2">
        <text class="fs16 cor-333">我的驾校</text>
        <view v-if="user?.schoolId">
          <div class="mt12 flex ai-c jc-sb">
            <text class="fs18 cor-000 fwb">{{ user.schoolName }}</text>
            <u-button text="切换驾校" shape="circle" @click="handleChangeSchool"></u-button>
          </div>
          <u-line margin="14px 0 18px 0"></u-line>
          <view class="flex ai-c" @tap="handleCallPhone">
            <view class="flex ai-c jc-c phone">
              <img src="/static/image/mine/phone.png" style="width: 12px;height: 12px;">
              <text class="ml2 fs12 cor-fff">客服热线</text>
            </view>
            <text class="ml5 fs26 cor-333 fwb" style="line-height: 26px;">{{ user.schoolPhone }}</text>
          </view>
        </view>
        <view v-else class="p15tb flex ai-c jc-sb">
          <view class="fs20 cor-333 fwb">尚未绑定驾校</view>
          <u-button text="绑定驾校" shape="circle" @click="handleChangeSchool"></u-button>
        </view>
      </view>
      <view class="mt12 bc-fff br8">
        <u-cell-group>
        	<u-cell size="large" title="我的资料" isLink @tap="handleInfo">
            <template #icon>
              <img src="/static/image/mine/wdzl.png" style="width: 24px;height: 24px;">
            </template>
          </u-cell>
        	<u-cell size="large" title="我的体检" isLink @tap="handleTJ">
            <template #icon>
              <img src="/static/image/mine/wdtj.png" style="width: 24px;height: 24px;">
            </template>
          </u-cell>
        	<u-cell size="large" title="我的题库" :value="carName" isLink @tap="toChangeCarType">
            <template #icon>
              <img src="/static/image/mine/wdtk.png" style="width: 24px;height: 24px;">
            </template>
          </u-cell>
        </u-cell-group>
      </view>
      <view v-if="isLogin" class="flex ai-c jc-c mt12 br8 bc-fff" style="height: 50px;" @tap="handleLogout">
        <text class="fs16" style="color: #A09F9F;">退出登录</text>
      </view>
    </view>
	</view>
</template>
<script>
import useUserStore from '@/jtools/store/user'
import storage from '@/jtools/storage';
export default {
  components: {},
  computed: {
    isLogin() {
      return useUserStore().isLogin
    },
    user() {
      return useUserStore().userInfo
    },
    vipOn() {
      return useUserStore().vipOnList
    },
    expireTime() {
      if (this.vipOn.length) {
        const t = this.vipOn.reduce((pre, cur) => {
          if (Date.parse(pre) > Date.parse(cur.endDate)) {
            return cur.endDate
          }
          return pre
        }, '2099-12-31')
        return t.split(' ')[0]
      } else {
        return ''
      }
    },
    vipText() {
      if (this.vipOn.length) {
        const t = this.vipOn.reduce((pre, cur) => {
          return [...pre, ...cur.subjects.split(',').map(it => ['', '一', '二', '三', '四'][it])]
        }, [])
        let val = Array.from(new Set(t))
        val = val.length == 4 ? val.join('') + '全部' : val.join('')
        return `尊享科目${val}付费权益`
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      carName: storage.get('carName') || '小车C1/C2/C3',
      isIOS: true
    }
  },
  onShow() {
    this.isIOS = this.$platform.device().includes('ios')
    this.carName = storage.get('carName') || '小车C1/C2/C3'
  },
  methods: {
    toChangeCarType() {
      uni.navigateTo({
        url: "/pages/me/changeCarType"
      })
    },
    handleVip() {
      if (this.isIOS) {
        return
      }
      if (this.isLogin) {
        // if (this.vipOn.length) {
        uni.navigateTo({
          url: '/pages/me/vip'
        })
        // } else {
        //   uni.navigateTo({
        //     url: '/pages/index/videoVip'
        //   })
        // }
      } else {
        this.toLogin()
      }
    },
    handleCallPhone() {
      uni.makePhoneCall({
        phoneNumber: this.user.schoolPhone
      })
    },
    handleChangeSchool() {
      if (this.isLogin) {
        uni.navigateTo({
          url: '/pages/me/school'
        })
      } else {
        this.toLogin()
      }
    },
    handleInfo() {
      if (this.isLogin) {
        uni.navigateTo({
          url: '/pages/me/info'
        })
      } else {
        this.toLogin()
      }
    },
    handleTJ() {
      if (this.isLogin) {
        // uni.navigateTo({
        //   url: '/pages/me/tijian'
        // })
        uni.showToast({
          title: '敬请期待',
          icon: 'none'
        })
      } else {
        this.toLogin()
      }
    },
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    handleLogout() {
      useUserStore().logout()
    },
  }
}
</script>

<style lang="scss" scoped>
.info {
  position: absolute;
  top: 32px;
  left: 27px;
}

.phone {
  width: 75px;
  height: 26px;
  background: #05C341;
  border-radius: 16px 16px 0px 16px;
}

.study {
  width: 200px;
  height: 35px;
  line-height: 35px;
  background: #7E4012;
  border-radius: 35px;
}
</style>
