<template>
  <view class="container">
    <custom-navbar
      title="工时详情"
      :showBack="true"
      backgroundColor="#FFFFFF"
    ></custom-navbar>
    <view class="container-header">
      <swiper
        class="container-header__swiper"
        circular
        :indicator-dots="false"
        :autoplay="false"
        :interval="3000"
        :duration="500"
        indicator-active-color="#fff"
        indicator-color="rgba(255, 255, 255, 0.6)"
      >
        <swiper-item
          v-for="(item, index) in work_seat.photo"
          :key="index"
          class="container-header__swiper__item"
        >
          <image
            :src="item"
            mode ="aspectFill"
            class="container-header__swiper__item__img"
          ></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="container-content">
      <view class="container-content__card">
        <view class="container-content__card__title">
          <view class="container-content__card__title__text">{{
            work_seat.title
          }}</view>
          <view class="container-content__card__title__price"
            >￥{{ work_seat.price }}/10分钟</view
          >
        </view>
      </view>

      <view class="container-content__card2">
        <view class="container-content__card2__syr">
          <image
            :src="user_sj.head_photo"
            class="container-content__card2__syr__img"
          ></image>
          <view class="container-content__card2__syr__text">
            {{ user_sj.name }}
          </view>
        </view>
        <view class="shop_address" @click="openMap()" style="margin-top: 37rpx;">
          <image
            class="shop_icon"
            src="@/static/images/icons/address_gray.png"
          />
          <text>{{ user_sj.dependency }}{{ user_sj.address }}</text>
        </view>
        <view class="shop_address"  @click="contactService(user_sj.phone)">
          <image class="shop_icon" src="@/static/images/icons/phone_gray.png" />
          <text>{{ user_sj.phone }}</text>
        </view>
      </view>

      <view class="container-content__card2">
        <view class="container-content__card2__Serve">
          <view class="container-content__card2__Serve__title">
            服务范围详情</view
          >
          <view class="container-content__card2__Serve__card">
            <view class="container-content__card2__Serve__card__content">
              {{ work_seat.first_class_title }}:
              {{ work_seat.second_class_title }}
            </view>
            <view class="container-content__card2__Serve__card__remark">
              备注：可以支持您做以上类目的服务。
            </view>
          </view>
        </view>
      </view>
      <view class="container-content__card2">
        <view class="container-content__card2__Serve">
          <view class="container-content__card2__Serve__title"> 工位描述</view>
          <view class="container-content__card2__Serve__card">
            <view class="container-content__card2__Serve__card__content">
              {{ work_seat.detail }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="container-footer">
      <view class="container-footer__btn" @tap="goOrder"> 立即预约 </view>
    </view>
    <view style="height: 166rpx"></view>
  </view>
</template>

<script>
import _public from "@/utils/public";
import request from "@/utils/request";
export default {
  name: "buyManHour",
  data() {
    return {
      id: "",
      manHourInfo: {},
      work_seat:{},
      user_sj:{}
    };
  },
  async onLoad(options) {
    this.id = options.id;
    // 获取工时详情
    await this.getDetails();
   
  },
  methods: {
    openMap() {
      
      // #ifdef MP-WEIXIN
      uni.openLocation({
        success: () => console.log("打开系统位置地图成功"),
        fail: (error) => console.log(error),
      });
      // #endif
      // #ifdef APP-PLUS
      _public.goMap({
        latitude: parseFloat(this.user_sj.latitude),
        longitude: parseFloat(this.user_sj.longitude),
        name: this.user_sj.name,
        address: this.user_sj.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();
        }
      }
    },
    async getDetails() {
      await request
        .post("/syr/workSeat/details", { id: this.id })
        .then((res) => {
          if (res.code == 200) {
            this.manHourInfo = res.data;
            this.manHourInfo.work_seat.photo = JSON.parse(
              this.manHourInfo.work_seat.photo
            );
            this.manHourInfo.work_seat.second_class_title =
              this.manHourInfo.work_seat.second_class_title.join(",");
			 
              this.work_seat = this.manHourInfo.work_seat
              this.user_sj = this.manHourInfo.user_sj
               console.log(2222,this.user_sj)
          }
        });
    },
    goOrder() {
      uni.navigateTo({
        url: `/pages/syr/workstation/workstationOrder?manHourInfo=${encodeURIComponent(JSON.stringify(this.manHourInfo))}`,
      });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  .container-header {
    &__swiper {
      height: 732rpx;
      .container-header__swiper__item {
        height: 100%;
        .container-header__swiper__item__img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .container-content {
    &__card {
      margin: 20rpx 30rpx;
      padding: 30rpx;
      background: #fff;
      border-radius: 10rpx;
      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(210,213,224,0.5);
      &__title {
        &__text {
          font-weight: 500;
          font-size: 36rpx;
          color: #333333;
          line-height: 50rpx;
          text-align: left;
           margin-bottom: 20rpx;
          font-style: normal;
        }
        &__price {
          font-weight: 500;
          font-size: 36rpx;
          color: #E8101E;
          line-height: 50rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
    &__card2 {
      margin: 20rpx 30rpx;
      padding: 20rpx 30rpx 30rpx 30rpx;
      background: #fff;
      border-radius: 10rpx;
      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(210,213,224,0.5);
      &__syr {
        display: flex;
        align-items: center;
        &__img {
          width: 94rpx;
          height: 94rpx;
          border-radius: 50%;
          margin-right: 14rpx;
        }
        &__text {
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
          line-height: 45rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .shop_address{
        margin-top: 20rpx;
        display: flex;
    flex-wrap: nowrap;
        .shop_icon{
          width: 30rpx;
          height: 30rpx;
          margin-right: 5rpx;
        }
        text{
font-weight: 400;
font-size: 26rpx;
color: #666666;
line-height: 37rpx;
text-align: left;
font-style: normal;
        }
      }
      &__Serve {
        &__title {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-bottom: 20rpx;
        }
        &__card {
          padding: 20rpx;
          border: 1px solid #e5e5e5;
           border-radius: 10rpx;
          &__content {
            font-weight: 400;
            font-size: 26rpx;
            color: #333333;
            line-height: 37rpx;
            text-align: left;
            font-style: normal;
          }
          &__remark {
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
            line-height: 33rpx;
            text-align: left;
            font-style: normal;
            margin-top: 30rpx;
          }
        }
      }
    }
  }
  .container-footer {
    height: 166rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    &__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 696rpx;
      height: 78rpx;
      border-radius: 798rpx;
      border: 2rpx solid #E8101E;
      font-weight: 400;
      font-size: 30rpx;
      color: #E8101E;
      line-height: 39rpx;
      text-align: right;
      font-style: normal;
      margin-left: 30rpx;
      margin-top: 40rpx;
    }
  }
}
</style>
