<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)">
                    <!-- 1.课程 2.考试 3.调查问卷 4.患者招募 5.宣教漫画 6.打卡 7.邀请 8.任务排查 9.绑定居民到微信-->
                    <img v-if="item.resourceType == 1" src="../static/images/task-two.png" /> 
                    <img v-if="item.resourceType == 3" src="../static/images/task-five.png" /> 
                    <img v-if="item.resourceType == 7" src="../static/images/task-one.png" /> 
                    <img v-if="item.resourceType == 8" src="../static/images/task-three.png" />
                    <img v-if="item.resourceType == 9" src="../static/images/task-four.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">
                            {{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 == 1 && (item.finishFrequency > item.doctorFinishFrequency)">去学习</span> 
                        <span class='has-bg' v-if="item.resourceType == 1 && (item.finishFrequency == item.doctorFinishFrequency)">已完成</span> 
                        <span class='has-bg' v-if="item.resourceType == 3">去参加</span> 
                        <span class='has-bg' v-if="item.resourceType == 7 || item.resourceType == 8">去邀请</span> 
                        <span class='has-bg' v-if="item.resourceType == 9">去绑定</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';
const cookies = require('cookie-universal')();
export default {
    name: 'TaskActivity',
    props: {
        acTempId: {
            type: Number | String,
            default: 0
        },
        acToken: {
            type: String,
            default: ''
        },
        userMobile: {
            type: String,
            default: ''
        },
        isWeb: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        acTempId(n,o) {
            if(n != o) {
                this.getNewActivityDesc();
            }
        }
    },
	data() {
		return {
            taskList: [],
            status: true,
            statusText: '去完成',
            tokenFlag: false,
            textFlag: true,
            clickFlag: true
		}
    },
    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; }
                    let data = {
                        id: item.id,
                        href: item.linkId,
                        resourceType: item.resourceType
                    };
                    this.$emit('activityTaskJump', data);
                // }
            }
        },
        // 活动详情
        getNewActivityDesc() {
            let self = this;
            let req = null;
            let {acTempId, acToken} = this;
            if(self.isWeb) {
                req = {
                    id: acTempId,
                    token: cookies.get('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失效
                    //     cookies.remove('token');
                    //     this.tokenFlag = false;
                    // }else {
                    //     this.tokenFlag = true;
                    // }
                    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 == 7 && this.taskList[i].resourceId == 1) {
                            this.$emit('getTaskId',{taskId: this.taskList[i].id});
                        }
                    }
                }
            })
            
        },
        // 处理数据
        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 {
                    width: 167px;
                    .task-t {
                        padding-bottom: 25px;
                        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>