<template>
	<div class="task-activity">
        <div class="task-content" v-for="(item,index) in taskList" :key="index">
            <!-- timeStatus 1 进行中 2 结束 3未开始  hideEndFlag 1 结束后隐藏 2结束后不隐藏 -->
            <div v-if="item.timeStatus == 1 || (item.timeStatus == 2 && item.hideEndFlag == 2)">
                <img :src="item.defaultBackgroundImage"/>
                <div class="task-item" @click="linkPage(item)">
                    <img src="../static/images/task-one.png" />
                    <div class="task-l">
                        <div class="task-t">{{item.ruleName}}</div>  
                    </div>
                    <!-- taskFrequency 单次or累计 finishFrequency 用户完成的频率  doctorFinishFrequency 当前完成次数 -->
                    <div class="task-r">
                        <!-- <div class="task-b" v-if="item.taskFrequency == 1 && item.resourceType != 8">限量 {{item.doctorFinishFrequency || 0}}/{{item.finishFrequency}}次</div>
                        <div class="task-b" v-if="item.taskFrequency == 1 && item.resourceType == 8 && item.resourceId == 2">获奖次数 {{item.doctorFinishFrequency || 0}}/{{item.finishFrequency}}次</div> -->
                        <div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 1">
                            {{handleData(item.rewardJsonInfo)[0].rewardQuantity}}云鹊豆/人
                        </div>
                        <div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 2">
                            {{handleData(item.rewardJsonInfo)[0].rewardQuantity}}元现金红包/人
                        </div>
                        <div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 3">
                            {{handleData(item.rewardJsonInfo)[0].rewardQuantity}}分勤奋分/人
                        </div>
                        <div class="task-b" v-if="handleData(item.rewardJsonInfo)[0].rewardType == 4">
                            {{handleData(item.rewardJsonInfo)[0].rewardQuantity}}条短信额度/人
                        </div>
                        <span class='has-bg' v-if="item.resourceType == 7">去邀请</span> 
                        
                        <div class="task-b" v-if="item.taskFrequency == 2 && (item.cumulativeFrequency > item.nowCumulativeFrequency)">进度 {{item.nowCumulativeFrequency}}/{{item.cumulativeFrequency}}</div>
                        <span v-if="item.taskFrequency == 2 && item.timeStatus == 1 && (item.cumulativeFrequency == item.nowCumulativeFrequency)">已完成</span>
                        <span class='has-bg' v-if="item.taskFrequency == 2 && item.timeStatus == 1 && (item.cumulativeFrequency > item.nowCumulativeFrequency) && item.nowCumulativeFrequency">继续完成</span>
                        <span class='has-bg' v-if="item.taskFrequency == 2 && item.timeStatus == 1 && !item.nowCumulativeFrequency">去完成</span>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// asyncData fetch 在组件中无效
import { getNewActivityDesc } from '@/service';
import { setCookie, getCookie, delCookie } from '@/utils/index';
export default {
    name: 'TaskActivity',
    props: {
        acTempId: {
            type: Number,
            default: 0
        },
        acToken: {
            type: String,
            default: ''
        },
        userMobile: {
            type: String,
            default: ''
        },
    },
	data() {
		return {
            taskList: [],
            taskListRefreshFlag: false,
            status: true,
            statusText: '去完成',
            tokenFlag: false,
            textFlag: true,
            clickFlag: true
		}
    },
    watch: {
        userMobile(n, o) {
            if (n !== o) {
                this.getNewActivityDesc();
            }
        },
        taskRefreshF(n,o) {
            if (n !== o) {
                this.getNewActivityDesc();
            }
        },
        webTaskFresh(n,o) {
            if (n !== o) {
                this.getNewActivityDesc();
            }
        }
    },
    created() {
        this.getNewActivityDesc();
    },
    methods: {
        login() {
            this.$emit('taskRefresh',{taskRefreshFlag:true});
        },
        goRefresh() {
            this.getNewActivityDesc();
        },
        linkPage(item) {
            if((!this.isWeb && !this.userMobile) || (this.isWeb && !this.tokenFlag)) {
                this.login();
            }else {
                let flag = item.timeStatus == 1 && ((item.finishFrequency == item.doctorFinishFrequency) && item.resourceType != 8);
                let flag1 = item.timeStatus == 1 && ((item.finishFrequency == item.doctorFinishFrequency) && item.resourceType == 8 && item.resourceId == 1);
                if(item.timeStatus == 2 || flag || flag1) { // 已结束 、 已完成不可点击
                    return;
                }else {
                    if(!this.clickFlag) return;
                    if(!this.isWeb) { this.clickFlag = false; }
                    let data = {
                        id: item.id,
                        href: item.linkId
                    };
                    this.taskListRefreshFlag = !this.taskListRefreshFlag;
                    this.$emit('taskRef', { taskListRefreshFlag: this.taskListRefreshFlag });
                    this.$emit('activityTaskJump', data);
                    
                }
            }
        },
        // 活动详情
        getNewActivityDesc() {
            let self = this;
            let req = null;
            let {acTempId, acToken} = this;
            if(self.isWeb) {
                req = {
                    id: acTempId,
                    token: getCookie('token') || '2B7FA4D845C74D7EA3183F9E316630C6'
                }
            }else {
                req = {
                    id: acTempId,
                    token: acToken
                }
            }
            getNewActivityDesc({ id: req.id, token: req.token }).then(res => {
                if(res.code == '000000') {
                    if(res.data.loginStatus == 2) { // 未登录 或者token失效
                        delCookie('token');
                        this.tokenFlag = false;
                    }else {
                        this.tokenFlag = true;
                    }
                    this.taskList = res.data.taskRuleData;
                }
            })
        },
        // 处理数据
        handleData(data) {
            return JSON.parse(data)
        }
    }
}
</script>

<style lang="less" scoped>
    .task-activity {
        // padding: 0 0px 5px;
        .login-bg {
            position: relative;
            .tx-con {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 50%;
                padding: 0px 35px;
                font-size: 20px !important;
                height: 90px;
                margin-top: -45px;
                overflow: hidden;
                .tx-title {
                    font-size: 15px;
                    color: #fff;
                    opacity: 1;
                    span {
                        color: #fff;
                        font-size: 12px;
                        opacity: 0.54;
                    }
                }
                .tx-item {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    .item-con {
                        flex-grow: 1;
                        padding-top: 8px;
                        .num{
                            color: #fff;
                            font-size: 27px;
                            font-weight: 600;
                            span {
                                color: #fff;
                            }
                        }
                        .name {
                            font-size: 12px;
                            opacity: 0.69;
                            span {
                                color: #fff !important;
                            }
                        }
                    }
                    
                }
            }
        }
        .login-bg, .task-content {
            position: relative;
            padding-bottom: 5px;
            img {
                width: 100%;
            }
            .task-item {
                position: absolute;
                left: 0;
                top: 0;
                width: 94%;
                height: 90%;
                padding: 0px 10px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                img {
                    width: 50px;
                    height: 50px;
                }
                .task-l {
                    .task-t {
                        padding-bottom: 20px;
                        font-size: 16px;
                        color: #373839;
                        font-weight: 700;
                    }
                    .task-b {
                        font-size: 12px;
                        color: #979899;
                        span {
                            color: #979899;
                        }
                    }
                }
                .task-r {
                    text-align: right;
                    height: 39px;
                    span {
                        display: inline-block;
                        font-size: 11px;
                        color: #fff;
                        font-weight: 500;
                        line-height: 25px;
                        width: 57px;
                        height: 25px;
                        background: #C7C8C9;
                        border-radius: 25px;
                        text-align: center;
                        margin-top: 5px;
                    }
                    span.has-bg {
                        // background: #FB6D5E;
                        background:linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
                        border-radius:35px;
                    }
                    .task-b {
                        text-align: center;
                        font-size: 12px;
                        color: #979899;
                        // padding-top: 5px;
                    }
                }
            }
        }
    }
    
</style>