<template>
  <div class="pick-store">
    <div class="shop-item" :class="{'is-open': item.status === 1, 'is-here': item.storeID == storeID[0]}" @click="changeStore(item.storeID)" v-for="(item, index) in storeArr" :key="index">
      <div class="store-name">
        <div class="status">{{item.status === 1 ? '营业中' : '休息中'}}</div>
        <div class="name">{{item.name}}</div>
      </div>
      <div class="store-distance">距离{{item.distance}}m</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {store} from "@/store";
import apiStore from '@/apis/apiStore'
import loginApi from '@/apis/login'
export default {
  data() {
    return {
      storeArr: [],
    };
  },
  computed: {
    ...mapGetters({
      storeMap:"indexPage/storeMap",
      storeID:"indexPage/storeID",
      brandID: 'indexPage/brandID',
      waybillSLG:"indexPage/waybillSLG",
      isLogin: "login/isLogin"
    }),
  },
  created() {
    // 重排序storeMap
    // console.log(this.storeMap);
    if (this.storeMap) {
      const arr = [];
      for (let key in this.storeMap) {
        arr[this.storeMap[key].index] = {
          ...this.storeMap[key],
          storeID: +key,
        };
      }
      // 排除empty
      this.storeArr = arr.filter((item) => item);
    }
    // console.log("this.storeArr", this.storeArr);
  },
  methods: {
    async changeStore(storeID) {
      if(storeID === this.storeID[0]) return
      
      store.commit('indexPage/changeStoreID', [+storeID]) // 改变当前门店id

      uni.navigateBack({ delta: 1 });

      await apiStore.getWayBillFeeMinus(storeID) // 获取该店铺的运营策略

      if (this.isLogin) await loginApi.updateUserLastInfo(+storeID, this.brandID)
    },
  },
};
</script>

<style lang="scss">
@import "./pick-store.scss";
</style>