<template>
    <app-layout headerBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6" title="购物车" textColor="dark">
        <widget-tips text="为什么会拆成多个订单?根据师傅服务能力与服务类型进行订单拆分" />
        <view class="cart-container">
            <view class="cart-group" v-for="(item, index) in list" :key="index">
                <view class="group-title limit-line clamp-1" @click="clickGroup(index)">
                    <view class="group-checkbox">
                        <widget-check-box :size="50" :checked="item.checked" />
                    </view>
                    <view class="title">
                        <text>{{ item.name }}</text>
                    </view>
                </view>
                <view class="group-items">
                    <view class="cart-item" v-for="(v, i) in item.list" :key="i">
                        <view class="item-checkbox" @click="clickItem(index, i)">
                            <widget-check-box :size="50" :checked="v.checked" />
                        </view>
                        <view class="item-box">
                            <service-preview-item :data="v" />
                            <widget-count-modify
                                class="component-add"
                                :initNumber="v.buyNumber"
                                @change="changeNumber($event, { parentIndex: index, index: i })"
                            />
                        </view>
                    </view>
                </view>
                <view class="bottom-btn-box">
                    <view class="total-price">
                        <text class="text">合计：</text>
                        <text class="price">¥ {{ item.total }}</text>
                    </view>
                    <view class="button">
                        <text>去下单</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="more">
            <widget-load-more :hasMore="false" />
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetTips from "@/components/widgets/tips";
import WidgetCheckBox from "@/components/widgets/checkbox";
import WidgetCountModify from "@/components/widgets/count-modify";
import WidgetLoadMore from "@/components/widgets/loadmore";
import ServicePreviewItem from "@/components/service/preview-item";
export default {
    name: "order-cart",
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: "空调安装",
                    list: [
                        {
                            id: 1,
                            name: "格力空调安装",
                            icon: require("@/static/temp/cate/1.png"),
                            buyNumber: 1,
                        },
                        {
                            id: 2,
                            name: "美的空调安装",
                            icon: require("@/static/temp/cate/1.png"),
                            buyNumber: 1,
                        },
                    ],
                },
                {
                    id: 2,
                    name: "管道疏通",
                    list: [
                        {
                            id: 3,
                            name: "厨房下水道",
                            icon: require("@/static/temp/cate/1.png"),
                            buyNumber: 10,
                        },
                    ],
                },
            ],
        };
    },
    components: {
        AppLayout,
        WidgetTips,
        WidgetCheckBox,
        WidgetCountModify,
        WidgetLoadMore,
        ServicePreviewItem,
    },
    onLoad() {
        this.list = this.parseList(this.list);
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        parseList(list) {
            let newList = [];
            list.forEach((item, index) => {
                list[index].checked = false;
                list[index].total = 0;
                list[index].list.forEach((v, i) => {
                    list[index].list[i].checked = false;
                });
                newList.push(list[index]);
            });
            return newList;
        },
        clickGroup(parentIndex) {
            let state = !this.list[parentIndex].checked;
            this.list[parentIndex].list.forEach((item, itemIndex) => {
                this.checkedItem(parentIndex, itemIndex, state);
            });
        },
        clickItem(parentIndex, itemIndex) {
            this.checkedItem(parentIndex, itemIndex);
        },
        // 选中单项
        checkedItem(parentIndex, itemIndex, state) {
            this.list[parentIndex].list[itemIndex].checked =
                typeof state === "undefined" ? !this.list[parentIndex].list[itemIndex].checked : state;
            // 判断是否需要选中组
            let allChecked = true;
            this.list[parentIndex].list.forEach((item, index) => {
                if (!item.checked) {
                    allChecked = false;
                }
            });
            this.list[parentIndex].checked = allChecked;
            this.$forceUpdate();
        },
        changeNumber(e, d) {
            console.log(e);
            console.log(d);
        },
    },
};
</script>

<style lang="less" scoped>
.cart-container {
    width: 710rpx;
    margin: 24rpx auto 0 auto;
}
.cart-group {
    width: 100%;
    margin-bottom: 22rpx;
    background-color: #ffffff;
}
.group-title {
    width: 100%;
    box-sizing: border-box;
    padding: 22rpx;
    display: flex;
    align-items: center;
    .title {
        margin-left: 22rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #000000;
    }
}
.group-items {
    width: 100%;
    .cart-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 22rpx;
        margin-bottom: 50rpx;
    }
    .item-box {
        position: relative;
        width: 604rpx;
        .component-add {
            position: absolute;
            right: 0;
            bottom: 9rpx;
        }
    }
}
.bottom-btn-box {
    width: 670rpx;
    margin: 0 auto;
    border-top: 2rpx solid #e1e1e1;
    box-sizing: border-box;
    padding: 26rpx 0;
    display: flex;
    justify-content: space-between;
    .total-price {
        .text {
            font-size: 26rpx;
            color: #000000;
        }
        .price {
            font-size: 32rpx;
            color: #ec7655;
        }
    }
    .button {
        width: 183rpx;
        height: 54rpx;
        line-height: 54rpx;
        background: linear-gradient(-90deg, #8194f2, #8194f2);
        text-align: center;
        border-radius: 23rpx;
        font-size: 24rpx;
        color: #ffffff;
    }
}
.more {
    margin-top: 60rpx;
}
</style>