<template>
    <view class="page" :class="isEquityDetail ? 'over-h' : ''">
        <view class="integral-member-center">
            <view class="member-card" :class="'level' + level">
                <view class="tip">当前等级</view>
                <view class="level-info">
                    <view class="info-head">
                        <view class="info-head-f">
                            <text class="level-name">{{ integralMemberInfo.levelName }}会员</text>
                            <navigator class="upgrade-guide" url="/pages/mine/pages/integralMember/upgradeGuide/index">
                                <text>升级攻略</text>
                                <van-icon name="arrow" size="11px" color="#fff" />
                            </navigator>
                        </view>
                        <view class="intro">升级可享更多会员权益</view>
                    </view>
                    <view class="info-btm">
                        <view class="progress-box">
                            <view class="current-num" :style="{ left: ((integralMemberInfo.currentGrowthValue / integralMemberInfo.integralMemberInfo) * 100) + '%' }">
                                <text>{{ integralMemberInfo.currentGrowthValue || 0 }}</text>
                                <view class="triangle"></view>
                            </view>
                            <view class="progress-bar">
                                <view class="progress-bar-num" :style="{ width: ((integralMemberInfo.currentGrowthValue / integralMemberInfo.integralMemberInfo) * 100) + '%' }"></view>
                                <view class="dot" style="left: {{ ((integralMemberInfo.currentGrowthValue/integralMemberInfo.integralMemberInfo) * 100) +'%' }}"></view>
                            </view>
                        </view>
                        <view class="progress-number">
                            <view class="current-level-info">
                                <text class="level-text">LV{{ integralMemberInfo.level || '-' }}
                                    {{ integralMemberInfo.levelName }}</text>
                                <text class="num">{{ integralMemberInfo.currentNeedGrowthValue }}</text>
                            </view>
                            <view class="next-level-info">
                                <text class="level-text">LV{{ integralMemberInfo.nextLevel || '-' }}
                                    {{ integralMemberInfo.nextLevelName }}</text>
                                <text class="num">{{ integralMemberInfo.nextNeedGrowthValue || '-' }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <image class="level-img" :src="imgHost + '/images/icon/user/level' + integralMemberInfo.level + '@2x.png'" mode="" />
            </view>
            <view class="pub-card my-equity">
                <view class="pub-card-title"><text>我的权益</text></view>
                <view class="equity-box" :class="isOpen ? 'open' : ''">
                    <view class="equity-list">
                        <block v-if="integralMemberInfo.equitys">
                            <view class="equity-item" v-for="(item, index) in integralMemberInfo.equitys" :key="index"
                                @tap="onEquityDesc">
                                <view class="imgbox">
                                    <image :src="item.equityLogo" mode="" />
                                </view>
                                <text>{{ item.equityName }}</text>
                            </view>
                        </block>
                        <view class="empty" v-else>
                            <empty name="orders-o" description="描述文字" />
                        </view>
                    </view>
                </view>
                <view class="equity-more" @tap="equityMore" v-if="integralMemberInfo.equitys.length > 8">
                    <text>{{ isOpen ? '点击收取' : '查看全部' }}</text>
                    <uni-icons type="{{ isOpen ? 'top': 'bottom' }}" size="12px" color="#909090" />
                </view>
            </view>
            <view class="pub-card grow-up-task">
                <view class="pub-card-title">
                    <text>成长任务</text>
                    <!-- <navigator class="more" url="#">
                        <text>全部任务</text>
                        <van-icon name="arrow" size="12px" color="#909090"/>
                    </navigator> -->
                </view>
                <view class="task-list">
                    <view class="task-item" v-for="(item, index) in growthValueList" :key="index">
                        <view class="item-l">
                            <view class="sign-text">
                                <text class="title">{{ item.name }}</text>
                                <!-- <text class="tip"></text> -->
                            </view>
                            <view class="detail">完成任务可获得<text>{{ item.growthValue + item.unit }}</text>成长值，每日{{ item.superiorLimit ? '上限' : '无上限' }}<text>{{ item.superiorLimit ? item.superiorLimit + '点/日' : '' }}。</text></view>
                        </view>
                        <!-- <button class="btn {{ item % 2 == 0 ? 'btn-disabled':'btn-primary' }}">{{ item % 2 == 0 ? '已完成':'去签到' }}</button> -->
                    </view>
                </view>
            </view>
        </view>
    </view>
    <!-- 权益详情弹框 -->
    <van-popup :show="isEquityDetail" custom-style="height: 40%;">
        <view class="equity-area">
            <view class="title">{{ integralMemberInfo.equitys[currentEquityIndex].equityName }}</view>
            <view class="equity-tips-desc">
                <view class="p">{{ integralMemberInfo.equitys[currentEquityIndex].equityIntroduce }}</view>
            </view>
        </view>
        <view class="close" bindtap="onEquityClose">
            <uni-icons type="close" size="27px" color="#fff" />
        </view>
    </van-popup>
</template>
<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import VanPopup from '@/components/popup/index'
import empty from '@/components/empty/index'
const app = getApp()
export default {
    components: {
        'van-popup': VanPopup,
        'empty': empty
    },
    data() {
        return {
            imgHost: httpConfig && httpConfig.imgHost,
            level: null,
            isOpen: false,
            isEquityDetail: false, // 是否显示权益详情弹窗
            equityDetailId: null,  // 是否显示权益详情ID
            currentEquityIndex: null, // 权益弹窗的当前权益索引
            integralUserId: null, // 积分会员用户ID
            memberList: [],
            growthValueList: [], // 成长值任务列表
        }
    },
    onLoad(options) {
        if (options.hasOwnProperty('integralUserId') && options.integralUserId) {
            this.setData({
                integralUserId: options.integralUserId
            })
        }
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.on("integralMemberInfo", (data) => {
            console.log(data)
            this.setData({
                integralMemberInfo: data.integralMemberInfo,
                level: data.integralMemberInfo.level,
            });
        })
        this.getIntegralMemberList() // 获取积分会员列表信息
        this.getGrowthValueRuleList() // 获取成长值规则列表数据
    },
    methods: {
        // 获取积分会员列表信息
        getIntegralMemberList() {
            let {
                integralUserId
            } = this;
            let data = {
                params: [{
                    userId: integralUserId, // 积分会员ID
                    serviceType: 2, // 2:会员列表
                }]
            }
            $http.post("urlS", this, {
                code: "WX01008",
                data: data,
                success: function (res) {
                    console.log(res)
                    if (+res.errorCode === 0) {
                        this.setData({
                            memberList: res.result
                        }, () => {
                            app.globalData.memberList = res.result
                            this.dealGrowthValue()
                        });
                    }
                }
            });
        },
        dealGrowthValue() {
            const { memberList, integralMemberInfo } = this
            memberList.map(item => {
                if (integralMemberInfo.level == item.level) integralMemberInfo.currentNeedGrowthValue = item.growthValue
                if (integralMemberInfo.nextLevel == item.level) integralMemberInfo.nextNeedGrowthValue = item.growthValue
            })
            console.log(integralMemberInfo)
            this.setData({
                integralMemberInfo
            })
        },
        // 获取成长值规则列表数据
        getGrowthValueRuleList() {
            const growthValueData = this.$cache.get('growthValueRuleData')
            if (growthValueData.timemap >= new Date().getTime()) {
                this.setData({
                    growthValueList: growthValueData.rules
                })
                return
            }
            let data = {
                params: [{}]
            }
            $http.post("urlS", this, {
                code: "WX01012",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            growthValueList: res.result.rules
                        }, () => {
                            let growthValueRuleData = {
                                timemap: new Date().getTime() + 12 * 60 * 60 * 1000,
                                ...res.result
                            }
                            this.$cache.set('growthValueRuleData', growthValueRuleData)
                        })
                    }
                }
            })
        },
        equityMore() {
            this.setData({
                isOpen: !this.isOpen
            })
        },
        // 打开关闭权益详情说明弹窗
        onEquityClose() {
            this.setData({
                isEquityDetail: !this.isEquityDetail
            })
        },
        onEquityDesc(e) {
            const index = e.currentTarget.dataset.index
            console.log(e)
            this.onEquityClose()
            this.setData({
                currentEquityIndex: index
            })
        }
    }
}
</script>

<style>
.over-h {
  height: 100vh;
  overflow: hidden;
}
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20rpx 0;
}
.integral-member-center {
  padding: 24rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
}

.member-card {
  display: flex;
  position: relative;
  box-sizing: border-box;
  height: 354rpx;
  padding: 56rpx 54rpx 46rpx 42rpx;
  border-radius: 10rpx;
}

.member-card .level-img {
  width: 215rpx;
  height: 215rpx;
  margin-left: 30rpx;
  margin-top: 12rpx;
}

.member-card .tip {
  position: absolute;
  right: 0;
  top: 0;
  width: 110rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  background: #E6BD87;
  border-radius: 0px 10rpx 0px 10rpx;
}

.level-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 360rpx;
  height: 100%;
}

.level-info .info-head {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.level-info .info-head .info-head-f {
  display: flex;
  align-items: center;
}

.level-info .info-head .info-head-f .level-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.level-info .info-head .info-head-f .upgrade-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116rpx;
  height: 36rpx;
  background: #DDA65E;
  border-radius: 17rpx;
  font-size: 18rpx;
  color: #fff;
  padding-left: 8rpx;
}

.level-info .info-head .intro {
  font-size: 20rpx;
  font-weight: 400;
  color: #333;
  margin-top: 20rpx;
}

.level-info .info-btm {
  display: flex;
  flex-direction: column;
}

.level-info .info-btm .progress-box {
  position: relative;
}

.level-info .info-btm .progress-box .current-num {
  position: absolute;
  bottom: 30rpx;
  display: inline-block;
  height: 30rpx;
  background: #F8E7CD;
  border-radius: 4rpx;
  padding: 0 10rpx;
  font-size: 18rpx;
  color: #AC7021;
  transform: translateX(-50%);
}

.level-info .info-btm .progress-box .current-num .triangle {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border: 16rpx solid rgba(0, 0, 0, 0);
  border-top-color: #F8E7CD;
  transform: translateX(-50%);
}

.level-info .info-btm .progress-box .progress-bar {
  position: relative;
  width: 100%;
  height: 10rpx;
  border-radius: 10rpx;
  background-color: rgba(255, 255, 255, 0.4);
}

.level-info .info-btm .progress-box .progress-bar .progress-bar-num {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.level-info .info-btm .progress-box .progress-bar .dot {
  content: "";
  position: absolute;
  top: -6rpx;
  width: 22rpx;
  height: 22rpx;
  background: #F9F1E5;
  border-radius: 50%;
  transform: translateX(-50%);
}

.level-info .info-btm .progress-box .dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9rpx;
  height: 9rpx;
  background: #FFFFFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.progress-number {
  display: flex;
  justify-content: space-between;
}

.progress-number .current-level-info,
.progress-number .next-level-info {
  display: flex;
  flex-direction: column;
  margin-top: 10rpx;
  font-size: 18rpx;
  color: #fff;
}

.progress-number .next-level-info {
  align-items: flex-end;
}

.level1 {
  background: linear-gradient(90deg, #E6BC86, #FFECC9);
}

.level2 {
  background: linear-gradient(90deg, #8EAFC4, #E1EFFF);
}

.level3 {
  background: linear-gradient(90deg, #DCC176, #F8EFD9);
}

.level4 {
  background: linear-gradient(90deg, #FF815F, #FFCEC1);
}

.level5 {
  background: linear-gradient(90deg, #7893F1, #BBCFF5);
}

.level2 .tip {
  background: #8AAEC4;
}

.level3 .tip {
  background: #DEC06F;
}

.level4 .tip {
  background: #E78E76;
}

.level5 .tip {
  background: #8095DB;
}

.level2 .level-info .info-head .info-head-f .upgrade-guide {
  background: #6F99B3;
}

.level3 .level-info .info-head .info-head-f .upgrade-guide {
  background: #B59A50;
}

.level4 .level-info .info-head .info-head-f .upgrade-guide {
  background: #DE6C4D;
}

.level5 .level-info .info-head .info-head-f .upgrade-guide {
  background: #5E75C4;
}

.level2 .level-info .info-btm .progress-box .current-num {
  color: #6F99B3;
  background: #D9E9F9;
}

.level3 .level-info .info-btm .progress-box .current-num {
  color: #B59A50;
  background: #F9F6D9;
}

.level4 .level-info .info-btm .progress-box .current-num {
  color: #DE6C4D;
  background: #FED8CD;
}

.level5 .level-info .info-btm .progress-box .current-num {
  color: #5E75C4;
  background: #DAE5F9;
}

.level2 .level-info .info-btm .progress-box .current-num .triangle {
  border-top-color: #D9E9F9;
}

.level3 .level-info .info-btm .progress-box .current-num .triangle {
  border-top-color: #F9F6D9;
}

.level4 .level-info .info-btm .progress-box .current-num .triangle {
  border-top-color: #FED8CD;
}

.level5 .level-info .info-btm .progress-box .current-num .triangle {
  border-top-color: #DAE5F9;
}

.pub-card .pub-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  height: 90rpx;
}

.pub-card .pub-card-title .more {
  display: flex;
  align-items: center;
  line-height: 1;
}

.pub-card .pub-card-title .more text {
  color: #909090;
  font-size: 20rpx;
  margin-right: 6rpx;
  margin-top: 4rpx;
}

.equity-box {
  overflow: hidden;
  min-height: 206rpx;
}
.equity-box.open {
  height: auto;
}

.equity-list {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  line-height: 1;
  padding: 18rpx 28rpx;
}

.equity-list .equity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  padding: 18rpx 0;
}
.equity-list .equity-item .imgbox {
  box-sizing: border-box;
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background: linear-gradient(0deg, #67A5FD, #6FCAFF);
}
.equity-list .equity-item image {
  width: 50rpx;
  height: 50rpx;
}

.equity-list .equity-item text {
  font-size: 24rpx;
  font-weight: bold;
}

.equity-more {
  display: flex;
  justify-content: center;
  background: #fff;
  padding: 10rpx 0 30rpx;
}

.equity-more text {
  color: #909090;
  font-size: 20rpx;
  margin-right: 10rpx;
}

/*成长任务*/
.task-list {
  background: #fff;
}

.task-item {
  display: flex;
  justify-content: space-between;
  padding: 34rpx 20rpx;
  line-height: 1;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}

.task-item:last-child {
  border-bottom-width: 0;
}

.task-item .item-l .sign-text .title {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
}

.task-item .item-l .sign-text .tip {
  width: 100rpx;
  padding: 4rpx 16rpx;
  background: rgba(106, 177, 254, 0.2);
  border-radius: 18rpx;
  font-size: 18rpx;
  color: #67A7FD;
  margin-left: 20rpx;
}

.task-item .item-l .detail {
  display: block;
  font-size: 20rpx;
  color: #A6A6A6;
  margin-top: 16rpx;
}
.task-item .item-l .detail text {
  color: #67A7FD;
  padding: 0 6rpx;
}

.task-item .btn {
  height: 46rpx;
  line-height: 46rpx;
  font-size: 24rpx;
  border-radius: 23rpx;
  margin: 0;
}

.task-item .btn::after {
  border: 0;
}

.task-item .btn-primary {
  background: rgba(243, 152, 1, 0.2);
}

.task-item .btn-disabled {
  background: #E6E6E6;
}

/* 权益详情 */ 
.equity-area {
  position: relative;
  width: 680rpx;
  height: 100%;
  border-radius: 10rpx;
}
.equity-area .title {
  width: 100%;
  height: 108rpx;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 108rpx;
  text-align: center;
}
.equity-area .equity-tips-desc {
  overflow-y: auto;
  height: calc(100% - 108rpx);
  padding: 0 30rpx 0;
  text-align: justify;
}
.equity-area .equity-tips-desc .p {
  padding: 10rpx 0;
}
.van-popup {
  overflow-y: inherit !important;
}
.close {
  position: absolute;
  width: 54rpx;
  height: 54rpx;
  bottom: -84rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
