<template>
    <div id="shopping">
        <Nav :title="$t('shopping.title')" :iconType="false"></Nav>
        <div class="content">
            <template v-if="shoppingLsit.length">
                <div class="cell" v-for="item,index in shoppingLsit" :key="index">
                    <div class="top">
                        <div class="left">
                            <van-checkbox v-model="item.checked" @click="checkboxChange"></van-checkbox>
                        </div>
                        <div class="center">
                            <van-image :src="requestUrl+item.faceImg" />
                        </div>
                        <div class="right">
                            <div class="text">
                                <span>{{item.commodityName}}</span>
                            </div>
                            <div class="discount">
                                <div class="discountBox"><span v-if="item.isCoupon==1">{{$t('shopping.receive1')}}{{item.couponMoney}}{{$t('shopping.receive2')}}</span></div>
                                <div class="delBox">
                                    <van-icon @click="deletes(item)" name="delete-o" color="#999999" size="24" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('shopping.adult')}}</span>
                                <span>¥{{item.adultPrice}}/{{$t('shopping.people')}}</span>
                            </div>
                            <div class="def1">
                                <span>×{{item.adultNum}}</span>
                                <span>
                                    <van-icon name="arrow" color="#999999" size="15" />
                                </span>
                            </div>
                        </div>
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('shopping.children')}}</span>
                                <span>¥{{item.childPrice}}/{{$t('shopping.people')}}</span>
                            </div>
                            <div class="def1">
                                <span>×{{item.childNum}}</span>
                                <span>
                                    <van-icon name="arrow" color="#999999" size="15" />
                                </span>
                            </div>
                        </div>
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('shopping.location')}}</span>
                            </div>
                            <div class="def1">
                                <span>{{item.departurePlace}}</span>
                                <span>
                                    <van-icon name="arrow" color="#999999" size="15" />
                                </span>
                            </div>
                        </div>
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('shopping.date')}}</span>
                            </div>
                            <div class="def1">
                                <span>{{item.departureDate}}</span>
                                <span>
                                    <van-icon name="arrow" color="#999999" size="15" />
                                </span>
                            </div>
                        </div>
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('shopping.discount')}}</span>
                            </div>
                            <div class="def2">
                                <span>￥{{(item.adultPrice*item.adultNum)+(item.childPrice*item.childNum)}}</span>
                                <span>￥{{(item.adultPrice*item.adultNum)+(item.childPrice*item.childNum)-(item.isCoupon=='1'?Number(item.couponMoney):0) > 0 ?(item.adultPrice*item.adultNum)+(item.childPrice*item.childNum)-(item.isCoupon=='1'?Number(item.couponMoney):0):0}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="purchaseBox">
                    <div class="cell">
                        <div>
                            <van-checkbox checked-color="#f39c11" v-model="checkedAll" @click="checkedAllChange"><span style="color:#fff">{{$t('shopping.selectAll')}}</span></van-checkbox>
                        </div>
                        <div>
                            <div>
                                <van-button size="small" color="#fff" block @click="settlementAll"><span class="butSpan">{{$t('shopping.settlementAll')}}</span></van-button>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <van-empty :description="$t('shopping.none')"></van-empty>
            </template>
        </div>
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import { getShopCarList, removeShopCarList } from "@/api/comp/shopping.js";
import { submitOrder } from "@/api/comp/home.js";
export default {
    data() {
        return {
            loading: true,
            shoppingLsit: [],
            checkedAll: false,
            checkedType: false,
            requestUrl: process.env.VUE_APP_BASE_API,
        };
    },
    mounted() {
        this.getData();
        // setTimeout(() => {
        //     for (let i = 0; i < 5; i++) {
        //         this.shoppingLsit.push({
        //             checked: false,
        //             image: require("../../../public/static/images/cp2.png"),
        //             text: "商品标题商品标题商品标题商品标题商品标题",
        //             adult: "666",
        //             children: "333",
        //             place: "扬州",
        //             time: "7月24日",
        //             original: "998",
        //             present: "768",
        //         });
        //     }
        //     this.loading = false;
        // }, 1000);
    },
    methods: {
        getData() {
            this.loading = true;
            getShopCarList().then((res) => {
                if (res.code == 200) {
                    this.shoppingLsit = res.data.map((item) => {
                        item.checked = false;
                        return item;
                    });
                    this.loading = false;
                }
            });
        },
        checkboxChange() {
            let type = true;
            for (let i = 0; i < this.shoppingLsit.length; i++) {
                if (!this.shoppingLsit[i].checked) {
                    type = false;
                    break;
                }
            }
            this.checkedAll = type;
        },
        checkedAllChange() {
            if (this.checkedAll) {
                this.shoppingLsit.map((item) => {
                    return (item.checked = true);
                });
            } else {
                this.shoppingLsit.map((item) => {
                    return (item.checked = false);
                });
            }
        },
        settlementAll() {
            this.loading = true;
            let type = false;
            for (let i = 0; i < this.shoppingLsit.length; i++) {
                if (this.shoppingLsit[i].checked) {
                    type = true;
                }
            }
            if (type) {
                let orderArr = [];
                let orderMoneyAll = 0;
                for (let i = 0; i < this.shoppingLsit.length; i++) {
                    if (this.shoppingLsit[i].checked) {
                        orderArr.push({
                            shopCarId: this.shoppingLsit[i].id,
                            commodityId: this.shoppingLsit[i].commodityId, //商品id
                            departurePlace: this.shoppingLsit[i].departurePlace, //出发地
                            departureDate: this.shoppingLsit[i].departureDate, //出发日期
                            adultNum: this.shoppingLsit[i].adultNum, //成人人数
                            childNum: this.shoppingLsit[i].childNum, //儿童人数
                            orderMoney:
                                this.shoppingLsit[i].adultPrice *
                                    this.shoppingLsit[i].adultNum +
                                this.shoppingLsit[i].childPrice *
                                    this.shoppingLsit[i].childNum,
                            couponDeduction:
                                this.shoppingLsit[i].isCoupon == "1"
                                    ? Number(this.shoppingLsit[i].couponMoney)
                                    : 0,
                        });
                        orderMoneyAll +=
                            this.shoppingLsit[i].adultPrice *
                                this.shoppingLsit[i].adultNum +
                            this.shoppingLsit[i].childPrice *
                                this.shoppingLsit[i].childNum -
                            (this.shoppingLsit[i].isCoupon == "1"
                                ? Number(this.shoppingLsit[i].couponMoney)
                                : 0);
                    }
                }
                //替后端算出折扣后的价格
                for (let i = 0; i < orderArr.length; i++) {
                    orderArr[i].money =
                        orderArr[i].orderMoney - orderArr[i].couponDeduction;
                }
                let require = {
                    orderMoney: orderMoneyAll,
                    orderList: orderArr,
                };
                submitOrder(require)
                    .then((res) => {
                        if (res.code == 200) {
                            let commodityData = {
                                id: res.data.totalId,
                                list: res.data.orderList,
                            };
                            this.$store.commit(
                                "home/SET_ORDER_INFORMATION",
                                commodityData
                            );
                            this.$router.push({
                                path: "/confirmOrder",
                            });
                            this.loading = false;
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                    });
            } else {
                this.loading = false;
                this.$toast({
                    type: "fail",
                    message: this.$t("shopping.notSelected"),
                });
            }
        },
        deletes(item) {
            this.$dialog
                .confirm({
                    title: this.$t("shopping.tips"),
                    message: this.$t("shopping.confirmTips"),
                    confirmButtonText: this.$t("shopping.delete"),
                    cancelButtonText: this.$t("shopping.cancel"),
                })
                .then(() => {
                    this.loading = true;
                    removeShopCarList(item.id).then((res) => {
                        if (res.code == 200) {
                            this.$toast({
                                type: "success",
                                message: this.$t("shopping.successmassage"),
                            });
                            this.loading = false;
                            this.getData();
                        }
                    });
                })
                .catch(() => {
                    this.$notify({
                        type: "warning",
                        message: this.$t("shopping.massage"),
                    });
                });
        },
    },
    components: {
        Nav,
    },
    watch: {},
};
</script>

<style lang="scss" scoped>
#shopping {
    .content {
        background: #f9f9f9;
        min-height: calc(100vh - 1.28rem /* 128/100 */);
        padding-top: 0.12rem /* 12/100 */;
        box-sizing: border-box;
        .cell {
            background: #fff;
            margin-bottom: 0.12rem /* 12/100 */;
            .top {
                display: flex;
                padding: 0.12rem /* 12/100 */;
                box-sizing: border-box;
                height: 1.2rem /* 120/100 */;
                .left {
                    width: 10%;
                    display: flex;
                    align-items: center;
                }
                .center {
                    width: 30%;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                }
                .right {
                    width: 60%;
                    padding: 0 0 0 0.1rem /* 10/100 */;
                    box-sizing: border-box;
                    text-align: left;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .text {
                        font-size: 0.16rem /* 16/100 */;
                    }
                    .discount {
                        font-size: 0.13rem /* 13/100 */;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .discountBox {
                            span {
                                background: #e5f9f8;
                                display: block;
                                padding: 0.05rem /* 5/100 */ 0.1rem /* 10/100 */;
                                border-radius: 0.05rem /* 5/100 */;
                                color: #38d0c9;
                            }
                        }
                    }
                }
            }
            .bottom {
                padding: 0.12rem /* 12/100 */;
                .bottomCell {
                    font-size: 0.15rem /* 15/100 */;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.14rem /* 14/100 */ 0;
                    > div:nth-child(1) {
                        > span:nth-child(1) {
                            margin-right: 0.1rem /* 10/100 */;
                        }
                        > span:nth-child(2) {
                            color: #e94225;
                            font-size: 0.12rem;
                            font-weight:600;
                        }
                    }
                    .def1 {
                        > span:nth-child(1) {
                            margin-right: 0.05rem /* 5/100 */;
                        }
                    }
                    .def2 {
                        > span:nth-child(1) {
                            font-size: 0.13rem /* 13/100 */;
                            text-decoration: line-through;
                            color: #bbbbbb;
                            margin-right: 0.1rem /* 10/100 */;
                        }
                        > span:nth-child(2) {
                            color: #e94225;
                            font-size: 0.17rem /* 17/100 */;
                        }
                    }
                }
                .bottomCell:not(:last-child) {
                    border-bottom: 1px solid #eeeeee;
                }
            }
        }
        .purchaseBox {
            width: 100%;
            height: 0.44rem /* 44/100 */;
            .cell {
                width: 100%;
                height: 0.44rem /* 44/100 */;
                position: fixed;
                bottom: 0.84rem /* 84/100 */;
                left: 0;
                background: #38d0c9;
                /*background-image: linear-gradient(to right,#f7ce67, #e7a03c);*/
                // box-shadow: 0px 0px 5px #e9e9e9;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.12rem /* 12/100 */;
                box-sizing: border-box;
                margin-bottom: 0;
                > div:nth-child(1) {
                    font-size: 0.14rem /* 13/100 */;
                }
                > div:nth-child(2) {
                    font-size: 0.14rem /* 13/100 */;
                    font-weight:600;
                    > div {
                        width: 1rem /* 100/100 */;
                    }
                    button{
                    border-radius:30px;

                    }
                }
                .butSpan {
                    color: #38d0c9;
                    font-size: 0.14rem /* 14/100 */;
                }
            }
        }
    }
}
</style>
<style>
#shopping .purchaseBox .van-icon {
    border-color: #fff !important;
}
#shopping .van-image {
    width: 100%;
    height: 100%;
}
</style>