<template>
    <section class="point-container">
        <div :class="{'point-bg': (status != 3)}">
            <div class="point-status">
                <img v-if="status == 1 || status == 2" src="../../static/images/point-success-nobg.png" />
                <img v-if="status == 3" src="../../static/images/point-success.png" />
                <img v-if="status == 4" src="../../static/images/point-fail.png" />
            </div>
            <div class="status-text">
                <p :class="{'fw': status != 3}">{{pointText1}}</p>
                <p :class="{'fw': status != 3}">{{pointText2}}</p>
            </div>
            <div class="point-award">
                <div v-if="status != 3" class="award-con">
                    <div>达到100勤奋分，即有资格瓜分100W云鹊豆</div>
                    <img src="../../static/images/point-award.png" />
                </div>
            </div>
            <div class="btn">
                <button @click="openApp">打开APP</button>
                <button @click="downloadApp">下载APP</button>
            </div>
        </div>
    </section>
</template>
<script>
export default {
    props: {
        status: {
            type: String | Number,
            default: 1
        }
    },
    data() {
        return {
            pointText1: "",
            pointText2: ""
        }
    },
    created() {
        if(this.status == 1) {
            this.pointText1 = "点赞成功，感谢您为TA拿下5勤奋分",
            this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分"
        }else if(this.status == 2) {
            this.pointText1 = "点赞成功",
            this.pointText2 = "登陆云鹊医APP，参加活动瓜分云鹊豆"
        }else if(this.status == 3) {
            this.pointText1 = "点赞成功，该活动已结束",
            this.pointText2 = "登陆云鹊医APP，查看更多精彩内容"
        }else if(this.status = 4) {
            this.pointText1 = "抱歉！您的点赞次数已达3次上限！",
            this.pointText2 = "登陆云鹊医APP，您也可获得75勤奋分"
        }
    },
    methods: {
        openApp() {
            // let path = window.location.origin + window.location.hash;
            let path = "http://10.177.10.217:3000/compaign_ssr/";
            this.$callApp(path);
        },
        downloadApp() {
            window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque';    
        }
    }
}
</script>
<style lang="less" scoped>
.point-container {
    .point-bg {
        width: 100%;
        height: 100vh;
        background-image:url('../../static/images/background.png');
        background-size: 100% 100%;
    }
    .point-status {
        padding: 45px 0 25px;
        text-align: center;
        img {
            width: 50px;
            height: 50px;
        }
    }
    .status-text {
        padding: 0px 0px 30px;
        text-align: center;
        p {
            font-size: 18px;
            font-weight: 700;
            color:#373839
        }
        p.fw {
            color: #fff;
        }
    }
    .point-award {
        .award-con {
            background: #fff;
            border-radius: 20px 20px 0px 0px;
            padding: 0px 18px;
            div {
                padding: 14px;
                font-size: 15px;
                color: #DD364F;
                text-align: center;
                font-weight: 700;
            }
            img {
                width: 100%;
            }
        }
    }
    .btn {
        text-align: center;
        background: #fff;
        padding: 40px 0px 91px;
        margin-top: -1px;
        button {
            display: inline-block;
            width: 335px;
            height: 40px;
            border-radius: 23px;
            background: #fff;
            color: gba(255,255,255,1);
            font-size: 16px;
            border: none;
        }
        button:first-child {
            background:linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
            color: #fff;
            margin-bottom: 12px;
        }
        button:last-child {
            border: 1PX solid rgba(230,77,69,1);
        }
    }
}
</style>