<template>
  <view class="page-container">
    <view class="detail-content">
      <view class="detail-title">
        <view class="info">
          <view class="service-avatar">
            <image
              :src="this.public + details.technicianAvatar"
              mode="aspectFill"
            ></image>
          </view>
          <text class="name">{{ details.technicianNickName }}</text>
        </view>
        <view class="status">
          <view
            :class="{
              'service-status': details.technicianStatus != 2,
              'reserve-status': details.technicianStatus == 2,
            }"
            >{{ details.technicianStatus === 2 ? '可预约' : '可服务' }}</view
          >
        </view>
      </view>
      <view class="swiper-box">
        <text class="tips">图片仅供参考</text>
        <MySwiper :list="swipeList" :autoplay="autoplay" />
      </view>
      <view class="detail-info">
        <view class="title">{{ details.title }}</view>
        <view class="describe">{{ details.content }}</view>
        <view class="date">{{ details.publishTime }}</view>
      </view>
      <view class="location">
        <view class="free_box">
          <image
            src="/static/discover/icon_location.png"
            mode=""
            class="location-icon"
          />
          {{ details.distance }}km
          <image
            src="/static/discover/icon_eye_cru.png"
            mode=""
            class="eye-icon"
          />
          {{ details.viewCount }}
        </view>
        <view class="btn" @click.stop="nowYuyue(details)">
          <text>预约TA</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { dynamicDetail } from '@/api/dynamic.js'
import MySwiper from '@/components/swiper/index.vue'

export default {
  components: { MySwiper },
  data() {
    return {
      public: this.$globalData.publicUrl, //图片前缀
      details: '',
      autoplay: false,
      swiper: [],
      swipeList: [],
    }
  },
  onLoad(options) {
    this.getDetails(options.momentId)
  },
  methods: {
    getDetails(id) {
      this.swiper = []
      const params = {
        momentId: id,
        latitude: uni.getStorageSync('latitude'),
        longitude: uni.getStorageSync('longitude'),
      }
      dynamicDetail(params).then(res => {
        if (res.data.code === 200 && res.data.data) {
          if (res.data.data.mediaList && res.data.data.mediaList.length > 0) {
            res.data.data.mediaList.forEach(item => {
              this.swiper.push(item)
            })
          }
          if (this.swiper) {
            this.swipeList = this.swiper.map(item => {
              const isVideo = res.data.data.mediaType == 2
              return {
                src: item.mediaUrl,
                type: isVideo ? 'video' : 'image',
                // 视频封面（需替换）
                poster: isVideo
                  ? res.data.data.coverUrl
                  : res.data.data.mediaList[0].mediaUrl,
              }
            })
          }
          let data = {
            ...res.data.data,
            publishTime: res.data.data.publishTime
              .replace('T', ' ')
              .substring(0, 19),
          }
          this.details = data
        }
      })
    },
    //立即预约
    nowYuyue(item) {
      uni.navigateTo({
        url: '/pages/identify/details?id=' + item.technicianId,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page-container {
  font-family: PingFang SC, PingFang SC;
  background-color: #f7ffff;
}

.detail-content {
  overflow-y: scroll;
  background-color: #f7ffff;

  .detail-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx 24rpx 34rpx;

    .info {
      display: flex;
      align-items: center;

      .service-avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 16rpx;
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .name {
        display: block;
        font-size: 32rpx;
        color: #333;
        margin-right: 12rpx;
      }
    }

    .status {
      .service-status {
        color: #fff;
        background-color: #03c8be;
        font-size: 24rpx;
        font-weight: 500;
        padding: 0 25rpx;
        border-radius: 30px;
        width: 124rpx;
        height: 46rpx;
        line-height: 46rpx;
        margin-top: 4rpx;
      }

      .reserve-status {
        color: #a1601f;
        background-color: #facd9a;
        font-size: 24rpx;
        font-weight: 500;
        padding: 0 25rpx;
        border-radius: 30px;
        width: 124rpx;
        height: 46rpx;
        line-height: 46rpx;
        margin-top: 4rpx;
      }
    }
  }

  swiper {
    height: 516rpx;
  }

  .swiper-box {
    width: 100%;
    height: 516rpx;
    position: relative;

    .tips {
      font-size: 18rpx;
      color: #808080;
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }

  .detail-info {
    padding: 32rpx 24rpx;

    .title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }
    .describe {
      font-weight: 500;
      font-size: 24rpx;
      color: #333333;
      line-height: 36rpx;
      margin-bottom: 20rpx;
    }
    .date {
      font-weight: 500;
      font-size: 24rpx;
      color: #999999;
    }
  }

  .location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 92rpx;
    padding: 28rpx 42rpx;
    color: #9e9e9e;
    background-color: #fff;

    .free_box {
      font-size: 24rpx;
      color: #999999;
      display: flex;
      align-items: center;

      .eye-icon {
        width: 30rpx;
        height: 24rpx;
        margin: 0 10rpx 0 32rpx;
      }

      .location-icon {
        width: 20rpx;
        height: 25rpx;
        color: #03c8be;
        margin-right: 10rpx;
      }
    }

    .btn {
      width: 164rpx;
      height: 56rpx;
      color: #ffffff;
      font-size: 30rpx;
      line-height: 30rpx;
      font-weight: bold;
      text-align: center;
      padding: 14rpx 0;
      background: linear-gradient(135deg, #ff8b66 0%, #ee5b2d 100%);
      border-radius: 98rpx;
    }
  }
}

::v-deep {
  uni-swiper {
    .uni-swiper-dot {
      background: #fff;
    }

    .uni-swiper-dot-active {
      width: 48rpx;
      height: 16rpx;
      background: #03c8be !important;
      border-radius: 38rpx;
    }
  }
  .uni-video-cover-play-button {
    width: 120rpx;
    height: 120rpx;
    background-image: url('/static/discover/ic_play.png');
  }
  .uni-video-cover-duration {
    display: none;
  }
}
</style>