<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card" header="店铺详情">
      <el-row type="flex">
        <image-preview :src="store.picture" :width="80" :height="80"/>
        <div style="flex: 1;margin-left: 2em">
          <el-descriptions :column="3">
            <el-descriptions-item label="店铺名称">{{store.storeName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{store.createTime | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="营业时间">
              {{store.startTime | defaultValue}} 至 {{store.endTime | defaultValue}}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">{{store.userName | defaultValue}}({{store.phone | defaultValue}})</el-descriptions-item>
            <el-descriptions-item label="店铺地址" :span="2">
              {{store.province}}{{store.city}}{{store.county}}{{store.address}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-row>
    </el-card>

    <el-col :span="24">
      <el-card class="box-card">
        <el-row type="flex">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="store.todayIncome"
            suffix="¥"
            title="今日收入"
          ></el-statistic>
          <el-statistic
            group-separator=","
            :precision="2"
            :value="store.monthIncome"
            suffix="¥"
            title="本月收入"
          ></el-statistic>
          <el-statistic
            group-separator=","
            :precision="2"
            :value="store.lastMonthIncome"
            suffix="¥"
            title="上月收入"
          ></el-statistic>
          <el-statistic
            group-separator=","
            :value="store.deviceCount"
            suffix="台"
            title="设备总数"
          ></el-statistic>
          <el-statistic
            group-separator=","
            :value="store.onlineCount"
            suffix="台"
            title="在线设备"
          ></el-statistic>
          <el-statistic
            group-separator=","
            :value="store.offlineCount"
            suffix="台"
            title="离线设备"
          ></el-statistic>
        </el-row>
      </el-card>
    </el-col>
    <el-row :gutter="16">
      <el-col :span="24">
        <el-card class="box-card">
          <place-search-map
            v-if="showMap"
            height="400px"
            :init-lng="store.longitude"
            :init-lat="store.latitude"
            enable-geo
            marker-type="store"
          />
        </el-card>
      </el-col>


    </el-row>

    <el-card class="box-card">
      <el-tabs>
        <el-tab-pane label="设备列表" :lazy="true">
          <device v-if="store.storeId != null" :query="{storeId: store.storeId}"/>
        </el-tab-pane>
        <el-tab-pane label="订单列表" :lazy="true">
          <order :query="{storeId: store.storeId}" :view="views.store"/>
        </el-tab-pane>
        <el-tab-pane label="分区卡座列表" :lazy="true">
          <part :query="{storeId: store.storeId}"/>
        </el-tab-pane>
<!--        <el-tab-pane label="店铺变更记录" :lazy="true">-->
<!--          <mch-store-apply :query="{storeId: store.storeId}" :view="views.store"/>-->
<!--        </el-tab-pane>-->
      </el-tabs>
    </el-card>


  </div>
</template>

<script>
import PlaceSearchMap from '@/components/Map/PlaceSearch/PlaceSearchMap.vue'
import {getStore } from "@/api/bst/store";
import { views } from '@/utils/constants'
import Device from "@/views/bst/device/index.vue";
import Order from "@/views/bst/order/index.vue";
import Part from "@/views/bst/part/index.vue";


export default {
  name: 'StoreView',
  computed: {
    views() {
      return views
    }
  },
  components: {Part, Order, Device, PlaceSearchMap },
  dicts: ['bst_store_type', 'bst_status'],
  data() {
    return {
      loading: false,
      store: {},
      showMap: false,
    }
  },
  created() {
    this.getDetail();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getDetail() {
      this.loading = true;
      getStore(this.$route.params.storeId).then(res => {
        this.store = res.data;
        this.showMap = true;
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped>
.remark-text {
  color: #ccc;
  margin-left: 1em;
}
.app-container .box-card:nth-child(n + 1) {
  margin-top: 1em;
}
</style>
