<template>
    <div class="main-para">
        <van-nav-bar title="选择门店" class="public-title" left-arrow @click-left="onClickLeft" />
        <div class="main">
            <van-search v-model="search" shape="round" placeholder="查找门店" />
            <div class="list">
                <van-checkbox-group v-model="result">
                    <van-cell-group>
                        <van-cell v-for="(item, index) in list" clickable :key="index" :title=item @click="toggle001(index)">
                            <template #right-icon>
                                <van-checkbox :name="item" ref="checkboxes" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
            </div>
            <div class="bottom">
                <p v-if="result[0] =='全部门店'">已选择全部门店</p>
                <p v-else>已选择<span style="color:red;">{{result.length}}</span>家门店</p>

                <van-button type="info" @click="submit">确定</van-button>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        request
    } from "@/network/request.js";
    import {
        Toast
    } from 'vant';

    export default {
        data() {
            return {
                lists: ['全部门店'],
                list: ['全部门店'],
                result: [], //所有选中的值
                search: "",
                shopNum: 0,
            };
        },
        created() {
            this.getShopList();
        },
        methods: {
            //根据value获取数据下标
            contains(a, obj) {
                var i = a.length;
                while (i--) {
                    if (a[i] === obj) {
                        return i;
                    }
                }
                return false;
            },
            //获取门店列表
            getShopList() {
                const userInfo = this.$store.getters.getUserInfo;
                request({
                    url: '/api/room/page',
                    params: {
                        status: 1,
                        pageNum: 1,
                        pageSize: 500,
                        deviceSource: 'deviceSourceShangHu',
                        userId: userInfo.id,
                        tenantId: userInfo.tenantId,
                        token: this.$store.getters.getToken
                    }
                }).then(res => {
                    console.log(res);
                    if (res.status == 200 && res.success) {
                        res.data.records.forEach(item => {
                            this.lists.push(item.name);
                            this.list.push(item.name);
                        });
                    } else {
                        Toast.fail({
                            message: res.message || '暂无数据',
                            duration: 1.5 * 1000
                        })
                        return;
                    }
                }).catch(res => {
                    Toast.clear();
                    Toast.fail({
                        message: res.response.data.message || '暂无数据',
                        duration: 1.5 * 1000
                    })
                    return;
                })
            },
            toggle001(index) {
                if (this.$refs.checkboxes[index].name == '全部门店') {
                    if (!this.$refs.checkboxes[index].checked) {
                        this.$refs.checkboxes.forEach((it) => {
                            if (it.name != '全部门店') {
                                it.checked = false;
                                this.result.splice(this.contains(this.result,it.name),1);
                            }
                        })
                    }
                } else {
                    if (!this.$refs.checkboxes[index].checked) {
                        this.$refs.checkboxes.forEach(item => {
                            if (item.name == '全部门店') {
                                item.checked = false;
                            }
                        })
                    }
                }
                //this.$refs.checkboxes[index].toggle();
            },
            submit() {
                if (this.result != "") {
                    this.$router.push({
                        name: 'homePage',
                        params: {
                            data: this.result
                        }
                    })
                } else {
                    this.$Toast("请至少选择一家门店");
                }
            },
            onClickLeft() {
                this.$router.push({
                    path: "/"
                })
            }
        },
        watch: {
            search(i) {
                this.list = [];
                this.lists.forEach(el => {
                    if (el.indexOf(i) != -1) {
                        this.list.push(el);
                    }
                });
            }
        },
        mounted() {
            if (this.$route.params.data) {
                this.result = this.$route.params.data;
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/style/publicTitle.css";

    .main-para {
        width: 100%;
        height: 100%;
    }

    .main {
        position: relative;
    }

    .list {
        width: 95%;
        margin: 0 auto;
    }

    .bottom {
        width: 90%;
        position: absolute;
        left: 5%;
        bottom: 5%;

        p {
            padding-left: 5px;
        }

        button {
            width: 100%;
            background-color: #2caaef;
            border-radius: 10px;
        }
    }

    /deep/.van-nav-bar__left .van-icon {
        color: #000;
    }
</style>