<template>
    <view class="bg-[var(--page-bg-color)] min-h-[100vh] box-border" :style="themeColor()">
        <template v-if="Object.keys(detail).length">
            <!-- #ifdef H5 -->
            <view class="w-[100%] h-[375rpx] relative  background-size box-border py-[24rpx] px-[var(--sidebar-m)]" :style="{ backgroundImage: 'url(' + img('addon/shop_fenxiao/task_detail_wechat.png') + ')'}">
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view class="w-[100%] h-[550rpx] relative  background-size box-border py-[24rpx] px-[var(--sidebar-m)]" :style="{ backgroundImage: 'url(' + img('addon/shop_fenxiao/task_detail_wechat.png') + ')' }">
                <top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header"/>
            <!-- #endif -->
                <!-- 跳转个任务奖励明细 -->
                <view class="side-tab" :style="{top: topStyle}" @click="toDetail">
                    <text class="iconfont iconlishijiluV6xx icon"></text>
                    <text class="desc">奖励明细</text> 
                </view>
             </view>
             <view class="px-[var(--sidebar-m)] pb-[20rpx] mt-[-75rpx]">
                <!-- 活动未开始 -->
                <view class="bg-[#fff] rounded-[var(--rounded-big)] py-[60rpx] text-center relative mb-[var(--top-m)]" v-if="detail.status === 1">
                    <view class="text-[#333] text-[30rpx] font-500 mb-[30rpx]">该任务还未开始</view>
                    <view class="text-[var(--text-color-light9)] text-[26rpx]">请您耐心等待...</view>
                </view>
                <view class="card-template relative" v-if="detail.status !== 1">
                    <view class="text-[30rpx] font-500 text-[#333] leading-[45rpx] multi-hidden text-center mb-[77rpx]">{{ detail.name }}</view>
                    <!-- 进度条 -->
                    <view class="relative pb-[58rpx] mb-[30rpx] mx-[30rpx]">
                        <view class="w-full h-[24rpx] rounded-[12rpx] bg-[#FFF2D0] flex">
                            <!-- 进度条 -->
                            <view class="h-[24rpx] rounded-[12rpx] bg-linear flex overflow-hidden" :style="{ width : detail.task_member && detail.task_member.task_data.show_progress.rate ? detail.task_member.task_data.show_progress.rate + '%' : 24 + 'rpx' }">
                                <view class="mr-[10rpx] h-[24rpx] flex-1 flex items-center justify-end box-border" v-if="detail.task_member && detail.task_member.task_data.show_progress.rate">
                                    <text class="w-[4rpx] h-[4rpx] rounded-full bg-[#fff] mr-[6rpx]"></text>
                                    <text class="w-[6rpx] h-[6rpx] rounded-full bg-[#fff] mr-[6rpx]"></text>
                                    <text class="w-[8rpx] h-[8rpx] rounded-full bg-[#fff]"></text>
                                </view>
                            </view>
                            <!-- 总进度图标 -->
                            <image class="w-[52rpx] h-[52rpx] align-middle absolute right-0 top-[12rpx] transform -translate-y-1/2" mode="widthFix" :src="img('addon/shop_fenxiao/task_icon.png')"></image>
                            <!-- 总进度金额 -->
                             <view class="money min-w-[60rpx] h-[36rpx] px-[12rpx] box-border bg-[var(--primary-color)] text-[#fff] absolute right-[26rpx] top-[-56rpx] transform translate-x-1/2 rounded-[18rpx] z-10 flex items-center">
                                <text class="text-[24rpx]">￥</text>
                                <text class="text-[24rpx]">{{ detail.rules[0].reward?.commission }}</text>
                             </view>
                        </view>
                        <!-- 当前完成进度文字 -->
                        <view ref="mytext" v-if="detail.task_member && detail.task_member.task_data.show_progress.rate != 100"
                            class="absolute text-[26rpx] bottom-0  leading-[34rpx] text-[var(--primary-color)]" :class="{' transform -translate-x-1/2': detail.task_member && detail.task_member.task_data.show_progress.rate > 0}"
                            :style="{ 'left': detail.task_member ? detail.task_member.task_data.show_progress.rate + '%' : 0 }">{{ detail.task_member.task_data.now_data + detail.task_member.task_data.util }}</view>
                        <!-- 需完成的总进度完成 -->
                        <view ref="overallText" class="absolute text-[26rpx] leading-[34rpx] flex-center min-w-[100rpx]  bottom-0 -right-[20rpx]">{{ detail.task_member ? (detail.task_member.task_data.util=='元'?moneyFormat(detail.task_member.task_data.end_data):detail.task_member.task_data.end_data) + detail.task_member.task_data.util : (detail.task_data.util=='元'?moneyFormat(detail.task_data.end_data):detail.task_data.end_data) + detail.task_data.util }}</view>
                    </view>
                    <view class="bg-[#FFF8EF] rounded-[var(--goods-rounded-big)] px-[30rpx] py-[30rpx]" v-if="detail.task_member">
                        <view class="text-center text-[28rpx] font-500 mb-[40rpx]">完成进度</view>
						<view class="text-[26rpx] flex-1 w-[615rpx] break-all flex items-center mb-[34rpx]">
							<text class="text-[#823D19]">{{detail.task_member.task_data.util=='元' ? '完成金额：' :detail.task_member.task_data.util=='单' ? '完成单数：' : '推广人数'}}</text>
							<view  class="text-[26rpx] text-[#333]">
								{{detail.task_member.task_data.title}}已达<text class="text-[var(--primary-color)]">{{detail.task_member.task_data.util=='元'?moneyFormat(detail.task_member.task_data.now_data):detail.task_member.task_data.now_data }}</text>{{detail.task_member.task_data.util}}
							</view>
						</view>
						<view class="text-[26rpx] flex-1 w-[615rpx] break-all flex items-center mb-[34rpx]">
							<text class="text-[#823D19]">完成次数：</text>
							<view class="text-[26rpx] text-[#333]">
								<text class="text-[var(--primary-color)]">{{ detail.task_member.complete_num }}</text>
								<text>/{{ detail.times?detail.times+'次':'不限次' }}</text>
							</view>
						</view>
						<view class="text-[26rpx] flex-1 w-[615rpx] break-all flex items-center">
							<text class="text-[#823D19]">领取奖励：</text>
							<text class="text-[#333]">累计领取{{ detail.task_member.complete_num }}次奖励共计{{ moneyFormat(detail.task_member.complete_num * detail.rules[0].reward?.commission)}}元</text>
						</view>
                    </view>
                </view>
                <!-- 任务信息 -->
                <view class="overflow-hidden mt-[20rpx] card-template">
                    <view class="title">任务信息</view>
					<view class="text-[26rpx] flex-1 card-template-item">
						<text class="text-[var(--text-color-light9)]">任务内容：</text>
						<view v-if="!detail.task_member" class="text-[26rpx] text-[#333]">
							{{detail.task_data.title}}达{{detail.rules[0].condition?.type.includes('order_num') ? detail.rules[0].condition?.order_num : detail.rules[0].condition?.type.includes('order_money') ? detail.rules[0].condition?.order_money : detail.rules[0].condition?.child_num }}{{detail.task_data.util}}
						</view>
						<view v-else class="text-[26rpx] text-[#333]">
							{{detail.task_member.task_data.title}}达{{detail.rules[0].condition?.type.includes('order_num') ? detail.rules[0].condition?.order_num : detail.rules[0].condition?.type.includes('order_money') ? detail.rules[0].condition?.order_money : detail.rules[0].condition?.child_num }}{{detail.task_member.task_data.util}}
						</view>
					</view>
					<view class="text-[26rpx] flex-1 card-template-item">
						<text class="text-[var(--text-color-light9)]">任务奖励：</text>
						<text class="text-[#333]">{{ moneyFormat(detail.rules[0].reward?.commission)}}元</text>
					</view>
					<view class="text-[26rpx] flex-1 card-template-item" v-if="detail.type===1">
						<text class="text-[var(--text-color-light9)]">参与次数：</text>
						<text class="text-[#333]">{{ detail.times?detail.times+'次':'不限次' }}</text>
					</view>
					<view class="text-[26rpx] flex-1 card-template-item">
						<text class="text-[var(--text-color-light9)]">活动时间：</text>
						<view class="text-[#333]">
							{{ detail.start_time ? detail.start_time.substring(0, 10) : '--' }} 至 {{ detail.time_type == 1 ? detail.end_time.substring(0, 10) : "长期有效" }}（{{ detail.status === 1?'未开始':detail.status === 2?'已开始':'已结束' }}）
						</view>
					</view>
                </view>
                <!-- 奖励规则 -->
                <view class="card-template overflow-hidden mt-[var(--top-m)]">
                    <view class="title">{{t('rewardRules')}}</view>
					<view class="text-[26rpx] flex-1 card-template-item">
						<text class="text-[var(--text-color-light9)]">参与等级：</text>
						<text class="text-[#333]">
							{{ detail.level_type == 1 && '全部等级' || detail.level_type == 2 && Object.values(detail.level_data).toString() }}
						</text>
					</view>
					<view class="text-[26rpx] flex-1 card-template-item">
						<text class="text-[var(--text-color-light9)]">奖励指标：</text>
						<text class="text-[#333]">{{ detail.task_member ? detail.task_member.task_data.title : detail.task_data.title }}</text>
					</view>
					<view v-if="!detail.task_member" class="text-[26rpx] card-template-item">
						<text class="text-[var(--text-color-light9)]">奖励说明：</text>
						<text class="text-[#333]">
							{{detail.task_data.title}}达{{detail.rules[0].condition?.type.includes('order_num') ? detail.rules[0].condition?.order_num : detail.rules[0].condition?.type.includes('order_money') ? detail.rules[0].condition?.order_money : detail.rules[0].condition?.child_num }}{{detail.task_data.util}}即可获得{{moneyFormat(detail.rules[0].reward?.commission)}}元佣金</text>
					</view>
					<view v-else class="text-[26rpx] card-template-item">
						<text class="text-[var(--text-color-light9)]">奖励说明：</text>
						<text class="text-[#333]">
							{{detail.task_member.task_data.title}}达{{detail.rules[0].condition?.type.includes('order_num') ? detail.rules[0].condition?.order_num : detail.rules[0].condition?.type.includes('order_money') ? detail.rules[0].condition?.order_money : detail.rules[0].condition?.child_num }}{{detail.task_member.task_data.util}}即可获得{{moneyFormat(detail.rules[0].reward?.commission)}}元佣金
						</text>
					</view>
                </view>
                <!-- 任务说明 -->
                <view v-if="detail.remark" class="card-template overflow-hidden mt-[var(--top-m)]">
                    <view class="title">{{t('taskSpecification')}}</view>
                    <view class="text-[#333] text-[26rpx] leading-[1.6]">{{ detail.remark }}</view>
                </view>
             </view>
        </template>
		<loading-page :loading="loading"></loading-page>
    </view>
</template>

<script lang="ts" setup>
import { t } from '@/locale';
import { ref, computed } from 'vue'
import { img, redirect,moneyFormat, pxToRpx, goback } from '@/utils/common';
import { onLoad } from '@dcloudio/uni-app'
import { getTaskInfo } from '@/addon/shop_fenxiao/api/task'
import { topTabar } from '@/utils/topTabbar'

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({title:'任务奖励详情'})
/********* 自定义头部 - end ***********/

//头部高度
const detail: Record<string, any> = ref({})
onLoad((option: any) => {
    if(!option.id){
        let parameter = {
            url:'/addon/shop_fenxiao/pages/task_rewards',
            title: '缺少任务奖励id'
        };
        goback(parameter);
    }else{
        getTaskInfoFn(Number(option.id))
    }
})
const loading = ref<boolean>(true);//页面加载动画
const getTaskInfoFn = (id: number) => {
    getTaskInfo(id).then((res: any) => {
        detail.value = res.data
        if (detail.value.status === 1) {
            detail.value.time = new Date(detail.value.start_time).getTime() - new Date().getTime()
            detail.value.time = detail.value.time < 0 ? '' : detail.value.time
        } else if (detail.value.status === 2) {
            if (detail.value.time_type != 2) {
                detail.value.time = new Date(detail.value.end_time).getTime() - new Date().getTime()
                detail.value.time = detail.value.time < 0 ? '' : detail.value.time
            } else {
                detail.value.time = ''
            }
        }
        loading.value = false
    }).catch(() => {
        loading.value = false
    })

}

// 获取系统状态栏的高度
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
const topStyle = computed(() => {
	let style = Object.keys(menuButtonInfo).length?(pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) +  50) + 'rpx;':'50rpx'
	return style
})

const timeData: Record<string, any> = ref({})
//计算进度条上方文字极限展示位置
// const Progresslock: Record<string, any> = ref({
//     leftTranslateLock:false
// })
// const mytext = ref<HTMLElement>()//

// const Progress =()=>{
//     if(detail.task_member) {
//         detail.task_member.task_data.show_progress.rate
//     }
// }
const onChange = (e: any) => {
    timeData.value = e
}
const toDetail = ()=>{
    redirect({ url: '/addon/shop_fenxiao/pages/task_rewards_detail', param: {id:detail.value.id} })
}
</script>
<style lang="scss">
.time__hours,
.time__minutes,
.time__seconds {
    color: #fff;
    display: inline-block;
    background: var(--primary-color);
    width: 45rpx;
    height: 45rpx;
    text-align: center;
    line-height: 45rpx;
    border-radius: 3rpx;
}

.background-size {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}
.bg-linear{
    background: linear-gradient( 90deg, #FFB054 0%, #FF2524 100%);
}
.money{
    &::after{
        content: "";
        width:8rpx;
        height: 8rpx;
        background-color: var(--primary-color);
        transform: rotate(45deg)  translateX(-50%);
        position:absolute;
        bottom:-6rpx;
        left:50%;
    }
}
</style>