<template>
  <BasePage>
    <div class="shopinfo">
      <img src="/img/shopinfo-top.jpg" style="width: 100%;" alt="店铺图片" class="shop-image">

      <div class="shop_details">
        <div class="shopi_box">
          <img :src="$file(shopInfo.shopimg) || '/img/avatar.png'" alt="" @click="previewImage(shopInfo.shopimg)">
          <div class="info_box">
            <div class="name_box">
              <b>{{ shopInfo.shopname }}</b>
              <span class="type">{{ shopInfo.shopcatename }}</span>
            </div>
            <div class="tags">
              <div class="disc_box"><img src="/img/icon_disc.png" alt="">{{ shopInfo.feeratio }}%</div>
              <div class="canpay_box"><img src="/img/icon_canpay.png" alt="">可到店消费</div>
            </div>
          </div>
        </div>

        <div class="tomap">
          <div class="address">
            <img class="addr_icon" src="/img/addr_r.png" alt="">
            <div class="ri">
              <span>{{ shopInfo.shopprovince }}{{ shopInfo.shopcity }}{{ shopInfo.shopcounty }}{{ shopInfo.shopstreet ||
                '' }}{{ shopInfo.shopaddress }}</span>
              <div class="distance" v-if="shopInfo.distance">距离{{ (shopInfo.distance / 1000)?.toFixed(2) }}km</div>
            </div>
          </div>

          <div class="map_icon" @click="openMap">
            <img src="/img/map.png" alt="">
          </div>
        </div>

        <div class="onlinetime">
          <div class="left_box">
            <img class="clock_icon" src="/img/clock.png" alt="">
            <span>{{ shopInfo.businesstime || '暂未设置' }}</span>
          </div>

          <div class="map_icon" @click="callPhone">
            <img src="/img/icon_phone.png" alt="">
          </div>
        </div>
      </div>

      <hr style="margin: 0; border: none; height: 1.6vw; background-color: #f5f5f5;">

      <div class="intro">
        <b class="title">
          商家介绍
        </b>
        <div class="htmlcontent" v-html="shopInfo.shopdescriptionhtml || '暂无商家介绍'"></div>
      </div>

      <van-action-bar placeholder>
        <van-action-bar-icon icon="shop-o" text="附近的店" @click="$router.back()" />
        <van-action-bar-button color="#ca2904" type="danger" text="到店买单" @click="openMap" />
      </van-action-bar>

    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'ShopInfo',
  data() {
    return {
      // 店铺信息数据
      shopInfo: {
      }
    }
  },
  mounted() {
    this.init();
    this.initLocation();
  },
  methods: {
    init() {
      this.$get('/v1/client/DShopsClient/list', { userid: this.$route.query.id }).then(res => {
        this.shopInfo = res.data.items[0] || {}
      });
    },
    callPhone() {
      if (this.shopInfo.shopphone) {
        window.location.href = `tel:${this.shopInfo.shopphone}`
      }
    },
    previewImage(url) {
      const imageUrl = this.$file(url);
      if (imageUrl) {
        this.$showImagePreview({ images: [imageUrl], startPosition: 0 });
      }
    },
    initLocation() {
      if (wx && this.$isWechat()) {
        this.$post('/v1/client/HWxinfoClient/share', JSON.stringify(location.href)).then(res => {
          const data = res.data || {};
          const jsApiList = data.jsApiList || ['getLocation', 'openLocation'];
          const openTagList = data.openTagList || ['wx-open-launch-weapp'];
          jsApiList.push('wx-open-launch-weapp');
          wx.config({
            debug: false,
            appId: data.appid,
            timestamp: Number(data.timestamp) || 0,
            nonceStr: data.noncestr,
            signature: data.signature,
            jsApiList: jsApiList,
            openTagList: openTagList
          });
          // 预获取定位权限，用户点击地图时可以直接打开
          // wx.ready(() => {
          //   wx.getLocation({
          //     type: 'gcj02',
          //     success: () => {
          //       console.log('定位权限获取成功');
          //     },
          //     fail: () => {
          //       console.log('定位权限获取失败');
          //     },
          //   });
          // });
        });
      }
    },
    openMap() {
      if (this.shopInfo.shoplatitude && this.shopInfo.shoplongitude) {
        const lat = this.shopInfo.shoplatitude;
        const lon = this.shopInfo.shoplongitude;
        const fullAddress = (
          (this.shopInfo.shopprovince || '') +
          (this.shopInfo.shopcity || '') +
          (this.shopInfo.shopcounty || '') +
          (this.shopInfo.shopstreet || '') +
          (this.shopInfo.shopaddress || '')
        );
        if (wx && this.$isWechat()) {
          wx.ready(() => {
            wx.openLocation({
              latitude: Number(lat),
              longitude: Number(lon),
              name: this.shopInfo.shopname || '',
              address: fullAddress,
              scale: 15,
              infoUrl: '',
              success: () => {
                console.log('wx.openLocation success');
              },
            });
          });
        }
      } else {
        window.open(`https://uri.amap.com/navigation?to=${lon},${lat},${fullAddress}&mode=car&src=shop`, '_blank');
      }
    },
  }
}
</script>