<template>
  <!-- 发票信息弹窗 -->
  <view
    class="store-item"
    @tap="getStationItem"
  >
    <view
      class="store-img-box"
    >
      <image
        class="store-img"
        :src="img ? (img.indexOf('http')!==-1 ? img : resourcesUrl+img) : shopStoreIcon"
        mode="aspectFit"
        @error="img=''"
      />
      <view
        v-if="(!item.hasStock || item.hasStock === 0) && isShowNoStock"
        class="no-stock"
      >
        库存不足
      </view>
    </view>
    <view
      v-if="item.stationName"
      class="store-info"
    >
      <view class="name">
        <view class="text">
          {{ item.stationName }}
        </view>
        <view
          class="distance"
          @tap.stop="shopPhone(item.mobile)"
        >
          <image
            class="time-icon"
            src="@/package-user/static/images/tel.png"
          />联系门店
        </view>
      </view>
      <view
        class="time"
        @tap.stop="nono"
      >
        <image
          class="time-icon"
          src="@/package-user/static/images/icon_time.png"
          mode="aspectFit"
        />
        <view class="time-info">
          {{ item.operationState ? '营业中' : '休息中' }}
          {{ item.business ? item.business : item.timeInfo?.startTime + " - " + item.timeInfo?.endTime }}
        </view>
      </view>
      <view
        class="address"
        @tap.stop="openMap"
      >
        <image
          class="address-icon"
          src="@/static/images/my-address.png"
          mode="aspectFit"
        />
        <view class="address-info">
          距您{{ item.distanceCont }}
          <text class="dot">
            ·
          </text>
          <text v-if="item.stationAddress">
            {{ item.stationAddress }}
          </text>
          <text v-else>
            {{ item.province }}{{ item.city }}{{ item.area }}{{ item.addr }}
          </text>
        </view>
      </view>
    </view>

    <view
      v-else
      class="store-info"
      style="line-height: 120rpx;text-align: center;color: grey"
    >
      还没有选择可自提门店
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'
import shopStoreIcon from '@/package-user/static/images/shop-store-icon.png'

const props = defineProps({
  item: {
    type: Object,
    default () {
      return {}
    }
  },
  isShowNoStock: { // 是否显示库存不足提示
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['getStationItem'])

const img = reactive(props.item.imgUrl)
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL

const getStationItem = () => {
  if (props.item.hasStock && props.item.hasStock !== 0) {
    emit('getStationItem', props.item)
  }
}

// 拨打商家电话
const shopPhone = (tel) => {
  uni.makePhoneCall({
    phoneNumber: tel,
    fail () {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none',
        duration: 1500
      })
    }
  })
}

/**
 * 打开地图
 */
const openMap = () => {
  if (props.item.lat || props.item.lng) {
    const locationObj = util.bdMapToTxMap(props.item.lng, props.item.lat)
    uni.openLocation({
      latitude: Number(locationObj.lat),
      longitude: Number(locationObj.lng)
    })
  }
}
/**
 * 空方法
 */
const nono = () => {}

</script>

<style lang="scss" scoped>
@use "index";
</style>

<style lang="scss" scoped>
@use "../../../popup";
</style>
