<template>
    <div class="shop-cart">
        <div class="cart-list">
            <div v-show="!isDataNull">
                <div class="cart-hd flex bg-white">
                    <div class="check-box">
                        <!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
                        <el-checkbox
                            v-model="isSelectedAll"
                            @change="onBoxClick($event, 3, '')"
                            >全选</el-checkbox
                        >
                    </div>
                    <div class="info flex row-center">商品信息</div>
                    <div class="price flex row-center">单价</div>
                    <div class="num flex row-center">数量</div>
                    <div class="money flex row-center">合计</div>
                    <div class="operate flex row-center">操作</div>
                </div>

                <div class="cart-con bg-white">
                    <div
                        class="m-b-10 bg-white"
                        v-for="(item, index) in shopCartList"
                        :key="index"
                    >
                        <div class="flex shop">
                            <!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
                            <el-checkbox
                                :value="item.is_selected == 1"
                                @change="onBoxClick($event, 1, index)"
                            >
                            </el-checkbox>

                            <div class="xs normal m-l-10">
                                {{ item.shop.shop_name }}
                            </div>
                        </div>
                        <div
                            class="item flex"
                            v-for="(item2, index2) in item.cart"
                            :key="index2"
                        >
                            <div class="check-box">
                                <!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
                                <el-checkbox
                                    :value="item2.selected == 1"
                                    @change="
                                        onBoxClick($event, 2, item2.cart_id)
                                    "
                                >
                                </el-checkbox>
                            </div>
                            <nuxt-link
                                class="info flex"
                                :to="'/goods_details/' + item2.goods_id"
                            >
                                <div class="pictrue flexnone">
                                    <img :src="item2.image" alt="" />
                                </div>
                                <div>
                                    <div class="name line2">
                                        {{ item2.goods_name }}
                                    </div>
                                    <div class="muted">
                                        {{ item2.spec_value_str }}
                                    </div>
                                </div>
                            </nuxt-link>
                            <div class="price flex row-center">
                                ¥{{ item2.price }}
                            </div>
                            <div class="num flex row-center">
                                <number-box
                                    :min="1"
                                    v-model="item2.goods_num"
                                    @change="
                                        changeShopCartCount(
                                            $event,
                                            item2.cart_id
                                        )
                                    "
                                    async-change
                                />
                            </div>
                            <div class="money flex row-center">
                                ¥{{ item2.sub_price }}
                            </div>
                            <el-popconfirm
                                title="确定删除该商品吗？"
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                icon="el-icon-info"
                                icon-color="red"
                                @confirm="goodsDelete(item2.cart_id)"
                            >
                                <div
                                    class="operate flex row-center delete-btn"
                                    slot="reference"
                                >
                                    <img
                                        src="~/static/images/icon_cart_del.png"
                                    />
                                </div>
                            </el-popconfirm>
                        </div>
                    </div>
                </div>
                <div class="cart-footer flex row-between bg-white">
                    <div class="lighter flex">
                        <div class="check-box">
                            <el-checkbox
                                v-model="isSelectedAll"
                                @change="onBoxClick($event, 3, '')"
                                >全选</el-checkbox
                            >
                        </div>
                        <div style="margin: 0 24px"></div>
                        <el-popconfirm
                            title="确定删除选中商品吗？"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            icon="el-icon-info"
                            icon-color="red"
                            @confirm="deleteSelectedGoods"
                        >
                            <div
                                class="xs normal"
                                style="cursor: pointer"
                                slot="reference"
                            >
                                删除选中商品
                            </div>
                        </el-popconfirm>
                        <el-popconfirm
                            title="确定清空吗？"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            icon="el-icon-info"
                            icon-color="red"
                            @confirm="deleteAlldGoods"
                        >
                            <div
                                class="m-l-14 xs muted"
                                style="cursor: pointer"
                                slot="reference"
                            >
                                清空购物车
                            </div>
                        </el-popconfirm>
                    </div>
                    <div class="total flex">
                        <div class="flex m-r-14">
                            <div class="xs">已选{{ selected }}件商品</div>
                            <div class="primary m-l-20" style="font-size: 22px">
                                ¥{{ totalAmount }}
                            </div>
                        </div>
                        <div
                            class="white lg btn flex row-center"
                            :style="{
                                background:
                                    selected == 0 ? '#A4ADB3' : '#FF2C3C',
                            }"
                            @click="toOrderBuy"
                        >
                            去结算
                        </div>
                    </div>
                </div>
            </div>
            <div class="column-center data-null" v-show="isDataNull">
                <img
                    src="@/static/images/cart_null.png"
                    style="width: 150px; height: 150px"
                />
                <div class="muted xs m-t-10">购物车是空的～</div>
                <div class="m-t-30">
                    <el-button
                        round
                        type="primary"
                        size="medium"
                        @click="toIndex"
                        >去逛逛～</el-button
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
    head() {
        return {
            title: this.$store.getters.headTitle,
            link: [
                {
                    rel: 'icon',
                    type: 'image/x-icon',
                    href: this.$store.getters.favicon,
                },
            ],
        }
    },
    data() {
        return {
            shopCartList: [],
            totalAmount: 0,
            totalNum: 0,
            isDataNull: false,
        }
    },
    mounted() {},
    computed: {
        // 是否全选
        isSelectedAll: {
            get() {
                if (!this.shopCartList.length) return false
                if (this.allInvalid()) return false
                let index = this.shopCartList.findIndex(
                    (item) => item.is_selected == 0
                )
                return index == -1 ? true : false
            },
            set(val) {
                return val
            },
        },
        // 已经选择的数量
        selected: {
            get() {
                return this.shopCartList.reduce((pre, item) => {
                    return pre.concat(item.cart.filter((i) => i.selected == 1))
                }, []).length
            },
        },
    },
    methods: {
        ...mapActions(['getPublicData']),
        async getCartList() {
            let res = await this.$get('cart/lists')
            if (res.code == 1) {
                this.shopCartList = Object.assign([], res.data.lists)
                this.totalAmount = res.data.total_amount
                this.totalNum = res.data.total_num

                if (this.shopCartList.length > 0) {
                    this.isDataNull = false
                } else {
                    this.isDataNull = true
                }
            }
        },

        // 更改选中状态 type为1选中店铺/2选中商品/3全选
        onBoxClick(e, type, number) {
            let cartId = []
            switch (type) {
                case 1:
                    cartId = this.shopCartList[number].cart.map(
                        (item) => item.cart_id
                    )
                    break
                case 2:
                    cartId.push(number)
                    break
                case 3:
                    cartId = this.shopCartList.reduce((pre, item) => {
                        return pre.concat(item.cart.map((i) => i.cart_id))
                    }, cartId)
                    break
            }
            this.changeSelected(cartId, e)
        },
        cartInvalid(item) {
            return item.goods_status == 0 || item.goods_del != 0 ? true : false
        },
        shopInvalid(item) {
            return item.cart.every((citem) => this.cartInvalid(citem))
        },
        allInvalid() {
            return this.shopCartList.every((item) => this.shopInvalid(item))
        },

        // 选中/取消选中购物车
        async changeSelected(id, selected) {
            let res = await this.$post('cart/selected', {
                cart_id: id,
                selected: selected,
            })
            if (res.code == 1) {
                this.getCartList()
            }
        },

        // 修改购物车商品数量
        async changeShopCartCount(number, cartId) {
            let res = await this.$post('cart/change', {
                cart_id: cartId,
                goods_num: number,
            })
            if (res.code == 1) {
                this.getCartList()
                this.getPublicData()
            }
        },
        // 删除购物车商品
        async goodsDelete(cartId) {
            let res = await this.$post('cart/del', {
                cart_id: cartId,
            })
            if (res.code == 1) {
                this.getPublicData()
                this.getCartList()
                this.$message({
                    message: '删除商品成功',
                    type: 'success',
                })
            }
        },
        // 删除选中购物车
        deleteSelectedGoods() {
            let selectedGoodsArr = this.shopCartList.reduce((pre, item) => {
                return pre.concat(item.cart.filter((i) => i.selected == 1))
            }, [])
            if (selectedGoodsArr.length <= 0) {
                this.$message({
                    message: '没有选择商品',
                    type: 'error',
                })
                return
            }
            let cartIdArr = selectedGoodsArr.map((item) => item.cart_id)
            this.goodsDelete(cartIdArr)
        },
        // 清空购物车
        deleteAlldGoods() {
            let allGoodsArr = this.shopCartList.reduce((pre, item) => {
                return pre.concat(item.cart.filter((i) => i.cart_id))
            }, [])
            if (allGoodsArr.length <= 0) {
                this.$message({
                    message: '没有商品',
                    type: 'error',
                })
                return
            }
            let cartIdArr = allGoodsArr.map((item) => item.cart_id)
            this.goodsDelete(cartIdArr)
        },
        getSelectCart() {
            const { shopCartList } = this
            return shopCartList.reduce((pre, item) => {
                return pre.concat(
                    item.cart
                        .filter((i) => i.selected && !this.cartInvalid(i))
                        .map((i) => i.cart_id)
                )
            }, [])
        },
        // 去购买商品
        toOrderBuy() {
            let { shopCartList } = this
            let goods = []
            let carts = this.getSelectCart()
            if (carts.length == 0) return this.$message.err('您还没有选择商品哦')
            // 处理出商品数组数据
            shopCartList.forEach((item) => {
                if (item.cart.length != 0) {
                    item.cart.forEach((el, i) => {
                        // 选中的商品才能进入
                        if (el.selected == 1) {
                            goods.push({
                                item_id: el.item_id,
                                num: el.goods_num,
                                goods_id: el.goods_id,
                                shop_id: item.shop.shop_id,
                            })
                        }
                    })
                }
            })
            const params = {
                carts: carts,
                goods: goods,
                type: 'cart',
            }
            this.$router.push({
                path: '/confirm_order',
                query: {
                    data: encodeURIComponent(JSON.stringify(params)),
                },
            })
        },
        toIndex() {
            this.$router.push('/')
        },
    },

    created() {
        this.getCartList()
    },
}
</script>

<style lang="scss" scoped>
.shop-cart {
    padding: 24px 0;
    .cart-list {
        min-height: 600px;
        .cart-hd {
            height: 50px;
            color: #101010;
            padding: 10px 10px;
            margin-bottom: 10px;
        }
        .cart-con {
            padding: 0 10px;
            .shop {
                padding: 20px 10px;
                border-bottom: 1px solid #d7d7d7;
            }
            .item {
                padding: 20px 10px;
                border-bottom: 1px dashed #e5e5e5;
            }
            .item:last-child {
                border-bottom: 0;
            }
        }
        .check-box {
            padding-left: 10px;
            width: 40px;
        }
        .info {
            width: 450px;
            .pictrue {
                margin-right: 10px;
                img {
                    width: 72px;
                    height: 72px;
                }
            }
            .name {
                margin-bottom: 10px;
            }
        }
        .price {
            width: 150px;
        }
        .num {
            width: 250px;
        }
        .money {
            width: 150px;
        }
        .delete-btn {
            cursor: pointer;
        }
    }
    .cart-footer {
        padding: 20px;
        .total {
            .btn {
                width: 152px;
                height: 50px;
                cursor: pointer;
                border-radius: 4px;
            }
        }
    }
    .data-null {
        text-align: center;
        padding-top: 170px;
    }
}
</style>