<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 workHour.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">{{
            workHour.title
          }}</view>
          <view class="container-content__card__title__price"
            >￥{{ workHour.price }}/10分钟</view
          >
        </view>
      </view>

      <view class="container-content__card2">
        <view class="container-content__card2__syr">
          <image
            :src="userSyr.head_photo"
            class="container-content__card2__syr__img"
          ></image>
          <view class="container-content__card2__syr__text">
            {{ userSyr.name }}
          </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">
              {{ workHour.first_class_title }}:
              {{ workHour.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">
              {{ workHour.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 request from "@/utils/request";
export default {
  name: "buyManHour",
  data() {
    return {
      id: "",
      manHourInfo: {},
      workHour:{},
      userSyr:{}
    };
  },
  async onLoad(options) {
    this.id = options.id;
    console.log("工时详情ID", this.id);
    // 获取工时详情
    await this.getDetails();
  },
  methods: {
    async getDetails() {
      await request
        .post("/sj/workHour/details", { id: this.id })
        .then((res) => {
          console.log("获取工时分类列表", res);
          if (res.code == 200) {
            this.manHourInfo = res.data;
            this.manHourInfo.work_hour.photo = JSON.parse(
              this.manHourInfo.work_hour.photo
            );
            this.manHourInfo.work_hour.second_class_title =
              this.manHourInfo.work_hour.second_class_title.join(",");
              this.workHour = this.manHourInfo.work_hour
              this.userSyr = this.manHourInfo.user_syr
          }
        });
    },
    goOrder() {
      uni.navigateTo({
        url: `/pages/shop/manHour/manHourOrder?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%;
          object-fit: cover;
        }
      }
    }
  }
  .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;
          font-style: normal;
          margin-bottom: 20rpx;
        }
        &__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;
        }
      }
      &__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>
