<template>
    <div>
        <h1>购物车页面</h1>
<!--共有多少条数据-->
        <el-divider><i class="el-icon-shopping-cart-2"></i></el-divider>
        <span v-show="allPriceNumStatus"><i class="el-icon-shopping-cart-full"></i>总件数:{{this.allNum}}件 &nbsp&nbsp&nbsp&nbsp
            <i class="el-icon-money"></i>总钱数:{{(this.allPrice).toFixed(2)}}元</span>
        <span style="float: right!important;">共有数据：<strong>{{totalNum}}</strong> 条</span>
<!--tabel表单-->
        <div>
            <el-table
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    stripe border fit highlight-current-row
                    :data="list"
                    :default-sort = "{prop: 'price', order: 'descending'}"
                    height="400"
                    style="width: 100%">
                <el-table-column type="selection" v-model="multipleSelectionStatus" width="55"></el-table-column>
                <el-table-column type="index" label="序号" align="left" width="60"></el-table-column>
                <el-table-column prop="shoppingCartName" label="名字" width="180"></el-table-column>
                <el-table-column label="数量" align="center" width="240">
                    <template slot-scope="scope">
                        <el-button @click="reduceFun(scope.row)" :disabled="scope.row.shoppingCatNum===1" size="mini">-</el-button>
                        &nbsp<span >{{scope.row.shoppingCatNum}}</span>&nbsp
                        <el-button @click="addCar(scope.row)" :disabled="scope.row.shoppingCatNum===99" size="mini">+</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="shoppingCartPrice" label="单价" width="100"></el-table-column>

                <el-table-column prop="shoppingCartPriceTotal" label="总钱数" width="100"></el-table-column>
<!--删除-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">
                            <i class="el-icon-delete"></i>_删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br>
<!--购买商品-->
            <el-button type="primary" @click="buyBtnClick" round><i class="el-icon-check" :loading="true"></i> 购买商品</el-button>
<!--取消-->
            <el-button type="warning" @click="cancelBtnClick"  round><i class="el-icon-close"></i> 取消</el-button>
        </div>
    </div>
</template>

<script>
    const axios=require('axios');
    import Cookies from 'js-cookie';
    export default {
        data(){
            return{
                multipleSelectionStatus:false,
                allPriceNumStatus:false,//页面展示的总钱数、总件数信息的【状态】
                allPrice:0,
                allNum:0,
                multipleSelection: [],
                list:[],
                multipleTable:[],
                totalNum:null,
                form:{
                    _id:'',
                    userName:'',
                    shoppingCartName:'',
                    shoppingCatNum:null,
                    shoppingCartPrice:null,
                    shoppingCartPriceTotal:null
                }
            }
        },
        mounted() {
            this.getInfoByKw();
        },
        created(){
            this.allPriceNumStatus;
        },
        methods:{
// 分页获取信息
            getInfoByKw(){
                axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/getInfoByKw',{
                    Kw:Cookies.get('username')
                })
                    .then((res)=>{
                        this.totalNum=res.data.msg.length;
                        this.list=res.data.msg;
                    })
            },
//单个删除
            handleDelete(index, row) {
                axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/remove',{_id:row._id})
                    .then((res)=>{
                        this.$message.success('删除成功!');
                        this.getInfoByKw();
                    })
            },
            handleChange(value) {
                console.log(value);
            },
            cancelBtnClick(){
                this.$router.go(-1);
            },
//购物车-数量增加
            addCar(row){
                row.shoppingCatNum++;
                //如果我先选中了集合，在修改数量
                if(this.multipleSelection.length==0){//集合中没数据
                    axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/updateOne',{
                        _id:row._id,
                        shoppingCartName:row.shoppingCartName,
                        shoppingCatNum:row.shoppingCatNum,
                        shoppingCartPrice:row.shoppingCartPrice,

                    })
                        .then((res)=>{
                            this.form.shoppingCartPriceTotal=res.data.shoppingCartPriceTotal;
                            this.getInfoByKw();
                        });
                }
                else{//集合中有数据，就直接修改 名字符合中的集合中Num值
                            axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/updateOne',{
                                _id:row._id,
                                shoppingCartName:row.shoppingCartName,
                                shoppingCatNum:row.shoppingCatNum,
                                shoppingCartPrice:row.shoppingCartPrice,
                            })
                                .then((res)=>{
                                    for(let i=0;i<this.multipleSelection.length;i++){
                                        if(this.multipleSelection[i]._id==row._id){
                                            this.multipleSelection[i].shoppingCartPriceTotal=res.data.shoppingCartPriceTotal;
                                        }
                                    }
                                    //将增加之后 修改完的每一条数据的总钱数 放到数组里
                                    this.allPrice=0;
                                    this.allNum=0;
                                    this.multipleSelection.forEach((item)=>{
                                    this.allPrice+=item.shoppingCartPriceTotal;
                                    this.allNum+=item.shoppingCatNum;
                                    })
                                });
                        }
            },
//购物车-数量减少
            reduceFun(row){
                row.shoppingCatNum--;
                if(this.multipleSelection.length==0){
                    axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/updateOne',{
                        _id:row._id,
                        shoppingCartName:row.shoppingCartName,
                        shoppingCatNum:row.shoppingCatNum,
                        shoppingCartPrice:row.shoppingCartPrice,

                    })
                        .then((res)=>{
                            this.form.shoppingCartPriceTotal=res.data.shoppingCartPriceTotal;
                            this.getInfoByKw();
                        });
                }
                else{
                    axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/updateOne',{
                        _id:row._id,
                        shoppingCartName:row.shoppingCartName,
                        shoppingCatNum:row.shoppingCatNum,
                        shoppingCartPrice:row.shoppingCartPrice,

                    })
                        .then((res)=>{
                            for(let i=0;i<this.multipleSelection.length;i++){
                                if(this.multipleSelection[i]._id==row._id){
                                    this.multipleSelection[i].shoppingCartPriceTotal=res.data.shoppingCartPriceTotal;
                                }
                            }
                            //将增加之后 修改完的每一条数据的总钱数 放到数组里
                            this.allPrice=0;
                            this.allNum=0;
                            this.multipleSelection.forEach((item)=>{
                            this.allPrice+=item.shoppingCartPriceTotal;
                            this.allNum+=item.shoppingCatNum;
                            })
                        });
                }
            },
//页面显示总钱数、总件数
            handleSelectionChange(val) {
                this.multipleSelection = val; //点击选中的时候，就已经将选中的信息放在集合中了

                //如果不选中数据，则让页面显示的总钱数，总件数 不显示
                if(this.multipleSelection.length==0){
                    this.allPriceNumStatus=false;
                }
                else{
                    this.allPriceNumStatus=true;
                }
                    this.allPrice=0;
                    this.allNum=0;
                    for(var i=0;i<this.multipleSelection.length;i++){
                        this.allPrice+=Number(this.multipleSelection[i].shoppingCartPriceTotal);
                        this.allNum+=this.multipleSelection[i].shoppingCatNum;
                    }

            },
//将私有的购物车，购买完的商品信息传到商品订单页面，没购买的商品还在购物车显示
            buyBtnClick() {

                const orderNumber1=new Date().getTime();
                const randomNum=parseInt((Math.random()*9+1)*100000);
                const orderNumber=orderNumber1.toString()+randomNum.toString();

                if (this.allPrice == 0 && this.allNum == 0) {//购物车为空，点击购买商品的提示信息
                    this.$message.error('请您勾选要购买的商品，点击取消可以返回上级菜单');
                }
                else{
                    if (confirm('确定要购买嘛？') == true) {
                        axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/getInfoByKw', {
                            Kw: Cookies.get('username')
                        })
                            .then((res) => {
                                    for (let i = 0; i < this.multipleSelection.length; i++) {//将选中购买的商品的statusCode==1
                                        axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/updateOne', {
                                            _id: this.multipleSelection[i]._id,
                                            shoppingCartName: this.multipleSelection[i].shoppingCartName,
                                            shoppingCatNum: this.multipleSelection[i].shoppingCatNum,
                                            shoppingCartPrice: this.multipleSelection[i].shoppingCartPrice,
                                            statusCode: 1
                                        })
                                    }
                                    })
                            if(this.multipleSelection.length<2){
                                    axios.post('https://mz.tshe.cn/restauantCH/user/orderCenter/addOne', {//单条数据插入到订单中心
                                        orderNumber: orderNumber,
                                        orderUS: Cookies.get('username'),
                                        orderName: this.multipleSelection[0].shoppingCartName,
                                        orderNum: this.multipleSelection[0].shoppingCatNum,
                                        orderPrice: this.multipleSelection[0].shoppingCartPrice,
                                        orderPriceTotal: this.multipleSelection[0].shoppingCartPriceTotal,
                                        orderPriceAll:this.allPrice,
                                        orderNumAll:this.allNum
                                    })
                                        .then((res) => {
                                            axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/removeCode')
                                        })
                                        .catch((err) => {
                                            this.$message.error('失败！');
                                        })
                            }
                            else{
                                axios.post('https://mz.tshe.cn/restauantCH/user/orderCenter/addOne',{//先单条插入[0]
                                    orderNumber: orderNumber,
                                    orderUS: Cookies.get('username'),
                                    orderName: this.multipleSelection[0].shoppingCartName,
                                    orderNum: this.multipleSelection[0].shoppingCatNum,
                                    orderPrice: this.multipleSelection[0].shoppingCartPrice,
                                    orderPriceTotal: this.multipleSelection[0].shoppingCartPriceTotal,
                                    orderPriceAll:this.allPrice,
                                    orderNumAll:this.allNum
                                })
                                    .then(async ()=>{
                                        for(var Z=0;Z<this.multipleSelection.length-1;Z++) {
                                            axios.post('https://mz.tshe.cn/restauantCH/user/orderCenter/addMany', {//在增加[1~n]到子文档
                                                orderNumber: orderNumber,
                                                orderUS: Cookies.get('username'),
                                                orderName: this.multipleSelection[Z + 1].shoppingCartName,
                                                orderNum: this.multipleSelection[Z + 1].shoppingCatNum,
                                                orderPrice: this.multipleSelection[Z + 1].shoppingCartPrice,
                                                orderPriceTotal: this.multipleSelection[Z + 1].shoppingCartPriceTotal
                                            })
                                                .then((res) => {
                                                    axios.post('https://mz.tshe.cn/restauantCH/shoppingCart/removeCode')
                                                })
                                                .catch((err) => {
                                                    this.$message.error('失败！');
                                                })
                                        }
                                    })

                            }
                                    this.$message.success(`尊敬的用户，已将该信息提交到订单中心中，请注意查看`);
                                    //定时任务
                                    let that = this;
                                    setTimeout(function () {
                                        that.getInfoByKw();
                                    }, 1000);
                    }
                }
            }
        }
    }
</script>
