<template>
  <view class="shop-details-container">
    <view class="banner-swiper" v-if="bannerList.length">
      <swiper
        class="swiper-wrapper"
        circular
        :indicator-dots="false"
        :autoplay="true"
        @change="bannerChange"
      >
        <swiper-item v-for="(banner, i) in bannerList" :key="i">
          <image class="swiper-img" :src="banner" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <view class="flex-row-center dot-box">
        <view
          v-for="(banner, index) in bannerList"
          :key="index"
          class="dot-item"
          :class="{ active: bannerIndex === index }"
        ></view>
      </view>
    </view>

    <view class="good-info">
      <view class="info-cell">
        <view class="flex-row-between">
          <view class="">
            <text class="app-fc-mark fs-24">￥</text>
            <text class="app-fc-mark fs-44">{{ details.price || 0 }}</text>
            <text class="fs-24 origin-price">
              ¥{{ details.old_price || 0 }}
            </text>
          </view>
          <view class="flex-row-end">
            <text class="fs-22 app-fc-cancel">
              已售 {{ details.xiaoliang || 0 }}件
            </text>
            <view class="fs-22 app-fc-cancel split-line">|</view>
            <text class="fs-22 app-fc-cancel">
              剩余{{ details.kucun || 0 }}
            </text>
          </view>
        </view>
        <view class="fs-36 app-font-bold app-fc-main good-name">
          {{ details.name || "" }}
        </view>
        <view class="flex-row-start">
          <text
            class="fs-20 sale-btn"
            v-for="(label, i) in labelList"
            :key="i"
            :class="[i > 0 ? 'sale-today app-fc-mark' : 'app-fc-white']"
          >
            {{ label }}
          </text>
        </view>
      </view>
      <view class="info-cell">
        <view class="flex-row-start cell-inner">
          <text class="fs-26 postage-info">使用区间</text>
          <text class="fs-26 app-fc-main flex-1">
            {{ details.weight_name || "-" }}
          </text>
        </view>
        <view class="flex-row-start cell-inner">
          <text class="fs-26 postage-info">有效时间</text>
          <text class="fs-26 app-fc-main flex-1">
            {{ details.youxiao_time || "-" }}
          </text>
        </view>
        <view class="flex-row-start cell-inner" @click="showGuideModal = true">
          <text class="fs-26 postage-info">使用规则</text>
          <text class="fs-26 app-fc-main flex-1 app-text-ellipse">
            {{ details.desc || "-" }}
          </text>
          <image
            class="arrow-icon"
            :src="require('@/static/images/arrow_right_black.png')"
            mode="widthFix"
          />
        </view>
      </view>
      <view class="info-cell" v-if="remarkList.length">
        <view class="width-fill flex-row-between">
          <text class="fs-28 postage-info">
            用户评价
            <text class="fs-24 app-fc-normal"> ({{ remarkCount }}) </text>
          </text>
          <view class="flex-row-end" @click="jumpToRemark">
            <text class="fs-26 app-fc-main">查看全部</text>
            <image
              class="arrow-icon"
              :src="require('@/static/images/arrow_right_black.png')"
            />
          </view>
        </view>
        <view class="remark-list">
          <remark-item v-for="item in remarkList" :key="item.id" :data="item" />
        </view>
      </view>
    </view>

    <view class="fs-36 app-fc-normal rich-text-title">—— 服务详情 ——</view>
    <view class="rich-text-content" v-html="details.content"></view>
    <view class="place-view"></view>

    <view class="flex-row-between details-bottom">
      <text class="fs-30 app-fc-main">
        ￥<text class="fs-48 app-fc-main app-font-bold">{{ payPrice }}</text>
      </text>
      <view
        class="flex-center fs-30 app-fc-white app-font-bold opt-btn"
        @click="createOrder"
      >
        立即购买
      </view>
    </view>

    <use-guide-modal
      v-if="showGuideModal"
      title="使用规则"
      :content="details.desc"
      @ok="showGuideModal = false"
    />

    <success-modal
      v-if="showSuccessModal"
      title="购买成功"
      ok-text="立即预约"
      @ok="paySuccessAction"
    />
  </view>
</template>

<script>
import { getServiceCouponDetail } from "@/api/coupon";
import { getRemarkList } from "../../../api/shop";
import { ORDER_TYPE_PET_SERVICE } from '@/constants/app.business';
import {
  serviceCouponCreateOrder,
  serviceCouponOrderPay,
} from "../../../api/coupon";

import UseGuideModal from "@/components/coupon/UseGuideModal.vue";
import SuccessModal from "@/components/SuccessModal";
import RemarkItem from "@/components/goods/RemarkItem";

export default {
  components: {
    UseGuideModal,
    SuccessModal,
    RemarkItem
  },
  data() {
    return {
      couponId: "",
      details: {},
      bannerList: [],
      bannerIndex: 0,
      remarkList: [],
      showGuideModal: false,
      showSuccessModal: false,
      remarkCount : 0
    };
  },
  computed: {
    labelList() {
      return (this.details?.label || "").split(",").filter((v) => !!v);
    },
    payPrice() {
      return +this.details.price || 0;
    },
  },
  onLoad(options) {
    this.couponId = options.id;
    this.getDetails();
    this.getRemarkListData();
  },
  methods: {
    // 获取服务券详情
    getDetails() {
      getServiceCouponDetail(this.couponId).then((res) => {
        this.details = res?.info || {};
        this.bannerList = (this.details.fuwuquan_pic || []).split(',').filter(v => !!v);
      });
    },
    // 获取评论列表
    getRemarkListData() {
      getRemarkList({ p: 1, num: 1, type: ORDER_TYPE_PET_SERVICE, guanlian_id: this.couponId }).then(
        (res) => {
          this.remarkList = res?.info || [];
          this.remarkCount = res?.count || 0;
        }
      );
    },
    // 轮播图
    bannerChange(e) {
      this.bannerIndex = e.detail.current;
    },
    stripTags(html = "") {
      return html.replace(/<[^>]+>/g, "");
    },
    jumpToRemark() {
      uni.navigateTo({
        url: `/pages/client/remark/list?shopId=${this.couponId}&type=${ORDER_TYPE_PET_SERVICE}`,
      });
    },
    // 下单
    createOrder() {
      uni.showLoading({
        title: "处理中",
        icon: "none",
        mask: true,
      });
      serviceCouponCreateOrder(this.couponId).then((res) => {
        this.pay(res?.info);
      });
    },
    // 支付
    pay(orderId) {
      serviceCouponOrderPay(orderId).then((res) => {
       
    tt.pay({
							 orderInfo: { 
                   order_id:res.data.orderInfo.order_id,
                   order_token:res.data.orderInfo.order_token,
                    },
                    service:5,
          success: (res) => {
            uni.hideLoading();
            this.showSuccessModal = true;
          },
          fail: (err) => {
            uni.hideLoading();
            uni.showToast({
              title: err?.msg || "支付失败",
              icon: "none",
            });
          },
        });
      });
    },
    paySuccessAction(){
      this.showSuccessModal = false;
      uni.redirectTo({
        url: '/pageHome/reservation/index'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.shop-details-container {
  height: 100%;
  background: #f7f8fa;

  .banner-swiper {
    position: relative;
    width: 100%;
    height: 750rpx;
    .swiper-wrapper {
      width: 100%;
      height: 750rpx;
      .swiper-img {
        width: 100%;
        height: 100%;
      }
    }
    .dot-box {
      position: absolute;
      bottom: 30rpx;
      left: 0;
      width: 100%;
      .dot-item {
        width: 12rpx;
        height: 12rpx;
        border-radius: 12rpx;
        background: rgba(255, 255, 255, 0.6);
        margin-right: 12rpx;
        &.active {
          width: 28rpx;
          height: 12rpx;
          background: #ffffff;
        }
      }
    }
  }

  .good-info {
    margin: 24rpx 32rpx;

    .info-cell {
      background: #fff;
      border-radius: 20rpx;
      padding: 36rpx 24rpx;
      margin-bottom: 24rpx;

      .split-line {
        margin: 0 10rpx;
      }
    }

    .cell-inner {
      padding: 12rpx 0;

      .info-arrow-icon {
        width: 40rpx;
        height: 20rpx;
      }
    }

    .origin-price {
      color: #726e71;
      text-decoration: line-through;
      margin-left: 18rpx;
      line-height: 44rpx;
    }

    .good-name {
      margin: 30rpx 0;
    }

    .sale-btn {
      padding: 6rpx 12rpx;
      background: $app_color_main;
      border-radius: 4rpx;
      border: 1rpx solid $app_color_main;
      margin-right: 12rpx;
      margin-bottom: 24rpx;
      &.sale-today {
        background: transparent;
      }
    }

    .postage-info {
      color: #9b939a;
      margin-right: 32rpx;
    }

    .arrow-icon {
      width: 30rpx;
      height: 18rpx;
      margin-left: 20rpx;
    }

    .remark-list {
      border-top: 2rpx solid #ebebeb;
      margin-top: 36rpx;
      ::v-deep {
        .remark-item {
          width: 100%;
          margin: 0;
          padding: 40rpx 0;
        }
      }
    }
  }

  .rich-text-title {
    margin: 32rpx 0 24rpx;
    text-align: center;
  }

  .rich-text-content {
    background: #fff;
    padding: 24rpx;
  }

  .place-view {
    height: 190rpx;
  }

  .details-bottom {
    position: fixed;
    bottom: 0;
    padding-bottom: 20rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: 20rpx;
    padding-left: 40rpx;
    padding-right: 36rpx;
    left: 0;
    width: 100vw;
    background: #fff;
    box-sizing: border-box;

    .opt-btn {
      width: 260rpx;
      height: 92rpx;
      background: $app_color_main;
      border-radius: 92rpx;
    }
  }
}
</style>
