<!--
 * @Description: 订阅卡片
 * @Author: wangye15
 * @Email: wangye15@baidu.com
 * @Date: 2021-08-25 17:42:36
 * @LastEditors: wangye15
 * @LastEditTime: 2021-09-11 16:57:48
-->
<template>
    <view class="subscribe-card">
        <view class="subscribe-title c-gap-bottom-large">
            <view class="title c-font-large c-color-title">
                {{ title }}
            </view>
            <view class="subTitle c-font-normal">
                {{ subTitle }}
            </view>
        </view>
        <view class="subscribe-welfare c-gap-bottom-large">
            <view class="subscribe-box">
                <view class="subscribe-box-tips">
                    {{ isSubscribe ? `您已预订${city}到苗提醒，请耐心等待` : `${city}暂无现货，您可以订阅到苗提醒` }}
                </view>
                <view class="subscribe-box-btn">
                    <c-navigate :url="`/pages/physical/subscribe/index?city=${city}&level1=${level1}`">
                        <c-button
                            :height="40"
                            :font-size="15"
                            :primary-color="isSubscribe ? '#fd503e' : '#fff'"
                            :border-color="isSubscribe ? '#fd503e' : ''"
                            :background="isSubscribe ? '#fff' : btnColor"
                            font-weight="bold"
                            border-radius="1rem"
                        >
                            {{ isSubscribe ? '查看订阅' : '立即订阅' }}
                        </c-button>
                    </c-navigate>
                </view>
                <view class="subscribe-tip c-color-gray c-font-normal">
                    已为{{ subscribeNum }}人成功预订疫苗
                </view>
            </view>
            <view class="subscribe-group">
                <view class="subscribe-info">
                    <c-image
                        src="https://med-fe.cdn.bcebos.com/physical/subscribe_vaccines_icon.png"
                        :hack-white-stroke="false"
                        width=".52rem"
                        height=".52rem"
                    />
                    <view class="subscribe-info-tips">
                        <view class="subscribe-info-title c-font-medium">疫苗福利群</view>
                        <view class="c-color-gray c-font-normal">现货通知 | 定期抽奖 | 专家答疑</view>
                    </view>
                </view>
                <view>
                    <c-button
                        :height="28"
                        primary-color="#FD503E"
                        border-color="#FD503E"
                        border-radius="1rem"
                        @tap="onOpenShare"
                    >
                        立即入群
                    </c-button>
                </view>  
            </view>
        </view>
        <share-img
            v-if="showImg && welfareImgUrl"
            text="长按保存图片到相册"
            :src="welfareImgUrl"
            :btn-opts="[{
                text: '保存到图片相册',
                type: 'save',
                color: '#FF6050',
                borderColor: '#FF6050',
            }]"
            @close="onCloseShare"
        />
    </view>
</template>

<script>
import CButton from '@baidu/med-ui/components/Button/Button';
import CNavigate from '@components/common/navigate';
import CImage from '@components/common/image';
import ShareImg from '@commonComponents/share-img';

export default {
    config: {
        component: true
    },
    components: {
        CButton,
        CNavigate,
        CImage,
        ShareImg
    },
    props: {
        /**
         * 列表标题信息
         */
        title: {
            type: String,
            default: ''
        },
        /**
         * 列表副标题信息
         */
        subTitle: {
            type: String,
            default: ''
        },
        /**
         * 当前疫苗类型
         */
        level1: {
            type: String,
            default: ''
        },
        /**
         * 当前城市
         */
        city: {
            type: String,
            default: ''
        },
        /**
         * 按钮颜色
         */
        btnColor: {
            type: String,
            default: 'linear-gradient(90deg, #FD503E 0%, #FF3E00 100%, #F7603E 100%)'
        },
        /**
         * 福利群图片地址
         */
        welfareImgUrl: {
            type: String,
            default: ''
        },
        /**
         * 已预约人数
         */
        subscribeNum: {
            type: Number,
            default: 0
        },
        /**
         * 当前用户是否已预约
         */
        isSubscribe: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showImg: false
        };
    },
    methods: {
        onOpenShare() {
            this.showImg = true;
        },
        onCloseShare() {
            this.showImg = false;
        }
    }
};
</script>

<style lang="less" module>
.subscribe-card {
    .subscribe-title {
        .title {
            font-weight: bold;
        }
        .subTitle {
            color: #fd503e;
        }
    }
    .subscribe-welfare {
        height: 2.18rem;
        text-align: center;
        background: url('https://med-fe.cdn.bcebos.com/physical/subscribe_bg.png') no-repeat;
        background-size: 100% 100%;
        .subscribe-box {
            border-bottom: .01rem solid #F5F5F5;
            &-tips {
                padding-top: .18rem;
                padding-bottom: .16rem;
            }
            &-btn {
                margin: 0 auto;
                width: 2.01rem;
            }
        }
        .subscribe-tip {
            padding-top: .07rem;
            padding-bottom: .11rem;
        }
    }
    .subscribe-group {
        padding: .12rem .13rem .14rem .13rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .subscribe-info {
            display: flex;
            align-items: center;
            &-tips {
                padding-left: .07rem;
            }
            &-title {
                text-align: left;
                padding-bottom: .03rem;
            }
        }
    }
}

</style>
