<style  scoped>
.Jiaheactivitydetails {
  width: 100%;
  height: 100vh;
  background: #fff;
  font-family: aa;
}
.box {
  width: 100%;
  position: relative;
}
.details-box-top-z {
  width: 100%;
  height: 6rpx;
}
.details-box-top-f {
  width: 100%;
  height: 6rpx;
  background: #e2e2e2;
}
.details-box-t-positions {
  height: 40rpx;
  font-size: 20rpx;
  color: #fff;
  background: #b7a264;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 26rpx;
  border-top-right-radius: 12rpx;
  border-bottom-left-radius: 12rpx;
  position: absolute;
  right: 0;
  top: 0;
}
.details-b-center {
  width: 100%;
  display: flex;
  margin-top: 40rpx;
}
.details-b-center-l {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.details-b-center-r {
  width: 1px;
  flex: 1;
  box-sizing: border-box;
  padding: 0 30rpx;
}
.details-b-title {
  width: 100%;
  font-size: 28rpx;
  color: #111111;
  font-weight: bold;
  font-family: PingFang SC;
}
.details-b-time {
  font-size: 22rpx;
  color: #999999;
  margin-top: 18rpx;
}
.addressStyle {
  width: 690rpx;
  height: 45px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(139, 115, 64, 0.16);
  border-radius: 6px;
  font-size: 12px;
  color: #999999;
  display: flex;
  box-sizing: border-box;
  padding: 0 30rpx;
  align-items: center;
  margin-top: 20px;
  margin-left: 30rpx;
}
.addressStyle-r {
  width: 1px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.positionb {
  width: 100%;
  height: 120rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30rpx;
  background: #fff;
}
.btnc {
  width: 220rpx;
  height: 80rpx;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #ffffff;
  background: #cccccc;
}

.title-pic {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #111111;
  margin-top: 40rpx;
  margin-bottom: 30rpx;
  position: relative;
}
.title-pic .line-bottom {
  width: 71rpx;
  height: 12rpx;
  background-color: #00acf9;
  border-radius: 4rpx;
  position: absolute;
  left: 0;
  bottom: -5rpx;
  opacity: 0.8;
}
.pic-name {
  margin-bottom: 30rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.video-box {
  display: flex;
  flex-wrap: wrap;
}
.video-box .pic-box:nth-child(3n) {
  margin-right: 0 !important;
}
.pic-box {
  width: 222rpx;
  height: 300rpx;
  border-radius: 12rpx;
  margin: 0 10rpx 30rpx 0;
}
.oneimg {
  width: 222rpx;
  height: 222rpx;
  border-radius: 12rpx;
  background-color: #d7d7d7;
  border: 1rpx solid #eeeeee;
}
.fourimg-box {
  width: 222rpx;
  height: 222rpx;
  border-radius: 12rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  border: 1rpx solid #eeeeee;
}
.fourimg {
  width: 105rpx;
  height: 105rpx;
  border-radius: 11rpx;
  /*  background-color: #000000; */
}
.item-name {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.item-num {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}

.jz_TripMain {
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
}

.jz_TripTitle {
  width: 100%;
  min-height: 90rpx;
  border-radius: 20rpx;
  background-color: #00acf9;
  color: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 28rpx;
}

.jz_TripLeft {
  width: 80rpx;
  white-space: nowrap;
  font-size: 30rpx;
  font-weight: 500;
  margin-right: 20rpx;
}

.jz_TripRight {
  font-size: 30rpx;
  font-weight: 500;
}

.jz_TripLine {
  position: absolute;
  width: 4rpx;
  height: 100%;
  background-color: #00acf9;
  left: 24rpx;
  top: 90rpx;
}

.jz_RightInner {
  margin-left: 50rpx;
}

.jz_Place {
  position: relative;
  color: #111111;
  font-size: 24rpx;
  margin: 30rpx 0;
  font-weight: bold;
  display: flex;
}

.jz_ComDian {
  width: 18rpx;
  height: 18rpx;
  background-color: #dfbe6e;
  border-radius: 50%;
  position: absolute;
  left: -32rpx;
  top: 8rpx;
}
.Jiaheactivitydetails .con {
  width: 622rpx;
  background-color: #f1f1f1;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 30rpx;
}
.Jiaheactivitydetails .active-img-box {
  height: 200rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Jiaheactivitydetails .img-box {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
}
.Jiaheactivitydetails .active-img {
  width: 100%;
  height: 100%;
}
.Jiaheactivitydetails .img-box2 {
  position: relative;
}
.Jiaheactivitydetails .img-box2 .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #5f5b5d;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
}
.Jiaheactivitydetails .addr {
  margin: 30rpx 0;
}
</style>
<template>
  <view class="Jiaheactivitydetails" v-if="!loading">
    <view
      style="width: 100%; height: 450rpx"
      @click="previewImage(detial.CoverImg)"
    >
      <image
        :src="detial.CoverImg"
        style="width: 100%; height: 100%"
        mode="aspectFill"
      ></image>
    </view>

    <view class="box">
      <view v-if="detial.IsJoinActivity == 0">
        <view
          class="details-box-top-z"
          v-if="detial.TotalMan - detial.JoinNum > 0"
          :style="{ background: mainColor }"
        ></view>
        <view
          class="details-box-top-f"
          v-if="detial.TotalMan - detial.JoinNum == 0"
        ></view>
        <view
          class="details-box-t-positions"
          v-if="detial.TotalMan - detial.JoinNum > 0 && detial.IsSignUp == 1"
          :style="{ background: mainColor }"
        >
          <text>{{
            detial.TotalMan - detial.JoinNum >= 6
              ? "可预约"
              : detial.TotalMan - detial.JoinNum < 6
              ? "剩余" + (detial.TotalMan - detial.JoinNum) + "个空位"
              : ""
          }}</text>
        </view>
        <view
          class="details-box-t-positions"
          v-if="detial.TotalMan - detial.JoinNum == 0"
          style="background: #e2e2e2; color: #999999"
        >
          爆满
        </view>
      </view>
      <view v-if="detial.IsJoinActivity == 1">
        <view class="details-box-top-f" style="background: #00acf9"></view>
        <view
          class="details-box-t-positions"
          :style="{ background: '#00ACF9' }"
        >
          已报名
        </view>
      </view>

      <view class="details-b-center">
        <view class="details-b-center-l">
          <view
            style="
              font-size: 28rpx;
              color: #999999;
              font-weight: 500;
              font-family: PingFang SC;
            "
          >
            {{ detial.MonthStr }}月
          </view>
          <view
            style="
              font-size: 50rpx;
              color: #1b1d1e;
              font-weight: 800;
              font-family: PingFang SC;
            "
          >
            {{ detial.DayStr }}
          </view>
          <view
            style="
              font-size: 28rpx;
              color: #999999;
              font-weight: 500;
              font-family: PingFang SC;
            "
          >
            {{ detial.WeekStr }}
          </view>
        </view>
        <view style="width: 1px; background: #e2e2e2; height: 86px"></view>
        <view class="details-b-center-r">
          <view class="details-b-title">
            {{ detial.ActivityName }}
          </view>
          <view class="details-b-time">
            报名时间:{{ detial.BMStart }}-{{ detial.BMEnd }}
          </view>
          <view class="details-b-time">
            活动时间:{{ detial.HDStart }}-{{ detial.HDEnd }}
          </view>
          <view class="details-b-time"> 活动席位:{{ detial.TotalMan }}人 </view>
          <view class="details-b-time">
            <text v-if="detial.Distinguish == 1"
              >已报入:{{ detial.JoinNum }}人</text
            >
            <text v-if="detial.Distinguish == 0"
              >已报入:男性{{ detial.ManNum }}人
              <text style="margin-left: 10px">女性{{ detial.WoManNum }}人</text>
            </text>
          </view>
          <view class="details-b-time" v-if="detial.AgeLimit == 0">
            <text
              >年龄范围:{{ detial.StartAge }}岁 ~ {{ detial.EndAge }}岁</text
            >
          </view>
          <view class="details-b-time" v-if="detial.LnsideLimit == 1">
            <text>只针对甲鹤学员</text>
          </view>
        </view>
      </view>
      <view class="addressStyle" @click="goopenlocation(detial)">
        <image
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/jiaheaddress.png"
          style="width: 12px; height: 15px; margin-right: 15px"
        ></image>
        <view class="addressStyle-r">
          {{ detial.LocationName }}
        </view>
      </view>

      <view
        style="
          width: 100%;
          box-sizing: border-box;
          padding: 30rpx;
          margin-bottom: 150rpx;
        "
      >
        <view class="title-pic" v-if="richtext">
          活动特色
          <view class="line-bottom"></view>
        </view>
        <view class="acdetail_Intro" v-html="richtext"></view>
        <view class="title-pic" v-if="detial.ActivityTitleList.length > 0">
          活动内容
          <view class="line-bottom"></view>
        </view>
        <view class="jz_TripMain">
          <view class="jz_TripLine"></view>
          <view v-for="(item, index) in detial.ActivityTitleList" :key="index">
            <view
              class="jz_TripTitle"
              :style="{ 'margin-top': index === 0 ? '10rpx' : '40rpx' }"
            >
              <view class="jz_TripLeft">第{{ index + 1 }}天</view>
              <view class="jz_TripRight">{{ item.Title }}</view>
            </view>
            <view class="jz_RightInner">
              <template
                v-for="(item2, index2) in item.ActivityPlanList"
                v-if="item.ActivityPlanList.length > 0"
              >
                <view class="jz_Place">
                  <view class="jz_ComDian"></view>
                  <text style="margin-right: 10rpx">{{ item2.StartTime }}</text
                  >&nbsp;
                  <text
                    style="margin-right: 10rpx"
                    v-if="item2.ActivityDuration"
                    >{{ item2.ActivityDuration }}分钟</text
                  >
                  <text style="margin-right: 10rpx">{{ item2.TripTitle }}</text>
                </view>
                <view class="con" v-if="item2.TripContent">
                  <rich-text :nodes="item2.TripContent"></rich-text>
                </view>
                <view
                  class="active-img-box"
                  v-if="item2.TripPicList.length > 0"
                >
                  <view
                    v-for="(item3, index3) in item2.TripPicList"
                    :key="index3"
                  >
                    <view
                      class="img-box"
                      v-if="index3 < 2"
                      @click="previewImage2(index3, item2.TripPicList)"
                    >
                      <image
                        class="active-img"
                        :src="item3"
                        mode="aspectFill"
                      ></image>
                    </view>
                    <view
                      class="img-box img-box2"
                      v-if="index3 == 2"
                      @click="previewImage2(index3, item2.TripPicList)"
                    >
                      <image
                        class="active-img"
                        :src="item3"
                        mode="aspectFill"
                      ></image>
                      <view class="layer" v-if="item2.TripPicList.length > 3">
                        +{{ item2.TripPicList.length - 3 }}
                      </view>
                    </view>
                  </view>
                </view>
                <view class="addr" v-if="item2.LocationName">
                  <image
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/jiaheaddress.png"
                    style="width: 12px; height: 15px; margin-right: 15px"
                  ></image
                  >{{ item2.LocationName }}
                </view>
              </template>
            </view>
          </view>
        </view>
        <view class="title-pic" v-if="detial.Summary">
          活动总结
          <view class="line-bottom"></view>
        </view>
        <view
          class="acdetail_Intro"
          v-html="detial.Summary"
          v-if="detial.Summary"
        ></view>
        <view
          class="title-pic"
          v-if="
            detial.FileGroup[0].groupList.length > 0 ||
            detial.FileGroup[1].groupList.length > 0
          "
        >
          活动相册
          <view class="line-bottom"></view>
        </view>
        <view class="pic-name" v-if="detial.FileGroup[0].groupList.length > 0">
          视频
        </view>
        <view class="video-box">
          <view
            v-for="(item, index) in detial.FileGroup[0].groupList"
            :key="index"
            class="pic-box"
            @click="goPicDetail(item.FileList)"
            v-if="item.FileList.length > 0"
          >
            <image
              class="oneimg"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/videologo.png"
              mode="aspectFill"
            ></image>
            <!-- <image class="oneimg" :src="item.FileList[0].Image" mode="aspectFill" v-if="item.FileList.length<4" ></image> -->
            <!-- <view class="fourimg-box" v-if="item.FileList.length>=4" >
								<div v-for="(_item,_index) in item.FileList" :key="_item.id" class="subpic-box" v-if="_index<=3">
									
									<image class="fourimg" :src="_item.Path" mode="aspectFill"  ></image>
								</div>
							</view> -->
            <view class="item-name">
              {{ item.Name }}
            </view>
            <view class="item-num">
              {{ item.FileList.length }}
            </view>
          </view>
        </view>
        <view class="pic-name" v-if="detial.FileGroup[1].groupList.length > 0">
          图片
        </view>
        <view class="video-box">
          <view
            v-for="(item, index) in detial.FileGroup[1].groupList"
            :key="index"
            class="pic-box"
            @click="goPicDetail(item.FileList)"
            v-if="item.FileList.length > 0"
          >
            <image
              class="oneimg"
              :src="item.FileList[0].Path"
              mode="aspectFill"
              v-if="item.FileList.length < 4"
            ></image>
            <view class="fourimg-box" v-if="item.FileList.length >= 4">
              <div
                v-for="(_item, _index) in item.FileList"
                :key="_index"
                class="subpic-box"
                v-if="_index <= 3"
              >
                <image
                  class="fourimg"
                  :src="_item.Path"
                  mode="aspectFill"
                ></image>
              </div>
            </view>
            <view class="item-name">
              {{ item.Name }}
            </view>
            <view class="item-num">
              {{ item.FileList.length }}
            </view>
          </view>
        </view>
      </view>

      <view class="positionb">
        <view :style="{ color: pricecolor, 'font-size': '40rpx' }">
          <text v-if="detial.IsFree == 1">免费</text>

          <view
            v-if="
              detial.IsFree == 2 && (detial.Price > 0 || detial.PointNum > 0)
            "
            style="display: flex; align-items: center"
          >
            <view style="display: flex; align-items: flex-end">
              <text
                v-if="detial.Price > 0"
                style="font-size: 22rpx; margin-bottom: 6rpx"
                >￥</text
              >
              <text v-if="detial.Price > 0">{{ detial.Price }}</text>
              <text
                v-if="detial.Price > 0"
                style="font-size: 22rpx; margin-bottom: 6rpx"
                >元</text
              >
            </view>
            <text
              v-if="detial.Price > 0 && detial.PointNum > 0"
              style="font-size: 12px; margin: 0 5px"
              >或</text
            >
            <view style="display: flex; align-items: flex-end">
              <text v-if="detial.PointNum > 0">{{ detial.PointNum }}</text>
              <text
                v-if="detial.PointNum > 0"
                style="font-size: 22rpx; margin-bottom: 6rpx"
                >点</text
              >
            </view>
          </view>
        </view>
        <view v-if="detial.IsJoinActivity == 0">
          <view
            class="btnc"
            v-if="detial.IsSignUp == 1 && detial.TotalMan - detial.JoinNum > 0"
            :style="{ background: mainColor }"
            @click="gosignUp()"
            >立即预约</view
          >
          <view
            class="btnc"
            v-if="detial.IsSignUp == 0 || detial.TotalMan - detial.JoinNum == 0"
            >不可预约</view
          >
        </view>
        <view v-if="detial.IsJoinActivity == 1">
          <view class="btnc" v-if="detial.IsSignUp == 1">已报名</view>
        </view>
      </view>
    </view>
    <auth
      v-if="showAuth"
      @changeuserinfo="reloadUserinfo"
      @gbAuth="gbAuth"
    ></auth>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
  nextTick,
} from "vue";
import { getActivityDatail } from "../../api/activity";
export default {
  setup() {
    let data = reactive({
      loading: true,
      pageTitle: "活动详情",
      showAuth: false,
      mainColor: "#00ACF9",
      pricecolor: "",
      Id: 0,
      detial: {},
      richtext: "",
      Up: 0,
      IsShowRollCall: 0, //是否显示点名按钮
    });
    let methods = {
      goPicDetail(arr) {
        uni.navigateTo({
          url:
            "/pages/activity/activityMedia?data=" +
            encodeURIComponent(JSON.stringify({ data: arr })),
        });
      },
      async GetActivityDetial() {
        let res = await getActivityDatail({
          Id: data.Id,
        });
        if (res) {
          this.loading = false;
          data.detial = res.data;
          let tempRichtext = "";
          tempRichtext = data.detial.ActivityInfo.replace(
            /<img[^>]*>/gi,
            function (match, capture) {
              var match = match.replace(
                /style=\"(.*)\"/gi,
                'style="width:100% !important"'
              );
              return match;
            }
          );
          data.richtext = tempRichtext;
        }
      },
      goopenlocation(x) {
        uni.openLocation({
          address: x.LocationName,
          latitude: Number(x.LonLat.split(",")[0]),
          longitude: Number(x.LonLat.split(",")[1]),
          success: function () {
            console.log("success");
          },
          fail: function (err) {
            console.log(err);
          },
        });
      },
      gosignUp() {
        let dataList = encodeURIComponent(JSON.stringify(this.detial));
        uni.navigateTo({
          url: "/pages/activity/activitySignUp?details=" + dataList,
        });
      },
      previewImage(x) {
        uni.previewImage({
          urls: [x],
          current: 0,
        });
      },
      previewImage2(i, arr) {
        uni.previewImage({
          urls: arr,
          current: i,
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {},
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      },
    };
    onMounted(() => {});
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onShareTimeline() {
    return {
      title: "",
      query: "",
      imageUrl: "",
    };
  },
  onShareAppMessage(res) {
    return {
      title: this.detial.ActivityName ? this.detial.ActivityName : "活动详情",
      path: "",
      imageUrl: this.detial.CoverImg ? this.detial.CoverImg : "",
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    if (options && options.Id) {
      this.Id = options.Id;
    }
    this.GetActivityDetial();
  },
};
</script>


