<!-- 店铺详情 -->
<template>
  <div class="shop">
    <ShareOverlay :n-web="true" :app-url="appUrl" />
    <service-tip />
    <div class="shop-box">
      <div class="shop-box-title">
        <span>{{ dataSource.name }} </span>
        <cr-image
          width="28px"
          height="19px"
          :src="dataSource.businessLicenseInfo.businessLicenseIcon | Img2Thumb"
        />
      </div>
      <div class="shop-box-swiper">
        <service-swiper :img-list="dataSource.imageList" />
      </div>
      <div class="shop-box-time">营业时间： {{ dataSource.businessHours }}</div>
      <div class="shop-box-address">
        <div class="shop-box-address-text dp-column">
          <div class="title">{{ dataSource.addressInfo.address }}</div>
          <span>{{ dataSource.distance }}</span>
        </div>
        <div class="shop-box-address-address dp-column">
          <img :src="dataSource.addressInfo.addressIcon | Img2Thumb" alt="" />
          <span>位置</span>
        </div>
        <div class="shop-box-address-telephone dp-column">
          <img :src="dataSource.phoneInfo.phoneNoIcon | Img2Thumb" alt="" />
          <span>电话</span>
        </div>
      </div>
    </div>
    <div class="shop-box">
      <div class="shop-box-title">
        <span>到店优惠</span>
      </div>
      <ul class="purchase">
        <li v-for="(item, idx) in dataSource.skuInfos" :key="idx" class="purchase-list">
          <img class="purchase-list-img" :src="item.image | Img2Thumb" alt="" />
          <div class="shop-info">
            <div class="shop-info-top">
              <span>{{ item.skuName }}</span>
              <span> {{ item.serviceTypeName }}</span>
            </div>
            <div class="shop-info-btm">
              <div class="amount">
                ￥<span>{{ item.salePrice }}</span>
              </div>
              <div class="go-buy">抢购</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="shop-box">
      <template v-if="dataSource.commentInfo.commentInfoVoList">
        <!-- 商品评价 -->
        <ServiceTitle
          title="商品评价"
          :sub-title="dataSource.commentInfo.commentCountStr"
          right-text="全部评价"
        />
        <ServiceEvaluate :comment-info="dataSource.commentInfo" />
      </template>
      <ServiceTitle v-else title="暂无评价" />
    </div>
    <!-- 商品列表 -->
    <service-good-list :params="serviceGoodsParams" :service-type="1" />
  </div>
</template>

<script>
import ShareOverlay from '@/components/ShareOverlay.vue';
import ServiceTip from '../components/serviceTip.vue';
import ServiceSwiper from '../components/serviceSwiper.vue';
import ServiceTitle from '../components/serviceTitle.vue';
import ServiceEvaluate from '../components/serviceEvaluate.vue';
import ServiceGoodList from '../components/serviceGoodList.vue';
import goodsApi from '@/api/goods.api.js';
import { Img2Thumb } from '@/filters/img2Thumb.filter';

export default {
  filters: { Img2Thumb },
  components: {
    ServiceTip,
    ServiceTitle,
    ServiceSwiper,
    ServiceEvaluate,
    ServiceGoodList,
    ShareOverlay
  },
  data() {
    const shopId = this.$route.query.shopId;
    return {
      serviceGoodsParams: {
        pageSize: 20,
        shopId
      },
      dataSource: {
        businessLicenseInfo: {},
        addressInfo: {},
        phoneInfo: {},
        commentInfo: {}
      }
    };
  },
  computed: {
    appUrl() {
      const { shopId } = this.$route.query;
      return `xyqb://lsStoreDetail?shopId=${shopId}`;
    }
  },
  created() {
    let { shopId } = this.$route.query;
    this.serviceGoodsParams.shopId = shopId;
    this.getServiceGoods(shopId);
  },

  methods: {
    async getServiceGoods(shopId) {
      const [res, error] = await goodsApi.shopDetail(shopId);
      console.log(res, 'reeee');
      if (!error) {
        this.dataSource = res;
      }
    }
  }
};
</script>

<style lang="less" scoped src="./index.less"></style>
