<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 class="task-con" v-if="(item.timeStatus == 1 || (item.timeStatus == 2 && item.hideEndFlag == 2)) && item.resourceType != 10 && (item.resourceType != 11 || (item.resourceType == 11 && item.resourceId != 2))">
                <img :src="item.defaultBackgroundImage"/>
                <div class="task-item" @click="linkPage(item)">
                    <!-- 1.课程 2.考试 3.调查问卷 4.患者招募 5.宣教漫画 6.打卡 7.邀请 8.任务排查 9.绑定居民到微信 10.首次进入页面 11.点赞和邀请进入-->
                    <img v-if="item.resourceType == 1" src="../static/images/task-two-new.png" /> 
                    <img v-if="item.resourceType == 4" src="../static/images/task-five-new.png" /> 
                    <img v-if="item.resourceType == 11" src="../static/images/task-one-new.png" /> 
                    <img v-if="item.resourceType == 8" src="../static/images/task-three-new.png" />
                    <img v-if="item.resourceType == 9" src="../static/images/task-four-new.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="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">
                            <span class="score">+{{handleData(item.rewardJsonInfo)[0].rewardQuantity}}</span>
                            <span v-if="item.resourceType == 11 || item.resourceType == 9">勤奋分/人</span>
                            <span v-if="item.resourceType == 8 && item.taskFrequency == 1">勤奋分{{item.doctorFinishFrequency}}/{{item.finishFrequency}}</span>
                            <span v-if="item.resourceType == 8 && item.taskFrequency == 2">勤奋分{{item.nowCumulativeFrequency}}/{{item.cumulativeFrequency}}</span>
                            <span v-if="item.resourceType == 1 && item.taskFrequency == 1">勤奋分{{item.doctorFinishFrequency}}/{{item.finishFrequency}}</span>
                            <span v-if="item.resourceType == 1 && item.taskFrequency == 2">勤奋分{{item.nowCumulativeFrequency}}/{{item.cumulativeFrequency}}</span>
                            <span v-if="item.resourceType == 4 && item.taskFrequency == 1">勤奋分{{item.doctorFinishFrequency}}/{{item.finishFrequency}}</span>
                            <span v-if="item.resourceType == 4 && item.taskFrequency == 2">勤奋分{{item.nowCumulativeFrequency}}/{{item.cumulativeFrequency}}</span>
                        </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 == 1 && !item.isFinish">去学习</span> 
                        <span class='has-bg finish' v-if="item.isFinish">已完成</span> 
                        <span class='has-bg' v-if="item.resourceType == 4 && !item.isFinish">去参加</span> 
                        <span class='has-bg' v-if="(item.resourceType == 11 || item.resourceType == 8) && !item.isFinish">去邀请</span>
                        <span class='has-bg' v-if="item.resourceType == 9 && !item.isFinish">去绑定</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>
        <loading v-if="loadingFlag"></loading>
    </div>
</template>

<script>
// asyncData fetch 在组件中无效
import { getNewActivityDesc } from '@/service';
// const cookies = require('cookie-universal')();
import { setCookie, getCookie, delCookie } from '@/utils/index';
import loading from '../components/bussiness/common-loading';
export default {
    name: 'TaskActivity',
    components: {
        loading
    },
    props: {
        acTempId: {
            type: Number | String,
            default: 0
        },
        acToken: {
            type: String,
            default: ''
        },
        userMobile: {
            type: String,
            default: ''
        },
        isWeb: {
            type: Boolean,
            default: false
        },
        taskRefresh: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        acTempId(n,o) {
            if(n != o) {
                this.getNewActivityDesc();
            }
        },
        userMobile(n,o) {
            if(n != o) {
                this.getNewActivityDesc();
            }
        },
        taskRefresh(n,o) {
            if (n !== o) {
                this.getNewActivityDesc();
            }
        },
    },
	data() {
		return {
            loadingFlag: false,
            taskList: [],
            status: true,
            statusText: '去完成',
            tokenFlag: false,
            textFlag: true,
            clickFlag: true,
            flag: false
		}
    },
    created() {
        // this.getNewActivityDesc();
    },
    methods: {
        linkPage(item) {
            if(!this.userMobile) {
                this.$rocNative.gotoLogin();
            }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; }
                    this.flag = !this.flag;
                    let data = {
                        id: item.id,
                        href: item.linkId,
                        resourceType: item.resourceType,
                        flag: this.flag
                    };
                    this.$emit('activityTaskJump', data);
                // }
                if(item.resourceType == 11) {
                    this.$sendBuriedData({ 
                        action: '分享任务',
                        component_tag: '360#360004'
                    });
                }else if(item.resourceType == 1) {
                    this.$sendBuriedData({ 
                        action: '课程学习任务',
                        component_tag: '360#360005'
                    });
                }else if(item.resourceType == 8) {
                    this.$sendBuriedData({ 
                        action: '排查任务',
                        component_tag: '360#360006'
                    });
                }else if(item.resourceType == 9) {
                    this.$sendBuriedData({ 
                        action: '居民绑定任务',
                        component_tag: '360#360007'
                    });
                }else if(item.resourceType == 4) {
                    this.$sendBuriedData({ 
                        action: 'SMO任务',
                        component_tag: '360#360008'
                    });
                }
            }
        },
        // 活动详情
        getNewActivityDesc() {
            this.loadingFlag = true;
            let req = null;
            let {acTempId, acToken} = this;
            req = {
                id: acTempId,
                token: getCookie('token')
            }
            getNewActivityDesc({ id: req.id, token: req.token }).then(res => {
                this.loadingFlag = false;
                if(res.code == '000000') {
                    if(res.data.loginStatus == 2) { // 未登录 或者token失效
                        delCookie('token');
                    }
                    this.taskList = res.data.taskRuleData;
                    for(let i = 0; i < this.taskList.length; i++) {
                        // if(this.taskList[i].resourceType == 7 && this.taskList[i].resourceId == 2) {
                        //     this.taskList.splice(i,1);
                        // }
                        if(this.taskList[i].resourceType == 11 && this.taskList[i].resourceId == 1) {
                            this.$emit('getTaskId',{taskId: this.taskList[i].id});
                        }
                        if(this.taskList[i].resourceType == 11 && this.taskList[i].resourceId == 2) {
                            this.$emit('getNewTaskId',{taskId: this.taskList[i].id});
                        }
                        if(this.taskList[i].resourceType == 10) {
                            let score = JSON.parse(this.taskList[i].rewardJsonInfo)[0].rewardQuantity;
                            this.$emit('firstEnterActivity',{firstEnterScore: score});
                        }
                    }
                }
            })
            
        },
        // 处理数据
        handleData(data) {
            return JSON.parse(data)
        }
    }
}
</script>

<style lang="less" scoped>
    .task-activity {
        .task-con {
            position: relative;
            padding-bottom: 5px;
            width: 335px;
            height: 70px;
            img {
                width: 335px;
                height: 70px;
            }
            .task-item {
                position: absolute;
                left: 0;
                top: 0;
                width: 335px;
                height: 70px;
                padding: 0px 10px 0px 14px;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                img {
                    width: 35px;
                    height: 35px;
                }
                .task-l {
                    width: 162px;
                    padding-left: 13px;
                    .task-t {
                        padding-bottom: 25px;
                        font-size: 16px;
                        color: #373839;
                        font-weight: 700;
                    }
                }
                .task-r {
                    width: 86px;
                    text-align: right;
                    // height: 39px;
                    span.has-bg {
                        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;
                        background:linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
                        border-radius:35px;
                    }
                    span.finish {
                        color: #F68367;
                        background: rgba(253,234,228,1);
                    }
                    .task-b {
                        text-align: center;
                        font-size: 0px;
                        color: #979899;
                        span {
                            font-size: 12px;
                        }
                        span.score {
                            display: inline-block;
                            color: #CC2646;
                        }
                        // padding-top: 5px;
                    }
                }
            }
        }
    }
    
</style>