<template>
    <view class="box">
        <view class="addHome" @click="addHome()"> + 添加家庭 </view>

        <view class="listBox">
            <view
                class="listItem"
                v-for="(item, index) in groupList"
                :key="index"
            >
                <view class="itemHeader">
                    <view class="itemTitle">{{ item.groupName }}</view>
                    <view class="itemOption"
                        ><view class="imgItem" @click="deleteGroup(item)"
                            ><image src="../../static/delete.png"></image
                        ></view>
                        <view class="imgItem"
                            ><image src="../../static/edit.png"></image
                        ></view>
                        <view class="imgItem"
                            ><image
                                src="../../static/shareTwo.png"
                            ></image></view
                    ></view>
                </view>
                <view class="itemContent" @click="goGroupDetail(item)">
                    <view class="itemCard" @click="sharePages(item)"
                        ><view class="cardTitle">全部设备</view
                        ><view class="cardContent"
                            ><text class="titleOne">{{ item.totalDevice }}</text
                            ><text class="titleTwo">台</text></view
                        ></view
                    >
                    <view class="itemCard"
                        ><view class="cardTitle">在线设备</view
                        ><view class="cardContent"
                            ><text class="titleOne">{{
                                item.onlineDevice
                            }}</text
                            ><text class="titleTwo">台</text></view
                        ></view
                    >
                    <view class="itemCard"
                        ><view class="cardTitle">报警设备</view
                        ><view class="cardContent"
                            ><text class="warnOne">{{
                                item.warningDevice
                            }}</text
                            ><text class="warnTwo">台</text></view
                        ></view
                    >
                </view>
            </view>
        </view>

        <!-- 新增家庭弹窗 -->
        <view
            class="modal-mask"
            v-if="addGroupModle"
            @click="addGroupModle = false"
        >
            <view class="modal-container">
                <view class="modal-header">
                    <text class="title">新增家庭</text>
                </view>

                <view class="modal-buttons">
                    <!-- 链接分享按钮 -->
                    <input
                        v-model="groupName"
                        placeholder="请输入家庭名称"
                        style="width: 100%"
                        @click="$event.stopPropagation()"
                    />
                    <button class="btn link-btn" @click="sureAddGroup()">
                        <text>确定</text>
                    </button>
                    <!-- <button
                        class="btn link-btn"
                        @click="sureEditGroup()"
                        v-else
                    >
                        <text>确定</text>
                    </button> -->
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            addGroupModle: false,
            groupName: "",
            userId: uni.getStorageSync("userId"),
            groupList: [],
            editFlag: false,
            selectItem: "",
        };
    },
    methods: {
        addHome() {
            this.addGroupModle = true;
        },
        sureAddGroup() {
            if (this.groupName.trim() == "") {
                uni.showToast({
                    title: "请输入家庭名称",
                    icon: "none",
                    duration: 1500,
                });
                return;
            }
            let groupAddParams = {
                userId: this.userId,
                groupName: this.groupName,
            };
            this.$http
                .post("wap/group/addGroup", groupAddParams, {
                    header: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "新增家庭成功",
                            icon: "success",
                            duration: 1500,
                        });
                        this.addGroupModle = false;
                        this.groupName = "";
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: "none",
                            duration: 1500,
                        });
                    }
                    this.addGroupModle = false;
                    this.getgroupList();
                });
            this.shareModel = false;
        },

        getgroupList() {
            uni.showLoading({
                title: "加载中...",
            });
            this.$http
                .get(`wap/group/groupList`, { userId: this.userId })
                .then((res) => {
                    uni.hideLoading();
                    if (res.data.data) {
                        this.groupList = res.data.data;
                    }
                })
                .catch((err) => {});
        },

        deleteGroup(item) {
            uni.showModal({
                title: "提示",
                content: "确定删除该家庭吗？",
                success: (res) => {
                    if (res.confirm) {
                        this.$http
                            .post(
                                "wap/group/deleteGroup",
                                {
                                    groupId: item.groupId,
                                },
                                {
                                    header: {
                                        "Content-Type":
                                            "application/x-www-form-urlencoded",
                                    },
                                }
                            )
                            .then((res) => {
                                if (res.data.code == 200) {
                                    uni.showToast({
                                        title: "删除成功",
                                        icon: "success",
                                        duration: 1500,
                                    });
                                    this.getgroupList();
                                } else {
                                    uni.showToast({
                                        title: res.data.message,
                                        icon: "none",
                                        duration: 1500,
                                    });
                                }
                            });
                    }
                },
            });
        },
        // shareItem(item) {
        //     console.log(item, 99999);
        // },
        // goGroupDetail(item) {
        //     uni.navigateTo({
        //         url: `/pagesA/homeDetail/homeDetail?groupInfo=${JSON.stringify(
        //             item
        //         )}`,
        //     });
        // },
    },
    onShow() {
        this.getgroupList();
    },
    onLoad() {},

    onPullDownRefresh() {
        uni.showNavigationBarLoading();
        this.getgroupList();
        setTimeout(() => {
            uni.hideNavigationBarLoading();
            uni.stopPullDownRefresh();
        }, 1000);
    },
};
</script>

<style lang="less" scoped>
.box {
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    padding-top: 20rpx;
    box-sizing: border-box;
    .addHome {
        width: 200rpx;
        height: 60rpx;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.65);
        border-radius: 16px;
        backdrop-filter: blur(8px);
        line-height: 60rpx;
        text-align: center;
        font-size: 30rpx;
        color: #111;
    }

    .listBox {
        height: 95vh;
        box-sizing: border-box;
        overflow-y: scroll;
        .listItem {
            margin: 20rpx auto 0;
            width: 710rpx;
            height: 320rpx;
            background: #ffffff;
            border: 3rpx solid #ffffff;
            border-radius: 38rpx;
            box-shadow: 0rpx 3rpx 14rpx rgba(12, 26, 52, 0.03);
            box-sizing: border-box;
            .itemHeader {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 38rpx 38rpx;
                .itemTitle {
                    width: 80%;
                    font-family: MiSans;
                    color: #111111;
                    font-size: 38rpx;
                    letter-spacing: 1.8rpx;
                }
                .itemOption {
                    width: 35%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .imgItem {
                        width: 38rpx;
                        height: 38rpx;
                        image {
                            width: 38rpx;
                            height: 38rpx;
                        }
                    }
                }
            }
            .itemContent {
                display: flex;
                justify-content: space-around;
                margin-top: 20rpx;
                .itemCard {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .cardTitle {
                        color: #666666;
                        font-size: 24rpx;
                    }
                    .cardContent {
                        margin-top: 15rpx;
                        .titleOne {
                            font-weight: 700;
                            color: #6c564f;
                            font-size: 66rpx;
                        }
                        .titleTwo {
                            font-weight: 500;
                            color: #6c564f;
                            font-size: 24rpx;
                        }
                        .warnOne {
                            font-weight: 700;
                            color: #f55050;
                            font-size: 66rpx;
                        }
                        .warnTwo {
                            font-weight: 500;
                            color: #f55050;
                            font-size: 24rpx;
                        }
                    }
                }
            }
        }
    }

    // 分享弹窗样式
    .modal-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 996;
        .modal-container {
            width: 80%;
            background: #fff;
            border-radius: 16rpx;
            overflow: hidden;
            animation: fadeIn 0.3s;
            z-index: 997;
            .modal-header {
                padding: 30rpx;
                text-align: center;
                border-bottom: 1rpx solid #f5f5f5;
                .title {
                    font-size: 36rpx;
                    display: block;
                    margin-bottom: 10rpx;
                }
            }
            .modal-buttons {
                display: flex;
                flex-direction: column;
                padding: 20rpx;
                input {
                    width: 90%;
                    margin: 20rpx 20rpx;
                }
                .btn {
                    flex: 1;
                    height: 90rpx;
                    margin: 15rpx 0;
                    border-radius: 45rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 32rpx;
                    border: none;
                    background: none;
                    position: relative;
                }
                .btn-icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 15rpx;
                }
                .phone-btn {
                    background: linear-gradient(
                        105.95deg,
                        #ba978a 0%,
                        #a27867 100%
                    );
                    color: white;
                }
                .link-btn {
                    background: linear-gradient(
                        105.95deg,
                        #a27867 0%,
                        #74483d 100%
                    );
                    color: white;
                }
            }
        }
    }
}
</style>
