<template>
    <el-container class="flex-column">
        <div class="table-search">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabClick">
                <el-tab-pane label="套餐购买" name="1"></el-tab-pane>
                <el-tab-pane label="购买记录" name="2"></el-tab-pane>
            </el-tabs>
        </div>
        <el-main class="nopadding">
            <div class="table-container">
                <div class="renew-buy" v-if="activeName==1" v-loading="isLoading">
                    <div class="shop-info">
                        <div class="info-item">店铺名称：{{ shopData.shop_name }}</div>
                        <div class="info-item">服务有效期：{{ shopData.vip_end }}</div>
                        <div class="info-item">
                            <el-tooltip effect="dark" content="套餐购买时间：从之前套餐到期的时间开始叠加计算" placement="top-start">
                                <el-icon><el-icon-question-filled /></el-icon>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="shop-recharge">
                        <div class="title">选择服务套餐</div>
                        <div class="recharge-list">
                            <div :class="payIndex==indx?'recharge-item active':'recharge-item'" v-for="(item,indx) in comboData" :key="indx" @click="checkPay(indx)">
                                <div class="name">{{ item.name }}</div>
                                <div class="price"><span>￥</span>{{ item.f_money }}<i>￥{{ item.f_old_money }}</i></div>
                                <div class="time">{{ item.time }}{{ item.unit==1?'天':'年' }}</div>
                                <div class="sale">已优惠{{ item.diff }}元</div>
                                <div class="check"><el-icon><el-icon-select /></el-icon></div>
                            </div>
                        </div>
                    </div>
                    <div class="margin-top-15 checkbox-form">
                        <el-checkbox v-model="privacy" @change="showPrivacy">
                            <template #default>
                                <div class="privacy">同意并接受<span>《订购及服务协议》</span></div>
                            </template>
                        </el-checkbox>
                    </div>
                    <div data-rule-type="1">
                        <div class="pay-qrcode">
                            <div class="name">扫码支付</div>
                            <div class="qrcode-body">
                                <div class="qrcode-img">
                                    <div class="img"><img :src="payQrcode"></div>
                                    <div class="pay-tips">
                                        <i class="layui-icon layui-icon-login-wechat"></i>扫码支付
                                    </div>
                                </div>
                                <div class="qrcode-money">
                                    <div class="money"><span>实付：</span>{{ payMoney }}<span>元</span></div>
                                    <p class="h">温馨提示</p>
                                    <p>付款后服务立即生效</p>
                                    <p>多次购买套餐,可叠加服务时间</p>
                                    <p>开通后,如需发票,请联系客户经理 如有</p>
                                    <p>其它问题欢迎随时联系客服</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <tablePage ref="tablePage" @success="tableHandle" @successFull="tableHandleFull" v-if="activeName==2"></tablePage>
            </div>
        </el-main>
    </el-container>
	<el-dialog title="订购及服务协议" v-model="visible" :width="680" destroy-on-close :close-on-click-modal="false" :show-close="false">
		<div class="showPrivacy">
			<div v-html="privacyTxt"></div>
		</div>
		<template #footer>
			<el-button type="primary" @click="showPrivacyState">我已阅读并同意</el-button>
		</template>
	</el-dialog>
</template>

<script>
import tablePage from './components/table';
export default {
    components: {
        tablePage
    },
    data() {
        return {
            activeName:"1",
            isLoading:false,
            shopData:{},
            comboData:[],
            payIndex:0,
            visible:false,
            privacy:false,
            privacyTxt:"",
            payMoney:0,
            payQrcode:"https://inmei-print.oss-cn-guangzhou.aliyuncs.com/e2/7ade2a30e1bd50f02b5c245a6d4a28.jpg"
        }
    },
    mounted(){
        this.getRenewData()
    },
    methods: {
        checkPay(index){
            this.payIndex = index;
            this.payMoney = this.comboData[index].f_money
            this.privacy = false;
            this.payQrcode = "https://inmei-print.oss-cn-guangzhou.aliyuncs.com/e2/7ade2a30e1bd50f02b5c245a6d4a28.jpg"
        },
		showPrivacy(){
			this.visible = true;
            this.privacy = false;
		},
		async showPrivacyState(){
			this.visible = false;
            var comboId = this.comboData[this.payIndex].id;
            var loading = this.$loading();
            var resp = await this.$API.mRenew.qrcode.post({"comboId":comboId});
            loading.close()
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.payQrcode = resp.data.qrcode;
			if (this.privacy == false) {
				this.privacy = true;
			}
		},
        tabClick(event){
            this.activeName = event;
        },
        async getRenewData() {
            this.isLoading = true;
            var resp = await this.$API.mRenew.detail.get();
            this.isLoading = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.shopData = resp.data.shop;
            this.comboData = resp.data.combo;
            this.privacyTxt = resp.data.privacy;
            this.payMoney = this.comboData[0].f_money
        }
    }
}
</script>

<style>
.privacy {
	color: #333;
}
.privacy span {
	color: #f00;
}
.showPrivacy {
	max-height: 500px;
	overflow: hidden;
	overflow-y: scroll;
	line-height: 1.5;
}
.margin-top-15{margin-top: 15px;}
.shop-info{background-color: #f7f7fa;border-radius: 5px;padding: 15px 25px;display: flex;align-items: center;gap: 20px;font-size: 14px;}
.shop-info .info-item{display: flex;align-items: center;}
.shop-recharge .title{font-size: 16px;color: #252631;font-weight: 500;margin: 20px 0;}
.recharge-list{display: flex;align-items: center;gap: 20px;}
.recharge-item{border: 1px solid #dedede;border-radius: 10px;width: 298px;height: 160px;position: relative;cursor: pointer;}
.recharge-item.active{background: #c5e4ff;border: 1px solid #005bac;}
.recharge-item .name{padding: 24px 20px 16px;font-size: 14px;color: #252631;}
.recharge-item .price{text-align: center;color: #005bac;font-weight: 600;font-size: 36px;}
.recharge-item .price span{font-size: 18px;}
.recharge-item .price i{font-style: normal;font-size: 14px;color: #7c7c7e;text-decoration: line-through;padding-left: 10px;}
.recharge-item .time{font-size: 18px;color: #005bac;text-align: center;margin: 20px 0;}
.recharge-item .sale{position: absolute;width: 117px;height: 34px;line-height: 34px;text-align: center;border-radius: 17px 17px 17px 0;box-shadow: 0 2px 11px 0 #ffcbbb;color: #fff;font-size: 14px;font-weight: 500;top: 0;transform: translateY(-50%);right: 0;background: linear-gradient(90deg, #fba67d, #fe7a5f);}
.recharge-item .check{position: absolute;right: -1px;bottom: -1px;background-color: #005bac;color: #fff;width: 40px;height: 40px;line-height: 40px;text-align: center;border-radius: 10px 0 10px 0;display: none;}
.recharge-item.active .check{display: block;}
.recharge-item .check i{font-size: 24px;font-style: normal;font-weight: bold;}
.checkbox-form{display: flex;align-items: center;}
.checkbox-form .layui-form-checkbox[lay-skin=primary]>div{padding-right: 0;}
.pay-qrcode{margin-top: 20px;background-color: #f7f7fa;border-radius: 5px;padding: 15px 25px;}
.pay-qrcode .name{font-size: 18px;color: #333;margin-bottom: 10px;}
.qrcode-body{display: flex;align-items: flex-end;}
.qrcode-img{border: 1px solid #dedede;padding: 10px;border-radius: 10px;background-color: #fff;width: 230px;margin-right: 20px;}
.qrcode-img .pay-tips{text-align: center;font-size: 14px;color: #333;display: flex;align-items: center;justify-content: center;margin: 20px 0;}
.qrcode-img .img{height: 230px;display: flex;align-items: center;justify-content: center;}
.qrcode-img img{width: 100%;height: 100%;}
.qrcode-img .pay-tips i{padding-right: 5px;color: #1cae5b;font-size: 24px;}
.qrcode-money .money{font-size: 36px;color: #f00;font-weight: bold;margin-bottom: 20px;}
.qrcode-money .money span{font-size: 18px;}
.qrcode-money .h{font-weight: bold;font-size: 14px;}
.qrcode-money p{font-size: 14px;color: #0C0C0C;line-height: 32px;}
</style>