<template>
    <div v-loading="loading">
        <div class="white-box">
            <div class="table">
                <el-table
                    :data="goods"
                    style="width: 100%">
                     <el-table-column label="商品名称" prop="GOODS_NAME">
                    </el-table-column>

                    <el-table-column label="图片" >
                        <template slot-scope="scope">
                            <img :src="scope.row.COVER" alt="" style="width:100%">
                        </template>
                    </el-table-column>

                    <el-table-column label="商品价格" prop="SELL_PRICE">
                    </el-table-column>
                    <el-table-column label="价格PV" prop="PRICE_PV">
                    </el-table-column>
                    <el-table-column label="库存" prop="STORE_NUMS">
                    </el-table-column>

                    <el-table-column label="数量" prop="chose_num">

                    </el-table-column>
                    <el-table-column label="合计金额" prop="num_plus">

                    </el-table-column>
                </el-table>
            </div>
            <div class="address_box">
                请选择收货地址：
                <el-radio-group v-model="addressId" @change='choseAddress'>
                    <div v-for="(item , index) in all_address" :key='index' class="address">
                        <el-radio :label="item.ID" >
                            {{item.PROVINCE_NAME}}省{{item.CITY_NAME}}市{{item.COUNTY_NAME}}县&nbsp;&nbsp;&nbsp;&nbsp;
                            详细地址{{item.ADDRESS}}
                            收件人姓名：{{item.CONSIGNEE}}&nbsp;&nbsp;&nbsp;&nbsp;
                            手机号码：{{item.MOBILE}}
                        </el-radio>
                    </div>
                </el-radio-group>
            </div>
            <div class="address_box">
                请选择支付方式：
                <el-radio-group v-model="payType" @change='chosePayType'>
                    <div v-for="(item , index) in payList" :key='index' class="address">
                        <el-radio :label="item.type" >
                            {{item.name}}
                        </el-radio>
                    </div>
                </el-radio-group>
            </div>
            <div class="box address_box">
                合计：
                <div class="sum">
                    <div class="sum_box">
                        <div>运费</div>
                        <div>￥{{payType=="cash"?freight:pointFreight}}元</div>
                    </div>
                    <div class="sum_box">
                        <div>实付金额</div>
                        <div>￥{{payType=="cash"?cashSum:pointsSum}}元</div>
                    </div>
                    <div class="sum_box">
                        <div>账户积分</div>
                        <div>{{balance.points}}</div>
                    </div>
                    <div class="sum_box">
                        <div>账户余额</div>
                        <div>￥{{balance.cash}}元</div>
                    </div>
                </div>
            </div>
            <div>
                <el-button @click="goToAccounts()" :loading="submitButtonStat">去结算</el-button>
            </div>
        </div>
    </div>
</template>

<script>
 import network from '@/utils/network'
 import tool from '@/utils/tool'
    export default{
        name:'order',
        data(){
            return{
                loading: true,
                goods:[],
                payList:[],
                all_address:[],
                balance:{},
                addressId:'',
                payType:'',
                pointsSum:'',
                cashSum:'',
                freight:'',
                pointFreight:'',
                goodsId:'',
                goodsNum:'',
                payPassword:'',
                submitButtonStat:false,

            }
        },
        created(){
            this.getShowCart();
            let option= sessionStorage.getItem('order_goods');
            if(option){
                let pageGoodsList=JSON.parse(option);
                console.log(pageGoodsList);
                let pageList;
                for( let i in pageGoodsList ) {
                    pageList =  pageGoodsList[i];
                    if (!pageList) continue;

                    pageList.map((pageData, index)=>{
                        if( Number(pageData.chose_num) > 0 ) {
                            pageData.num_plus = pageData.SELL_PRICE * Number(pageData.chose_num);
                            this.goods.push(pageData)
                        }
                    })
                }

                this.getSumMoney();
            }
        },
        methods:{
            goToAccounts(){
                this.submitButtonStat = true
                // let path = 'sure-order'
                this.$prompt('请输入支付密码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputType: 'password',
                    inputPattern: /\S+/,
                    inputErrorMessage: '请输入支付密码'
                }).then(({value}) => {
                    this.payPassword = value
                    return network.postData('shop/sure-order',{addressId:this.addressId,payType:this.payType,goodsId:this.goodsId,goodsNum:this.goodsNum,payPassword: this.payPassword}).then(response => {
                        this.$message({
                            message: response,
                            type: 'success'
                        })

                        this.submitButtonStat = false
                        this.$router.go(-1)
                        this.$router.push({path: `/shop/order-list`})
                    }).catch(() => {
                        this.submitButtonStat = false
                    }).catch((response) => {
                        this.submitButtonStat = false
                    })

                })



            },
            getSumMoney(){
                // let points_plus_sum=[];
                let cash_plus_sum=[];
                let goodsId=[];
                let goodsNum=[];
                let choseNum = 0;
                this.goods.map((item,index)=>{
                    choseNum = Number(item.chose_num);
                    if( choseNum > 0 ) {
                        // points_plus_sum.push(item.SELL_PRICE * choseNum);
                        cash_plus_sum.push(item.SELL_PRICE * choseNum*(item.DISCOUNT/100));
                        goodsId.push(item.ID);
                        goodsNum.push(choseNum);
                    }
                })
                this.goodsNum=goodsNum;
                this.goodsId=goodsId;
                //增加运费03-12yuan
                let payAmount = tool.sum(cash_plus_sum);
                // let payPointAmount = tool.sum(points_plus_sum);

                if(payAmount>=300){
                  this.pointFreight = this.freight = 0;
                }else{
                  this.pointFreight = this.freight = 15;
                }
                // if(payPointAmount>=300){
                //     this.pointFreight = 0;
                // }else{
                //     this.pointFreight = 15;
                // }
                //console.log('points_plus_sum',points_plus_sum);
                //console.log('cash_plus_sum',cash_plus_sum);
                // this.pointsSum=tool.formatPrice(tool.sum(points_plus_sum) + this.pointFreight);
              this.pointsSum = this.cashSum = tool.formatPrice(tool.sum(cash_plus_sum) + this.freight) ;
            },
            getShowCart(){
                network.getData('shop/show-cart')
                .then(response=>{
                    this.loading=false;
                    // console.log(response);
                    this.all_address=response.allAddress;
                    this.all_address.map((item,index)=>{
                        if(item.IS_DEFAULT==1){
                            this.addressId=item.ID
                        }
                    })
                    for(let key in response.payList){
                        this.payList.push({type:key,name:response.payList[key].name})
                    }
                    // console.log(this.payList)
                    // for(let key in response.userBalance){
                    //     this.balance.push({type:key,own_price:response.userBalance[key]})
                    // }
                    this.balance=response.userBalance;
                    this.payType=this.payList[0].type;//默认设置为第一项付款方式
                   // console.log(this.balance)
                })
            },
            chosePayType(type){
                console.log(type);
                console.log(this.payType);
            },
            choseAddress(addressId){
                console.log(addressId);
            }
        }
    }
</script>

<style scoped>
.address{
    /* height: 3rem; */
    line-height: 3.5rem;

}
.address_box{
     border-bottom: 1px solid #e3e3e3;
}
.sum{
    display: inline-block;
}
.box{
    margin: 1rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 1rem;
}
.sum_box{
    display: flex;
    margin-left: 1rem;
}
.sum_box > div{
    line-height: 2rem;
}
.sum_box > div:nth-child(1){
    margin-right: 1rem;
}
</style>
