<template>
  <view class="container">
    <custom-navbar
      title="门店详情"
      :showBack="true"
      backgroundColor="#fff"
    ></custom-navbar>
    <view class="isCode">
      <view class="isCode-title">门店信息</view>
      <view class="isCode-cards">
        <view class="isCode-card card-border">
          <view class="card-title"
            >营业时间
            <text class="card-business">{{ sjdetail.business_time }}</text>
          </view>
        </view>
        <view class="isCode-card card-border">
          <view class="card-title">经营类目</view>
          <view class="detail-info-user__tabs">
            <view
              v-for="(item, index) in tabsPopList"
              :key="index"
              class="detail-info-user__tabs__tab"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
        <view class="isCode-card card-border">
          <view class="card-title">商家地址</view>
          <view class="card-info">
            <view class="card-info-left">
              {{ sjdetail.address }}
            </view>
            <image
            @click="openMap"
              src="/static/images/shop/address.png"
              class="card-info-right"
            ></image>
          </view>
        </view>
        <view class="isCode-card">
          <view class="card-title">商家电话</view>
          <view class="card-info">
            <view class="card-info-left">
              {{ sjdetail.legal_phone }}
            </view>
            <image src="/static/images/shop/phone.png" class="card-info-right" @click="contactService(sjdetail.legal_phone)" />
          </view>
        </view>
      </view>
      <view class="isCode-title" style="padding: 20rpx 0">营业执照</view>
      <view class="isCode-cards">
        <image
          mode="widthFix"
          :src="sjdetail.uscc_photo"
          class="isCode-cards-license"
        ></image>
        <wmWatermark text="美融融专用"> </wmWatermark>
      </view>
    </view>
  </view>
</template>

<script>
import _public from "@/utils/public";
import permissionUtils from "@/utils/per";
import request from "../../utils/request";
import wmWatermark from "@/components/wm-watermark/wm-watermark.vue";
export default {
  components: {
    wmWatermark,
  },
  data() {
    return {
      sjdetail: {},
      userObj: {},
      tabsPopList: [],
    };
  },
  onLoad(options) {
    console.log(options);
    let userAdrees = uni.getStorageSync("userAdrees");
    if (userAdrees) {
      this.userObj.userLngz = userAdrees.longitude;
      this.userObj.userLat = userAdrees.latitude;
    } else {
      this.userObj.userLngz = "117.330043";
      this.userObj.userLat = "38.372266";
    }
    this.userObj.id = options.id;
    this.getShopDetail();
  },
  methods: {
    openMap() {
      // #ifdef MP-WEIXIN
      uni.openLocation({
        success: () => console.log("打开系统位置地图成功"),
        fail: (error) => console.log(error),
      });
      // #endif
      // #ifdef APP-PLUS
      _public.goMap({
        latitude: parseFloat(this.sjdetail.latitude),
        longitude: parseFloat(this.sjdetail.longitude),
        name: this.sjdetail.name,
        address: this.sjdetail.address,
      });
      // #endif
    },
    async contactService(phone) {
      const systemInfo = uni.getSystemInfoSync();
      if (systemInfo.platform === "ios") {
        uni.makePhoneCall({ phoneNumber: phone });
      } else {
        let permission =
          systemInfo.platform === "ios"
            ? "phone"
            : "android.permission.CALL_PHONE";
        this.isShowPer = true;
        const firstRequest = !plus.storage.getItem(`perm_${permission}`);
        if (firstRequest) this.isShowPer = true;
        const { granted } = await permissionUtils.checkPermission(
          "phone",
          "需要拨打电话权限，方便您联系商家或平台"
        );
        if (granted) {
          this.isShowPer = false;
          uni.makePhoneCall({ phoneNumber: phone });
          return;
        }
        this.isShowPer = false;
        const confirm = await this.showPermissionDialog(
          "拨打电话权限申请",
          "我们需要拨打电话权限，方便您联系商家或平台"
        );
        if (!confirm) return;
        const result = await permissionUtils.requestPermission(
          "phone",
          "需要拨打电话权限，方便您联系商家或平台"
        );
        if (result) {
          uni.makePhoneCall({ phoneNumber: phone });
        } else {
          locationService.openAppSettings();
        }
      }
    },
    // 获取商家详情
    getShopDetail() {
      request
        .post("/user/sjdetail", this.userObj)
        .then((res) => {
          this.sjdetail = res.data;
          this.tabsPopList = [];
          this.sjdetail.servers_kill.forEach((element, index) => {
            let obj = {
              id: element,
              name: this.sjdetail.servers_kill_arr[index],
              active: false,
            };
            this.tabsPopList.push(obj);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less">
.container {
  background-color: transparent;
  padding: 25rpx 20rpx;

  .isCode {
    .isCode-title {
      margin-left: 15rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      line-height: 45rpx;
      text-align: left;
      font-style: normal;
    }

    .isCode-cards {
      position: relative;
      margin-top: 20rpx;
      padding: 30rpx;
      background: #ffffff;
      border-radius: 20rpx;

      .isCode-cards-license {
        width: 100%;
      }

      .isCode-card {
        
        .card-title {
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
          line-height: 37rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .card-border {
        padding-bottom: 31rpx;
        border-bottom: 2rpx solid #f5f3f3;
        margin-bottom: 30rpx;
      }

      .card-business {
        margin-left: 20rpx;
        font-family: DINPro, DINPro;
        font-weight: 500;
        font-size: 26rpx;
        color: #5b5b5b;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }

      .detail-info-user__tabs {
        margin-top: 16rpx;
        display: flex;
        gap: 20rpx;
        flex-wrap: wrap;       /* 允许标签按行换行排列 */

        &__tab {
          flex-shrink: 0;          /* 禁止子项被压缩换行 */
          background: #f5f5f5;
          border-radius: 8rpx;
          padding: 0 8rpx;
          font-weight: 400;
          font-size: 20rpx;
          color: #666666;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .card-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;
        .card-info-left {
          font-weight: 400;
          font-size: 24rpx;
          color: #5b5b5b;
          line-height: 33rpx;
          text-align: left;
          font-style: normal;
        }
        .card-info-right {
          width: 34rpx;
          height: 34rpx;
        }
      }
    }
  }
}
</style>
