/*
    支付页
*/
<template>
    <div class="payment">
        <div class="payment-box">
            <div class="top">
                <div class="back" @click="close"></div>
                结算中心
            </div>
            <div class="address-box" @click="set_address">
                <div class="icon icon-address"></div>
                <div class="address-info" v-if="changeAddressInfo.id">
                    <shop-address-item :info="changeAddressInfo"></shop-address-item>
                </div>
                <div class="tip" v-else>暂无收货地址，立即添加</div>
                <div class="icon icon-right"></div>
            </div>
            <div class="box">
                <shop-commodity :info="info" :specList="specList"></shop-commodity>
                <div class="remarks">
                    <div class="title">留言</div>
                    <div class="text"><input type="text" v-model="orderMsg" v-iosfit placeholder="给卖家留言..."></div>
                </div>
                <shop-count v-model="newNum" :stock="info.stock"></shop-count>
            </div>
            <div style="height: 20px"></div>
        </div>
        <div class="btn-box">
            <div class="price">
                <span>应付总额: </span><span class="sum">￥{{info.price * this.num}}</span>
            </div>
            <div class="btn" @click="sub">立即支付</div>
        </div>
        <transition name="move-right">
            <div class="address-list-box" v-if="addressShow">
                <shop-address-list
                    v-model="addressShow"
                    :info="info"
                    :addressList="addressList"
                    :addressId="addressId"
                    @set_addressId="set_addressId"
                    @get_addressList="get_addressList"
                ></shop-address-list>
            </div>
        </transition>
    </div>
</template>

<script>
    import {getAddressList,createOrder} from '@/plugins/API/apiShop'
    import UserAgent from '@/plugins/UserAgent/index'

    import shopAddressItem from './shop_addressItem'
    import shopCommodity from './shop_commodity'
    import shopCount from './shop_count'
    const shopAddressList =resolve => require(['./shop_addressList'],resolve)

    export default {
        components: {
            shopAddressItem,
            shopCommodity,
            shopCount,
            shopAddressList,
        },
        props: {
            info:{},
            specList: {},
            num: {},
        },
        data(){
            return {
                addressShow: false,
                newNum: this.num,
                addressList: [],
                addressId: 0,
                orderMsg: '',
            }
        },
        computed: {
            changeAddressInfo(){
                let arr = this.addressList.filter(item => {
                    return item.id == this.addressId;
                })
                return arr[0] || this.addressList[0] || {};
            },
        },
        watch: {
            changeAddressInfo(){
                if(this.changeAddressInfo.id){
                    this.addressId = this.changeAddressInfo.id;
                }
            },
            newNum(){
                this.$emit('count',this.newNum)
            },
        },
        mounted(){
            this.get_addressList()
        },
        methods: {
            //获取的地址列表
            async get_addressList(){
                const res = await getAddressList({
                    uin: this.info.uin,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.addressList = res.data;
                }
            },
            close(){
                this.$emit('input',false)
            },
            set_address(){
                this.addressShow = true;
            },
            set_addressId(id){
                this.addressId = id;
            },
            async sub(){
                if(!this.changeAddressInfo.id){
                    this.$layer.msg('请选择收货地址！');
                    return;
                }
                let specList = [];
                this.specList.forEach(item => {
                    specList.push(item.selectId)
                })
                const res = await createOrder({
                    uin: this.info.uin,
                    goodsId: this.info.id,
                    addressId: this.changeAddressInfo.id,
                    orderMsg: this.orderMsg,
                    specList: JSON.stringify(specList),
                    num: this.newNum,
                    backUrl: window.location.href,
                    payType: UserAgent.isWx() ? 1 : 1,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.$layer.msg('成功');
                    let url = '';
                    if(res.data.payType == 1){
                        url = '//web.guangdianyun.tv/pay/wxpay?payconfig='+encodeURIComponent(JSON.stringify(res.data))
                    }else if(res.data.payType == 2){
                        url = '//web.guangdianyun.tv/pay/alipay?form='+encodeURIComponent(res.data.result.result)
                    }
                    window.location.href = url;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .payment{
        position: relative;
        height: 100%;
        padding-bottom: 50px;

        .payment-box{
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
    .payment-box{
        .top{
            position: relative;
            height: 40px;
            line-height: 40px;
            background: #F0F1F3;
            color: #111111;
            font-size: 14px;
            text-align: center;

            .back{
                position: absolute;
                top: 0;
                left: 0;
                width: 40px;
                height: 40px;
                background: url("./img/left.png") no-repeat center center;
                background-size: 8px auto;
            }
        }
        .address-box{
            position: relative;
            padding: 0 40px;
            height: 60px;
            background: url("./img/x.png") repeat-x bottom left;
            background-size: auto 2px;

            .icon-address{
                position: absolute;
                top: 0;
                left: 0;
                width: 40px;
                height: 100%;
                background: url("./img/address.png") no-repeat center center;
                background-size: 12px auto;
            }
            .icon-right{
                position: absolute;
                top: 0;
                right: 0;
                width: 40px;
                height: 100%;
                background: url("./img/right.png") no-repeat center center;
                background-size: 8px auto;
            }
            .tip{
                line-height: 60px;
                font-size: 13px;
                color: #666666;
            }
            .address-info{

            }
        }
        .box{
            padding: 0 12px;

            .remarks{
                margin: 11px 0;
                display: flex;
                line-height: 25px;

                .title{
                    flex: 0 0 auto;
                    margin-right: 10px;
                    width: 30px;
                    color: #666666;
                    font-size: 12px;
                }
                .text{
                    flex: 1;

                    input{
                        vertical-align: middle;
                        display: block;
                        width: 100%;
                        height: 100%;
                        border: 0;
                        outline: 0;
                        font-size: 12px;
                    }
                }
            }
        }
    }
    .btn-box{
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 5px 12px;
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 40px;
        background-color: #fff;
        border-top: 1px solid #E5E5E5;

        .price{
            flex: 1;
            margin-right: 10px;
            font-size: 13px;
            color: #111;

            span{
                vertical-align: middle;
            }
            .sum{
                font-size: 18px;
                color: #F14936;
            }
        }

        .btn{
            display: block;
            padding: 0 40px;
            line-height: 40px;
            border-radius: 40px;
            font-size: 15px;
            color: #fff;
            text-align: center;
            background: linear-gradient(to right,#F68044,#EF3030);
            cursor: pointer;
        }
    }
    .address-list-box{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
    }
</style>