<template>
    <view>
        <view class="header">
            <image class="header-card" src="https://card.ysd-bs.com/storage/materials/2021/09/01/upgrade-card.png" mode="widthFix"></image>
            <image class="header-back" src="https://card.ysd-bs.com/storage/materials/2021/09/01/subscribe-back.png" mode="widthFix"></image>
        </view>
        
        <!-- 生效类型 -->
        <view class="radios">
            <view class="radios-title">生效时间</view>
            <view class="radios-subtitle">*请选择升级包生效时间</view>
            <radio-group class="radios-box" @change="radioChange">
                <label class="radio-item" v-for="(item, index) in types" :key="index">
                    {{ item.name }}生效
                    <radio :value="item.id" :checked="item.id === typeId" color="#252f4b" />
                </label>
            </radio-group>
        </view>
        
        <!-- 升级包类型 -->
        <view class="combo">
            <view class="combo-title">*请选择升级包类型</view>
            <view class="combo-tabs">
                <view class="combo-item" :class="{show : comboId === item.business_item_id}" v-for="(item, index) in item5g" :key="index" @tap="onCombo(item.business_item_id)">
                    <view class="combo-item-header">
                        <view class="combo-item-title">{{ item.title || '-' }}</view>
                        <view class="combo-item-price">¥{{ item.price || '-' }}</view>
                    </view>
                    <view class="combo-item-info">
                        <image v-if="item.cover != ''" :src="item.cover" mode="widthFix"></image>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 提交预约表单 -->
        <form class="combo-from" @submit="comboSubmit">
            <view class="from-title">预约信息</view>
            <view class="from-submit">*请填写预约信息</view>
            <input class="from-input" type="text" name="name" placeholder="请输入姓名" :value="name" />
            <input class="from-input" type="number" name="phone" placeholder="请输入手机号" :value="phone" />
            <button class="from-button" size="default" form-type="submit">立即预约</button>
        </form>
        
        <!-- 客服电话 -->
        <view class="service">
            <view@tap="callPhone">
                <view>客服热线：{{ mobile }}</view>
                <view class="callPhone">拨打客服电话</view>
            </view>
        </view>
    </view>
</template>
<script>
    import { business, create } from '@/apis/interfaces/subscribe'
    export default {
    	data() {
    		return {
                businessId  : '',
                comboId     : '',
                mobile      : '',
                phone       : '',
                name        : '',
                typeId      : '',
                types       : [],
                item5g      : []
            }
        },
        onLoad(e) {
            business(1).then(res => {
                this.businessId = res.business_id
                this.mobile     = res.mobile
                this.types      = res.type
                this.typeId     = res.type[0].id
                this.item5g     = res.items['5G']
            })
        },
        onShow() {},
        methods:{
            // 拨打电话
            callPhone(){
                uni.makePhoneCall({
                    phoneNumber: this.mobile,
                    fail(){}
                })
            },
            
            // 提交表单
            comboSubmit(e){
                let formValue = e.detail.value
                if(this.comboId === ''){
                    uni.showToast({
                        title: "请选择套餐类型",
                        icon : "none"
                    })
                    return
                }
        
                if(formValue.name === ''){
                    uni.showToast({
                        title: "请输入预约人姓名",
                        icon : "none"
                    })
                    return
                }
        
                if(formValue.phone === ''){
                    uni.showToast({
                        title: "请输入预约办理手机号码",
                        icon : "none"
                    })
                    return
                }
        
                create({
                    business_id     : this.businessId,
                    business_item_id: this.comboId,
                    type            : this.typeId,
                    mobile          : formValue.phone,
                    username        : formValue.name
                }).then(res => {
                    uni.showModal({
                        title       : "提示",
                        icon        : res,
                        showCancel  : false,
                        confirmColor: "#252f4b",
                        success     : modalRes => {
                            if(modalRes.confirm){
                                this.phone = ''
                                this.name  = ''
                            }
                        }
                    })
                }).catch(err=>{
                    uni.showToast({
                        title: err.message,
                        icon : "none"
                    })
                })
            },
        
            // 选择套餐
            onCombo(id){
                this.comboId = id
            },
        
            // 选择生效时间
            radioChange(e){
                this.typeId = e.detail.value
            }
        }
    }
</script>

<style lang="scss" scoped>
     .header{
        position: relative;
        background: linear-gradient(to top, #575a85, #252f4b);
        padding: 60rpx 60rpx 0;
    }
    
    .header-card{
        vertical-align: top;
    }
    
    .header-back{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        vertical-align: top;
    }
    
    /* 生效时间 */
    .radios{
        background: white;
        padding: 30rpx 50rpx;
        border-bottom: solid 20rpx #e8e8ee;
    }
    
    .radios-title{
        font-size: 34rpx;
    }
    
    .radios-subtitle{
        padding: 10rpx 0;
        font-size: 26rpx;
        color: #910000;
    }
    
    .radios-box{
        margin: 0 -10rpx;
        display: flex;
        flex-wrap: wrap;
    }
    
    .radio-item{
        width: calc(50% - 20rpx);
        box-sizing: border-box;
        border-radius: 10rpx;
        border:solid 1rpx #d2d2d2;
        margin: 10rpx;
        padding: 10rpx 30rpx;
        display: flex;
        height: 100rpx;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
    }
    
    /* 套餐类型 */
    .combo{
        background: white;
        padding: 30rpx 50rpx;
    }
    
    .combo-title{
        font-size: 26rpx;
        color: #910000;
    }
    
    .combo-tabs{
        margin: 0 -10rpx;
        padding-top: 20rpx;
        display: flex;
        flex-wrap: wrap;
    }
    
    .combo-item{
        margin: 10rpx;
        width: calc(50% - 20rpx);
        box-sizing: border-box;
    }
    
    .combo-item.show > .combo-item-header{
        background: white;
        box-shadow: 3rpx 0 4rpx 4rpx rgba(255, 152, 0, .13);
    }
    
    .combo-item-header{
        background: #fffbf4;
        border:solid 1rpx #e3a03a;
        border-bottom: none;
        border-radius: 20rpx 20rpx 0 0;
        text-align: center;
        padding: 20rpx;
    }
    
    .combo-item-title{
        font-size: 28rpx;
        color: #2d2d2d;
    }
    
    .combo-item-price{
        font-weight: bold;
        font-size: 48rpx;
        color: #e3a03a;
    }
    
    .combo-item-info{
        background: #9e652a;
        border-radius: 0 0 20rpx 20rpx;
        font-size: 24rpx;
        text-align: center;
        color: white;
        overflow: hidden;
        image{
            width: 100%;
        }
    }
    
    /* 预约表单 */
    .combo-from{
        display: block;
        padding: 30rpx 50rpx;
        border-top: solid 20rpx #e8e8e8;
        background: white;
    }
    
    .from-title{
        font-size: 34rpx;
    }
    
    .from-submit{
        padding: 10rpx 0;
        font-size: 26rpx;
        color: #910000;
    }
    
    .from-input{
        background: #e2e2e2;
        height: 90rpx;
        border-radius: 40rpx;
        margin-top: 30rpx;
        padding: 0 30rpx;
    }
    
    .from-button[size="default"]{
        background: #252f4b;
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        padding: 0;
        margin-top: 30rpx;
        font-weight: normal;
        color: white;
        border-radius: 40rpx;
    }
    
    /* 客服电话 */
    .service{
        padding: 60rpx;
        text-align: center;
        background: #e8e8e8;
        font-size: 28rpx;
    }
    
    .callPhone{
        color: #252f4b;
    }
</style>
