<template>
    <el-dialog
            title=""
            :visible.sync="dialogVisible"
            :append-to-body="true"
            width="800px"
            custom-class="cc-dialog"
    >

        <div v-if="showTips" class="tips" style="color: #103a22">
            {{$t('当前用户')}}：{{$store.state.userinfo.nickname}}{{$t('没有VIP权限，无法查阅此文章！')}}
        </div>
        <div class="h-24px" v-if="showTips"></div>
        <div class="flex">
            <ui-vip-preset class="mr-32px" @choose="handleChoose(vipSmeal)" v-for="vipSmeal in vipSmeals" :item="vipSmeal"></ui-vip-preset>
        </div>

    </el-dialog>
</template>

<script>
    export default {
        name: "vip-srv-box",
        props:{
            showTips:{
                type:Boolean,
                default(){
                    return false;
                }
            }
        },
        data(){
            return {
                dialogVisible: false,
                vipSmeals:[]
            }
        },
        methods:{
            open(){
                this.dialogVisible = true;
            },
            close(){
                this.dialogVisible = false;
            },
            async handleChoose(vipSmeal) {

                let resp = await this.$http.post(this.$api.mzUser.createVipOrder,this.$qs.stringify({vipCode:vipSmeal.code}))
                if(resp.data.status === 200){
                    this.$store.dispatch('SHOW_PAY_BOX',{type:'vip',vipPayData:resp.data.data.vipSmOrder});
                    this.close();
                    // await this.$confirm(this.$t('请在弹出的窗口完成付款操作?'), this.$t('提示'), {
                    //     confirmButtonText:this.$t( '已完成付款'),
                    //     cancelButtonText:this.$t( '取消') ,
                    //     type: 'warning'
                    // })
                    // resp = await this.$http.post(this.$api.mzUser.confirmVipOrder,this.$qs.stringify({orderCode:resp.data.data.vipSmOrder.code}))
                    //
                    // if(resp.data.status === 200){
                    //     this.$message.success(this.$t( '开通成功'));
                    //     this.loadData();
                    //     this.close();
                    // }


                }



            },
        async loadData(){
            let resp = await this.$http.post(this.$api.mzUser.userinfo);

            if(resp.data.status === 200){
                this.userinfo = resp.data.data.mzUser;
                this.$store.commit('UPDATE_LOGIN_INFO',resp.data.data.mzUser)
            }
        }
        },
        async created() {
            let r = await  this.$http.post(this.$api.common.vipSmeals);
            if(r.data.status === 200){
                this.vipSmeals = r.data.data.vipSmeals;
            }
        }
    }
</script>

<style scoped>
    .cc-dialog{
        background-color:#F7F7F7;
    }



</style>