<template>
    <div class="page">
        <div class="shop-select">
            <ul class="list">
                <li
                    v-if="entry ===''"
                    class="item"
                    @click="shopClick({})"
                    :class="{ on: !curShop.id }"
                >
                    <div class="info">
                        <div class="title">
                            不限门店
                            <my-image
                                class="selected"
                                src="/static/icon/select2.png"
                            ></my-image>
                        </div>
                    </div>
                </li>
                <li
                    class="item"
                    :class="{ on: curShop.id === item.id }"
                    v-for="item of shopList"
                    :key="item.id"
                    @click="shopClick(item)"
                >
                    <!-- <my-image
                                class="logo"
                                src="https://whcoss.chuangzhikeji.com/images/621b9cc5-11b3-4d0e-ad82-981351e25336/1595236331022_600x600.jpg"
                    ></my-image>-->
                    <div class="info">
                        <div class="title">
                            {{ item.name }}
                            <!-- <span class="raising">支持自提</span> -->
                            <!-- <span class="selected">✔</span> -->
                            <my-image
                                class="selected"
                                src="/static/icon/select2.png"
                            ></my-image>
                        </div>
                        <p class="add-info">
                            <span>{{
                                item.province +
                                item.city +
                                item.county +
                                item.address
                            }}</span>
                            <!-- <span class="distance">1.36km</span> -->
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

import appConfig from "./../../common/js/config";
export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            shopList: [],
            curShop: {},
            curShop: {},
            entry: "",
        };
    },
    onLoad(opts) {
        this.entry = opts.entry;
    },

    async onShow() {
        if (this.entry === "manage") {
            if(this.$store.state.user.user){
                this.curShop = {
                    name:this.$store.state.user.user.storeName,
                    id:this.$store.state.user.user.storeId,
                }
            }
        } else {
            this.curShop = this.$store.state.common.curShop;
        }
        this.getList();
    },
    onPullDownRefresh() {
        this.getList();
    },
    // 函数
    methods: {
        getList() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api.get("/Store/GetShopList").then((res) => {
                this.shopList = res.data;
                uni.hideLoading();
                uni.stopPullDownRefresh();
            });
        },

        shopClick(v) {
            this.curShop = v;
            if (this.entry === "manage") {
                let user = this.$store.state.user.user;
                user = {...user};
                user.storeId = v.id;
                user.storeName = v.name;
                this.$store.commit("user/update", {
                    user,
                });
            } else {
                this.$store.commit("common/update", {
                    curShop: v,
                });
            }
            this.router.back();
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.shop-select {
    background-color: #fff;
    .item {
        display: flex;
        justify-content: space-between;
        padding: px(30);
        border-bottom: 1px solid #f1f1f1;
        &.on {
            .title .selected {
                display: block;
            }
        }
        .logo {
            width: px(110);
            height: px(110);
            overflow: hidden;
            border-radius: 50%;
            border: 1px solid #f1f1f1;
            margin-right: px(40);
            flex-shrink: 0;
            /deep/ img {
                width: px(110);
                height: px(110);
            }
        }
        .info {
            width: 100%;
        }
        .title {
            font-size: px(50);
            position: relative;
            padding-right: px(100);
            line-height: px(60);
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .raising {
                font-size: px(30);
                margin-left: px(30);
                color: #a6b4e3;
            }
            .selected {
                width: px(60);
                height: px(60);
                position: absolute;
                right: 0;
                top: 50%;
                z-index: 1;
                transform: translate(0, -50%);
                display: none;
                /deep/ img {
                    width: px(60);
                    height: px(60);
                }
            }
        }
        .add-info {
            margin-top: px(20);
            font-size: px(32);
            display: flex;
            justify-content: space-between;
            font-size: px(34);
            line-height: px(40);
            .distance {
                flex-shrink: 0;
                font-size: px(30);
                margin-left: px(40);
            }
        }
    }
}
</style>