<template>
  <view class="jz_LineDetail" v-if="dataList.title">
    <scroll-view
      scroll-y="true"
      style="height: 1px; flex: 1; box-sizing: border-box"
      @scroll="scroll"
    >
      <view class="jz_TopImg">
        <view class="media" :style="{ opacity: 100 - boxOption + '%' }">
          <u-swiper
            :list="dataList.tempImgCover"
            :effect3d="false"
            :height="535"
            :interval="5000"
            :border-radius="0"
            name="Url"
          ></u-swiper>
          <view class="media-info">
            <view style="display: flex; align-items: center">
              <view class="mi-left">
                <view
                  v-if="dataList.tempImgCover.length > 0"
                  class="type-img-box"
                  @click="openPicture"
                >
                  <image
                    :src="dataList.tempImgCover[0].Url"
                    mode="aspectFill"
                  ></image>
                  <view class="content">
                    <text>{{ dataList.tempImgCover.length }}</text>
                  </view>
                </view>
              </view>
              <view class="mi-right">
                <view style="color: #fff; margin-bottom: 6rpx; font-size: 22rpx"
                  >团队编号：{{ delMsg.tcnum }}</view
                >
                <view style="color: #fff; font-size: 22rpx"
                  >{{ dataList.startCityName }}集合出发 · 精品线路</view
                >
              </view>
            </view>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view
            @click="goback"
            :style="[titleStyle, { opacity: '100% !important' }]"
            style="position: fixed; top: 0; left: 0; padding-left: 6rpx"
          >
            <u-icon
              name="arrow-left"
              size="44"
              color="#FFF"
              style="margin-top: 22rpx"
            ></u-icon>
          </view>
          <!-- #endif -->
        </view>
        <view class="top-title" :style="[titleStyle]">
          <view @click="goback">
            <!-- #ifdef MP-WEIXIN -->
            <u-icon name="arrow-left" size="44"></u-icon>
            <!-- #endif -->
          </view>
          <view
            style="
              margin-left: 30rpx;
              text-align: left;
              width: 60vw;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
            class="name-ali"
            >{{ dataList.title }}</view
          >
        </view>
      </view>
      <view class="jz_TopPrice">
        <view class="jz_LineTitle">
          <text class="jz_renmin">¥</text
          ><text class="jz_B2bPrice">{{
            $utils.getretailer() == true
              ? currentPrice.b2BPrice
              : currentPrice.b2CPrice
          }}</text>
          <text style="color: #999999; font-size: 24rpx; font-weight: 400">
            /人起</text
          >
          <text
            style="
              color: #999999;
              font-size: 24rpx;
              font-weight: 400;
              margin-left: 30rpx;
            "
            >2728人出游</text
          >
        </view>
        <!-- <view class="jz_OrderNow" @click="downloadFile">下载</view>
		 <view class="jz_OrderNow" @click="downloadFile2">下载2</view> -->
        <view class="jz_MainTitle">
          <text v-if="dataList.title">{{ dataList.title }}</text>
        </view>
        <view class="jz_Maidian" v-text="dataList.productRecommend"> </view>
      </view>
      <view class="jz_Service">
        <view class="jz_Serflex">
          <view class="jz_Stitle">保障</view>
          <view style="color: #111111; display: flex; align-items: center">
            <img
              style="width: 16px; height: 14px"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png"
              alt=""
            />
            <view style="margin-left: 5px"
              >更改则赔付·承诺不加价·取消则赔付</view
            >
          </view>
        </view>
        <view class="jz_Serflex" style="margin-top: 40rpx">
          <view class="jz_Stitle">服务</view>
          <view style="color: #111111; display: flex; align-items: center">
            <img
              style="width: 15px; height: 15px"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dagou.png"
              alt=""
            />
            <view style="margin-left: 5px">成团保障</view>
          </view>
        </view>
      </view>
      <view class="jz_TripDays">
        <view style="margin-bottom: 40px">
          <span style="display: inline-block; position: relative">
            <text
              style="
                position: relative;
                z-index: 2;
                color: #1f1f1f;
                font-size: 36rpx;
                font-weight: bold;
              "
            >
              <text v-if="dataList.startCityName">{{
                dataList.startCityName
              }}</text
              >出发
            </text>
            <span
              style="
                width: 40px;
                background-color: #dfbe6e;
                height: 6px;
                bottom: 2px;
                left: 0;
                right: 0;
                position: absolute;
                z-index: 1;
              "
            ></span>
          </span>
        </view>
        <view style="display: flex; overflow-x: auto">
          <template v-for="(item, pindex) in dataList.priceList">
            <view
              class="jz_StartList"
              v-if="pindex < 3"
              :class="{ active: delMsg.tcid == item.tcid }"
              @click="getDayInfo(item)"
              :key="pindex"
            >
              <view class="jz_StartTop">{{ getMonth(item.startDate) }} </view>
              <view class="jz_StartHoubu" v-if="item.remainNum > 0">
                <text>余</text>
                <text style="font-size: 28rpx; font-weight: 600">{{
                  item.remainNum
                }}</text>
              </view>
              <view
                v-if="item.remainNum > 0"
                style="color: #ff3166; font-size: 26rpx"
                >￥{{
                  $utils.getretailer() == true ? item.b2BPrice : item.b2CPrice
                }}</view
              >
              <view v-if="item.remainNum == 0" style="padding: 20rpx 0">
                <text style="font-size: 32rpx; font-weight: 600">已售罄</text>
              </view>
            </view>
          </template>
          <view
            class="jz_StartList"
            v-if="dataList.priceList.length > 3"
            :class="{ active: delMsg.tcid == customerDate.tcid }"
            @click="openDate"
          >
            <view class="jz_StartTop" v-if="customerDate.startDate"
              >{{
                customerDate.startDate ? getMonth(customerDate.startDate) : ""
              }}
            </view>
            <view class="jz_StartHoubu" v-if="customerDate.remainNum">
              <text>余</text>
              <text style="font-size: 28rpx; font-weight: 600">{{
                customerDate.remainNum
              }}</text>
            </view>
            <view
              style="color: #ff3166; font-size: 26rpx"
              v-if="customerDate.b2BPrice"
              >￥{{ customerDate.b2BPrice }}</view
            >
            <view
              v-if="!customerDate.startDate"
              style="
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <view style="font-size: 24rpx; color: #999999"
                >更多<br />班期</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="jz_TripDays">
        <span style="display: inline-block; position: relative">
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >摘要</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>住宿 </view>
        <view class="jz_ZhaiInner"> {{ dataList.nightNum }}晚酒店 </view>
        <template
          v-if="
            dataList.feature &&
            dataList.feature.shopRemarkText != null &&
            dataList.feature.shopRemarkText != ''
          "
        >
          <view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>购物 </view>
          <view class="jz_ZhaiInner">
            {{ dataList.feature.shopRemarkText }}
          </view>
        </template>
        <template v-else>
          <view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>购物 </view>
          <view class="jz_ZhaiInner"> 纯玩儿，无购物 </view>
        </template>
        <view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>景点 </view>
        <view class="jz_ZhaiInner"> {{ dataList.ticketCount }}个人气景点 </view>
        <view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>餐食 </view>
        <view class="jz_ZhaiInner">
          含{{ dataList.breakfastCount }}早餐
          <text style="margin: 0 20px">{{ dataList.lunchCount }}午餐</text>
          {{ dataList.dinnerCount }}晚餐
        </view>
        <view class="jz_Zhankai" style="display: none">展开全部</view>
      </view>
      <view class="jz_TripDays">
        <span
          style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          "
        >
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >往返交通</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_TripMain">
          <view>
            <view
              class="jz_Flight"
              v-for="(fItem, fIndex) in dataList.currentPriceInfo.priceFlight"
              :key="fIndex"
            >
              <view class="jz_FlightItem">
                <view style="width: 150rpx">
                  <view class="jz_FlightTitle">{{
                    fItem.departureAirPortName
                  }}</view>
                  <view class="jz_FlightBottom">{{ fItem.departureTime }}</view>
                </view>
                <view class="jz_FlightIcon">
                  <view
                    style="display: flex; align-items: center; font-size: 24rpx"
                  >
                    <img
                      v-if="fItem.trafficType == 1"
                      style="width: 30rpx; height: 30rpx"
                      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/airfly.png"
                      alt=""
                    />
                    <img
                      v-if="fItem.trafficType == 2"
                      style="width: 30rpx; height: 30rpx"
                      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/train.png"
                      alt=""
                    />
                    <view style="margin-left: 10rpx">{{
                      fItem.flightNumber
                    }}</view>
                  </view>
                  <view class="jz_Arrow">
                    <img
                      style="width: 110rpx; height: 8rpx"
                      src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/b_arrow.png"
                    />
                  </view>
                  <view class="jz_StartDate">
                    {{ getFlightDay(fItem.startDate) }}
                  </view>
                </view>
                <view style="width: 150rpx">
                  <view class="jz_FlightTitle">{{
                    fItem.arrivalAirPortName
                  }}</view>
                  <view class="jz_FlightBottom">{{ fItem.arrivalTime }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="jz_TripDays">
        <span
          style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          "
        >
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >行程特色</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_TripMain">
          <image
            v-for="x in dataList.feature.tripImageList"
            :src="x"
            mode="widthFix"
            style="width: 100%"
          ></image>
        </view>
      </view>
      <view class="jz_TripDays">
        <span
          style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          "
        >
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >行程概要</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_TripMain">
          <view class="jz_TripLine"></view>
          <view v-for="(item, index) in dataList.dayList" :key="index">
            <view class="jz_TripTitle">
              <view class="jz_TripLeft">第{{ getDays(index + 1) }}天</view>
              <view class="jz_TripRight"></view>
            </view>
            <view class="jz_RightInner">
              <view
                v-for="(subItem, SubIndex) in item.dayArray"
                v-if="subItem.type == 7"
                :key="SubIndex"
              >
                <view class="jz_Place">
                  <view class="jz_ComDian"></view>
                  <text>{{ subItem.childItem.title }}</text>
                </view>
              </view>
              <template
                v-for="(subItem, index2) in item.dayArray"
                v-if="subItem.type == 2"
              >
                <view class="jz_ImgDiv" :key="index2">
                  <img
                    mode="aspectFill"
                    :src="subItem.childItem.imaArray[0].url"
                    alt=""
                  />
                </view>
                <view class="jz_Place" style="align-items: center">
                  <view class="jz_ComDian"></view>
                  <text class="jz_Canyin">景点</text>
                  <text class="jz_CanInner">
                    <template
                      v-if="subItem.childItem && subItem.childItem.couponsName"
                    >
                      {{ subItem.childItem.couponsName }}
                    </template>
                    <text class="jz_Fenzhong">
                      <template
                        v-if="
                          subItem.childItem.playTimeHour ||
                          subItem.childItem.playTimeMinutes
                        "
                        >约</template
                      >
                      <template v-if="subItem.childItem.playTimeHour"
                        >{{ subItem.childItem.playTimeHour }}小时</template
                      >
                      <template v-if="subItem.childItem.playTimeMinutes"
                        >{{ subItem.childItem.playTimeMinutes }}分钟</template
                      >
                    </text>
                  </text>
                </view>
                <view class="jz_Jinddian">
                  {{ subItem.childItem.descriptionText }}
                </view>
              </template>
              <view class="jz_Place">温馨提示</view>
              <view class="jz_Rermark">
                <template
                  v-for="(subItem, sIndex) in item.dayArray"
                  v-if="subItem.type == 6"
                >
                  <text :key="sIndex">{{
                    subItem.childItem.descriptionText
                  }}</text>
                </template>
              </view>
              <view class="jz_Place">
                <view class="jz_ComDian"></view>
                <text class="jz_Canyin">餐饮</text>
                <text class="jz_CanInner">
                  <template
                    v-for="(subItem, sIndex2) in item.dayArray"
                    v-if="subItem.type == 4"
                  >
                    <text
                      style="margin-right: 20px"
                      :key="sIndex2"
                      v-if="subItem.childItem.useDinnerType == '1'"
                      >早餐：{{ subItem.childItem.dinnerName }}</text
                    >
                    <text
                      style="margin-right: 20px"
                      v-if="subItem.childItem.useDinnerType == '2'"
                      >午餐：{{ subItem.childItem.dinnerName }}</text
                    >
                    <text v-if="subItem.childItem.useDinnerType == '3'">晚餐：{{
                      subItem.childItem.dinnerName
                    }}</text>
                  </template>
                </text>
              </view>
              <view class="jz_Place">
                <view class="jz_ComDian"></view>
                <text class="jz_Canyin">酒店</text>
                <text class="jz_CanInner">
                  <template
                    v-for="(subItem, sIndex3) in item.dayArray"
                    v-if="subItem.type == 3"
                  >
                    <text :key="sIndex3"
                      >{{ subItem.childItem.hotelName
                      }}<text
                        v-if="index != dataList.dayList.length - 1"
                        style="margin: 0 5px"
                        >/</text
                      ></text
                    >
                  </template>
                  <text v-if="index != dataList.dayList.length - 1"
                    >或同级</text
                  >
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="jz_TripDays">
        <span
          style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          "
        >
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >费用包含</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_TripMain">
          <rich-text :nodes="dataList.feature.feeInclude"></rich-text>
        </view>
      </view>
      <view class="jz_TripDays">
        <span
          style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          "
        >
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >费用不含</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_TripMain">
          <rich-text :nodes="dataList.feature.feeNonInclude"></rich-text>
        </view>
      </view>
      <view class="jz_TripDays">
        <span
          style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          "
        >
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >预定须知</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_TripMain">
          <rich-text :nodes="dataList.feature.importantTip"></rich-text>
        </view>
      </view>
      <view class="jz_TripDays">
        <span
          style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          "
        >
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >温馨提示</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_TripMain">
          <rich-text :nodes="dataList.feature.warmTip"></rich-text>
        </view>
      </view>
      <view class="jz_TripDays">
        <span
          style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          "
        >
          <text
            style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            "
            >证照说明</text
          >
          <span
            style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "
          ></span>
        </span>
        <view class="jz_TripMain">
          <rich-text :nodes="dataList.feature.visaRemark"></rich-text>
        </view>
      </view>
      <!-- <view class="jz_TripDays" style="width:100%;height:50rpx;background-color: transparent;">
			</view> -->

      <u-popup
        v-model="showDateChosen"
        mode="bottom"
        border-radius="20"
        length="90%"
        :safe-area-inset-bottom="true"
      >
        <canlendar
          @finish="chosenDateResult"
          :defaultDate="currentPrice.startDate"
          :priceList="dataList.priceList"
        ></canlendar>
      </u-popup>
      <u-popup
        v-model="showOrderPreviwe"
        mode="bottom"
        border-radius="20"
        length="90%"
        :safe-area-inset-bottom="true"
      >
        <view
          style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
          "
        >
          <view style="flex: 1; width: 100%; height: 1rpx">
            <canlendar
              @finish="chosenDateResult"
              :immediately="true"
              :defaultDate="currentPrice.startDate"
              :priceList="dataList.priceList"
              title="确定日期和人数"
            ></canlendar>
          </view>
          <view style="background: #ecf1f4; padding: 20rpx 0">
            <view class="line-flex" style="padding: 30rpx; background: #fff">
              <text style="font-size: 28rpx; color: #111; font-weight: 500"
                >成人</text
              >
              <text
                style="
                  font-size: 22rpx;
                  color: #999;
                  margin-left: 30rpx;
                  flex: 1;
                "
                >18周岁以上</text
              >
              <u-number-box
                size="28"
                :min="1"
                :max="currentPrice.remainNum - etCount - etbCount"
                @change="crChange"
                v-model="crCount"
              ></u-number-box>
            </view>
            <view class="line-flex" style="padding: 30rpx; background: #fff">
              <text style="font-size: 28rpx; color: #111; font-weight: 500"
                >儿童(占床)</text
              >
              <text
                style="
                  font-size: 22rpx;
                  color: #999;
                  margin-left: 30rpx;
                  flex: 1;
                "
                >2-18周岁(不含)</text
              >
              <u-number-box
                size="28"
                :min="0"
                :max="currentPrice.remainNum - crCount - etbCount"
                @change="etChange"
                v-model="etCount"
              ></u-number-box>
            </view>
            <view class="line-flex" style="padding: 30rpx; background: #fff">
              <text style="font-size: 28rpx; color: #111; font-weight: 500"
                >儿童(不占床)</text
              >
              <text
                style="
                  font-size: 22rpx;
                  color: #999;
                  margin-left: 30rpx;
                  flex: 1;
                "
                >2-18周岁(不含)</text
              >
              <u-number-box
                size="28"
                :min="0"
                :max="currentPrice.remainNum - crCount - etCount"
                @change="etbChange"
                v-model="etbCount"
              ></u-number-box>
            </view>
            <view class="line-flex" style="padding: 30rpx; background: #fff">
              <text style="font-size: 28rpx; color: #111; font-weight: 500"
                >婴儿</text
              >
              <text
                style="
                  font-size: 22rpx;
                  color: #999;
                  margin-left: 30rpx;
                  flex: 1;
                "
                >0-2周岁(不含)</text
              >
              <u-number-box
                size="28"
                @change="yeChange"
                :min="0"
                :max="crCount"
                v-model="yeCount"
              ></u-number-box>
            </view>
          </view>
          <view
            class="jz_OrderDiv"
            style="box-shadow: none; width: 100%; padding: 20rpx"
          >
            <view>
              <text style="font-size: 24rpx; color: #111; font-weight: 500"
                >{{ currentPrice.startDate }} 出发 余位：{{
                  currentPrice.remainNum
                }}</text
              >
            </view>
            <view style="display: flex; align-items: center">
              <button open-type="contact" class="jz_ConButton">
                <img
                  style="width: 36rpx; height: 38rpx"
                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png"
                  alt=""
                />
                <view style="color: #111111; font-size: 22rpx">客服</view>
              </button>
              <view class="jz_OrderNow" @click="goReserce()">立即预定</view>
            </view>
          </view>
        </view>
      </u-popup>
    </scroll-view>
    <view class="jz_orderbox" v-if="!showOrderPreviwe && !showDateChosen">
      <view class="jz_OrderDiv">
        <view style="color: #ff3166; font-weight: bold">
          <text style="font-size: 22rpx">¥</text>
          <text style="font-size: 40rpx"
            >{{ $utils.getretailer() == true
            <!-- b2b -->
            ? currentPrice.b2CPrice : currentPrice.b2CPrice }}</text
          >
          <text style="font-size: 22rpx">/起</text>
        </view>
        <view style="display: flex; align-items: center">
          <button open-type="contact" class="jz_ConButton">
            <img
              style="width: 36rpx; height: 38rpx"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png"
              alt=""
            />
            <view style="color: #111111; font-size: 22rpx">客服</view>
          </button>
          <view
            class="jz_OrderNow"
            @click="openOrderPreview"
            :class="{ disable: finishFirstLoad && !canCreateOrder }"
            >{{
              finishFirstLoad && !canCreateOrder ? "已售罄" : "立即预定"
            }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import hParse from "@/components/u-parse/parse.vue";
import canlendar from "./components/sign/index.vue";
// #ifdef MP-ALIPAY
import parseHtml from "../../plugin/htmlparse.js";
// #endif
export default {
  components: {
    canlendar,
  },
  data() {
    return {
      pageTitle: "线路详情",
      showDateChosen: false,
      showOrderPreviwe: false,
      crCount: 1,
      etCount: 0,
      yeCount: 0,
      etbCount: 0,
      msg: {
        pageIndex: 1,
        pageSize: 15,
      },
      dataList: {}, //数据
      delMsg: {
        tcid: 0,
        configId: 0,
        tcnum: "",
        cityId: 0,
      },
      scenicNum: 0, // 景点数量
      breakfastNum: 0, //早餐数
      lunchNum: 0, //午餐数
      dinnerNum: 0, //晚餐数
      boxOption: 0,
      titleStyle: {},
      mainColor: "",
      detailContent: "",
      customerDate: {},
      currentPrice: {},
      canCreateOrder: false,
      finishFirstLoad: false,
    };
  },
  created() {},
  onLoad(option) {
    if (option.tcid) {
      this.delMsg.tcid = option.tcid;
    }
    if (option.configId) {
      this.delMsg.configId = option.configId;
    }
    if (option.cityId) {
      this.delMsg.cityId = option.cityId;
    }
    this.getDetails();
    let that = this;
    uni.getSystemInfo({
      success(res) {
        that.titleStyle = {
          height: "45px",
          paddingTop: `${res.statusBarHeight}px`,
          opacity: 0,
        };
      },
    });
    this.mainColor = this.$uiConfig.mainColor;
  },
  methods: {
    downloadFile() {
      let msg = {
        configId: "7274",
        cityId: "0",
        tcid: "11409",
        orderId: "0",
        FileName: "2021-10-11飞猪平台九寨沟3天2晚3日游",
        isShowBase: 1,
        isShowFlight: 1,
        isShowFeature: 1,
        isShowFee: 1,
        isShowShop: 1,
        isShowTip: 1,
        isShowB2B: 1,
        isShowTrip: 1,
        isShowTitle: 0,
        isShowGuest: 0,
        isShowMan: 1,
        isShowTCNUM: 1,
        isShowTripImage: 1,
        isShowVisa: 1,
        isShowVideoImg: 1,
        isPc: 2,
        templateId: 3,
        UId: 615,
      };
      this.apipostDownload("GetWebHtmlTwo_V2", msg, (res) => {
        console.log(res);
        let url = "https://reborn.oytour.com" + res.data;
        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              console.log("下载成功");
            }
          },
        });
      });
    },
    downloadFile2() {
      let url =
        "https://reborn.oytour.com/Upload/Temporary/C7274_T11409_CTY0_OD0_MMDD637695432017412893_1_1.pdf";
      uni.downloadFile({
        url: url,
        success: (res) => {
          console.log("suc", res);
          if (res.statusCode === 200) {
            console.log("下载成功");
            const tempFilePath = res.tempFilePath; //返回的文件临时地址，用于后面打开本地预览所用
            wx.openDocument({
              filePath: tempFilePath,
              showMenu: true,
              fileType: "pdf",
              success: function (res) {},
            });
          }
        },
        fail(err) {
          console.log("err", err);
        },
      });
    },
    openOrderPreview() {
      if (this.canCreateOrder && this.finishFirstLoad) {
        this.showOrderPreviwe = true;
      }
    },
    chosenDateResult(result) {
      let price = this.dataList.priceList[result.priceObj];
      this.currentPrice = price;
      if (
        this.crCount + this.etCount + this.etbCount >=
        this.currentPrice.remainNum
      ) {
        this.crCount = 1;
        this.etCount = 0;
        this.etbCount = 0;
      }
      this.delMsg.tcid = price.tcid;
      this.delMsg.configId = price.configID;
      if (!this.showOrderPreviwe) {
        this.getDetails();
      }
      if (result.priceObj > 2) {
        this.customerDate = price;
      }
      this.showDateChosen = false;
    },
    crChange(e) {
      this.crCount = e.value;
    },
    etChange(e) {
      this.etCount = e.value;
    },
    etbChange(e) {
      this.etbCount = e.value;
    },
    yeChange(e) {
      this.yeCount = e.value;
    },
    openPicture() {
      let imgObj = this.dataList.imgCover;
      uni.navigateTo({
        url:
          "/pages/hotel/picture?imgObj=" +
          encodeURIComponent(imgObj) +
          "&isLine=1",
      });
    },
    goback() {
      uni.navigateBack({
        delta: 1,
      });
    },
    scroll(e) {
      this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
      this.titleStyle.opacity =
        e.detail.scrollTop - 100 < 0
          ? 0
          : Math.floor(e.detail.scrollTop - 100) / 100 > 1
          ? 1
          : Math.floor(e.detail.scrollTop - 100) / 100;
      this.$forceUpdate();
    },
    //获取详情
    getDetails() {
      this.apipost(
        "b2b_get_GetB2BTravelInfoNoDesV1",
        this.delMsg,
        (res) => {
          if (res.resultCode == 1) {
            res.data.tempImgCover = JSON.parse(res.data.imgCover);
            // let tempPrice= res.data.priceList.filter(x=>x.remainNum>0)
            // res.data.priceList=tempPrice
            this.dataList = res.data;
            this.scenicNum = 0;
            this.dataList.dayList.forEach((x) => {
              x.dayArray.forEach((y) => {
                if (y.type == 2) {
                  this.scenicNum++;
                }
                if (y.type == 4 && y.childItem.useDinnerType == 1) {
                  this.breakfastNum++;
                }
                if (y.type == 4 && y.childItem.useDinnerType == 2) {
                  this.lunchNum++;
                }
                if (y.type == 4 && y.childItem.useDinnerType == 3) {
                  this.dinnerNum++;
                }
              });
            });
            this.currentPrice = this.dataList.currentPriceInfo;
            if (this.currentPrice.remainNum == 0) {
              let temp = this.dataList.priceList.find((x) => x.remainNum > 0);
              if (temp) {
                this.getDayInfo(temp);
              }
            }
            this.dataList.priceList.forEach((x) => {
              if (x.tcid == this.delMsg.tcid) {
                this.delMsg.tcnum = x.tcnum;
              }
              if (x.remainNum > 0) {
                this.canCreateOrder = true;
              }
            });
            this.finishFirstLoad = true;

            // #ifdef MP-ALIPAY
            if (this.dataList.feature.feeInclude) {
              this.dataList.feature.feeInclude = parseHtml(
                this.dataList.feature.feeInclude
              );
            }
            if (this.dataList.feature.feeNonInclude) {
              this.dataList.feature.feeNonInclude = parseHtml(
                this.dataList.feature.feeNonInclude
              );
            }
            if (this.dataList.feature.importantTip) {
              this.dataList.feature.importantTip = parseHtml(
                this.dataList.feature.importantTip
              );
            }
            if (this.dataList.feature.warmTip) {
              this.dataList.feature.warmTip = parseHtml(
                this.dataList.feature.warmTip
              );
            }
            if (this.dataList.feature.visaRemark) {
              this.dataList.feature.visaRemark = parseHtml(
                this.dataList.feature.visaRemark
              );
            }
            // #endif
          } else {
          }
        },
        null
      );
    },
    //转换图片格式
    getCoverImg(imgCover) {
      if (imgCover) {
        return JSON.parse(imgCover);
      }
    },
    //返回天数
    getDays(day) {
      if (day < 10) {
        return "0" + day;
      } else {
        return day;
      }
    },
    //返回月 日
    getMonth(day) {
      if (day) {
        let Myday = day.split("-");
        return Myday[1] + "-" + Myday[2];
      }
    },
    getFlightDay(day) {
      if (day) {
        let Myday = day.split("-");
        return Myday[1] + "月" + Myday[2] + "日";
      }
    },
    //点击切换
    getDayInfo(item) {
      if (item.remainNum > 0) {
        if (
          this.crCount + this.etCount + this.etbCount >=
          this.currentPrice.remainNum
        ) {
          this.crCount = 1;
          this.etCount = 0;
          this.etbCount = 0;
        }
        this.delMsg.tcid = item.tcid;
        this.delMsg.configId = item.configID;
        this.currentPrice = item;
        this.getDetails();
      } else {
        uni.showToast({
          title: "该团期已售罄",
          icon: "none",
        });
      }
    },
    openDate() {
      if (this.customerDate.tcid) {
        if (this.customerDate.tcid == this.delMsg.tcid) {
          this.showDateChosen = true;
        } else {
          this.delMsg.tcid = this.customerDate.tcid;
          this.delMsg.configId = this.customerDate.configID;
          this.getDetails();
        }
      } else {
        this.showDateChosen = true;
      }
    },
    //立即预定
    goReserce() {
      let myCurrentInfo = this.currentPrice;
      myCurrentInfo.startCityName = this.dataList.startCityName;
      let imgCover = JSON.parse(this.dataList.imgCover);
      if (imgCover.length > 0) {
        myCurrentInfo.CoverImg = imgCover[0].Url;
      }
      let myCurr = JSON.stringify(myCurrentInfo);
      console.log(myCurrentInfo, "myCurrentInfo");
      let ren = {
        crCount: this.crCount,
        etCount: this.etCount,
        yeCount: this.yeCount,
        etbCount: this.etbCount,
      };
      uni.navigateTo({
        url:
          "/pages/jiuzhai/jz_Reserve?currentPriceInfo=" +
          encodeURIComponent(myCurr) +
          "&ln=" +
          this.dataList.ltName +
          "&seat=" +
          encodeURIComponent(JSON.stringify(ren)) +
          "&tips=" +
          encodeURIComponent(this.dataList.feature.importantTipText),
      });
    },

    // #ifdef MP-WEIXIN
    //分享朋友圈
    onShareTimeline() {
      let uid = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserId
        : 0;
      if (uid == 0) {
        uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
      }
      let SmallShopId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").SmallShopId
        : 0;
      if (SmallShopId == 0) {
        //如果微店id为0 去找所属微店id
        SmallShopId = uni.getStorageSync("mall_UserInfo")
          ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
          : 0;
      }
      let title = this.dataList.title ? this.dataList.title : "帖子";
      let imageUrl =
        this.dataList.tempImgCover && this.dataList.tempImgCover.length > 0
          ? this.dataList.tempImgCover[0]
          : "";
      return {
        title: title,
        query:
          "tcid=" +
          this.delMsg.tcid +
          "&user_id=" +
          uid +
          "&SmallShopId=" +
          SmallShopId +
          "&Up=" +
          this.Up +
          "&JumpType=19" +
          "&configId=" +
          this.delMsg.configId +
          "&cityId=" +
          this.delMsg.cityId,
        imageUrl: imageUrl,
      };
    },

    //分享给朋友
    onShareAppMessage(res) {
      let u = uni.getStorageSync("mall_UserInfo");
      let uid = u.UserId ? u.UserId : 0;
      if (uid == 0) {
        uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
      }
      let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
      if (SmallShopId == 0) {
        //如果微店id为0 去找所属微店id
        SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
      }
      return {
        title: this.dataList.title ? this.dataList.title : "帖子",
        path:
          "/pages/index/index?tcid=" +
          this.delMsg.tcid +
          "&user_id=" +
          uid +
          "&SmallShopId=" +
          SmallShopId +
          "&Up=" +
          this.Up +
          "&JumpType=19" +
          "&configId=" +
          this.delMsg.configId +
          "&cityId=" +
          this.delMsg.cityId,
        imageUrl:
          this.dataList.tempImgCover && this.dataList.tempImgCover.length > 0
            ? this.dataList.tempImgCover[0]
            : "",
      };
    },
    // #endif
  },
};
</script>
<style>
.jz_FlightItem {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: auto;
  margin-bottom: 45rpx;
}

.jz_FlightTitle {
  color: #999999;
  font-size: 24rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.jz_Arrow {
  position: absolute;
  top: 17rpx;
}

.jz_StartDate {
  color: #999999;
  font-size: 24rpx;
  margin-top: 25rpx;
}

.jz_FlightBottom {
  color: #111111;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.jz_FlightIcon {
  text-align: center;
  position: relative;
  flex-shrink: 0;
}

.jz_LineDetail {
  background-color: #ecf1f4;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.jz_LineDetail rich-text {
  font-size: 26rpx;
  font-weight: 500;
}

.line-flex {
  display: flex;
  align-items: center;
}

.jz_TopImg {
  width: 100%;
  height: 535rpx;
}

.jz_TopImg .top-title {
  line-height: 45px !important;
  font-size: 16px;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  color: #111;
  box-sizing: content-box;
  z-index: 5;
  display: flex;
  align-items: center;
  background-color: #f6f6f6;
  padding-left: 6rpx;
}

.jz_TopImg .media {
  height: 535rpx;
  position: relative;
  z-index: 1;
}

.jz_TopImg .media .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -49rpx;
  margin-left: -49rpx;
  width: 98rpx;
  height: 98rpx;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jz_TopImg .media .video-box {
  background-color: #111;
  height: 535rpx;
  position: relative;
}

.jz_TopImg .media .type-box {
  width: 100px;
  height: 50rpx;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50rpx;
  left: 50%;
  bottom: 80px;
  margin-left: -50px;
}

.jz_TopImg .media .media-info .type-img-box {
  background-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  height: 96rpx;
  width: 96rpx;
  padding: 8rpx;
  border-radius: 12rpx;
  position: relative;
}

.jz_TopImg .media .media-info .type-img-box image {
  height: 80rpx;
  width: 80rpx;
  border-radius: 12rpx;
  opacity: 0.5;
}

.jz_TopImg .media .media-info .type-img-box .content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-size: 20rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

.jz_TopImg .media .media-info .type-img-box text {
  font-size: 22rpx;
  font-family: pingfang;
  margin-left: 6rpx;
}

.jz_TopImg .media .media-info {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.35);
  top: 287rpx;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx 50rpx;
}

.jz_TopImg .media .media-info .mi-left {
  flex: 1;
}

.jz_TopPrice {
  width: 100%;
  height: auto;
  background-color: #fff;
  position: relative;
  margin-top: -110rpx;
  border-radius: 60rpx 60rpx 0px 0px;
  padding: 45rpx;
  z-index: 2;
}

.jz_LineTitle {
  font-size: 25rpx;
  color: #ff3166;
  margin-bottom: 10px;
}

.jz_MainTitle {
  color: #111111;
  font-size: 36rpx;
  font-weight: 600;
}

.jz_Maidian {
  color: #999999;
  font-size: 24rpx;
  margin-top: 22rpx;
}

.jz_Price {
  font-size: 30rpx;
  color: #ff3166;
}

.jz_Price_Title {
  color: #000000;
  margin: 10px 0;
  font-weight: bold;
}

.jz_Price_Hui {
  color: #9cf;
  margin-left: 8px;
}

.jz_flex {
  display: flex;
  justify-content: space-between;
}

.jz_TripDays {
  width: 100%;
  height: auto;
  padding: 45rpx;
  margin-top: 15px;
  background-color: #fff;
}

.trip_JZtype {
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid #257bf1;
  margin-right: 10px;
  color: #257bf1;
  font-size: 13px;
  border-radius: 3px;
}

.jz_StartList {
  height: 150rpx;
  border-radius: 20rpx;
  /* border: 1px solid #E2E2E2; */
  text-align: center;
  display: block;
  width: 70px;
  margin-right: 14px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  background: #ecf1f463;
}

.jz_StartList.active {
  border-color: #111;
  background: rgba(0, 0, 0, 0.07);
}

.jz_StartList.active .jz_StartTop {
  background-color: #000;
  color: #fff;
}

.jz_renmin {
  font-size: 12px;
  font-weight: bold;
}

.jz_B2bPrice {
  font-size: 40rpx;
  font-weight: 800;
}

.jz_Service {
  width: 100%;
  background-color: #fff;
  padding: 30px;
  font-size: 24rpx;
  margin-top: -5px;
}

.jz_Serflex {
  display: flex;
}

.jz_Stitle {
  color: #999999;
  margin-right: 41rpx;
}

.jz_StartTop {
  width: 100%;
  height: 40rpx;
  background-color: #ecf1f4;
  color: #999999;
  text-align: center;
  line-height: 40rpx;
  font-size: 22rpx;
}

.jz_Dian {
  display: inline-block;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #111111;
  margin-right: 23rpx;
  position: relative;
  top: -2px;
}

.jz_ZhaiTitle {
  color: #1f1f1f;
  font-size: 28rpx;
  font-weight: bold;
  margin-top: 40rpx;
}

.jz_ZhaiInner {
  color: #6e6e6e;
  font-size: 24rpx;
  margin: 22rpx 0 0 30rpx;
}

.jz_Zhankai {
  width: 220rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #1f1f1f;
  font-size: 24rpx;
  border-radius: 8rpx;
  border: 1px solid #111111;
  margin: 40rpx auto;
}

.jz_TripMain {
  position: relative;
  overflow: hidden;
}

.jz_TripTitle {
  width: 100%;
  height: 90rpx;
  border-radius: 20rpx;
  background: linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx;
}

.jz_TripLeft {
  font-size: 32rpx;
}

.jz_TripRight {
  color: #111111;
  font-size: 22rpx;
}

.jz_TripLine {
  position: absolute;
  width: 4rpx;
  height: 100%;
  background-color: #111111;
  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: -17.6px;
  top: 4px;
}

.jz_ImgDiv {
  width: 612rpx;
  height: 376rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.jz_ImgDiv img {
  width: 100%;
  height: 100%;
}

.jz_Rermark {
  color: #999999;
  font-size: 23rpx;
  line-height: 20px;
}

.jz_Canyin {
  color: #999999;
  font-size: 23rpx;
  margin-right: 44rpx;
  flex-shrink: 0;
}

.jz_CanInner {
  color: #111111;
  font-size: 26rpx;
}

.jz_ArrowImg {
  width: 25rpx;
  height: 5rpx;
  margin: 0 5px;
  position: relative;
  top: -3px;
}

.jz_Fenzhong {
  color: #999999;
  font-size: 22rpx;
  margin-left: 20rpx;
}

.jz_Jinddian {
  margin: 23rpx 0 31rpx 0;
  color: #999999;
  font-size: 23rpx;
  line-height: 20px;
}

.jz_StartHoubu {
  color: #111;
  font-size: 20rpx;
  font-weight: 500;
  margin: 10rpx 0;
}

.jz_orderbox {
  /* height: 160rpx; */
  /* position: fixed; */
  background-color: #fff;
  /* bottom: 0; */
  /* width: 100vw;
		left: 0; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  box-shadow: 0px 0px 30rpx 0px rgba(36, 36, 36, 0.2);
}

.jz_OrderDiv {
  width: 90%;
  height: 100rpx;
  background-color: #fff;
  margin: auto;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
  border-radius: 16px;
  z-index: 999;
}

.jz_OrderNow {
  width: 190rpx;
  height: 80rpx;
  background-color: #111111;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  font-weight: 600;
  font-size: 28rpx;
  border-radius: 16rpx;
}

.jz_OrderNow.disable {
  background-color: #ecf1f4;
  color: #111;
}

.jz_ConButton {
  background-color: #fff;
  height: 40px;
  line-height: 18px;
  margin-top: 3px;
}

.jz_ConButton::after {
  border: none !important;
  height: auto !important;
}

.jz_Flight {
  display: flex;
  justify-content: space-between;
}
.name-ali {
  /*  #ifdef MP-ALIPAY */
  box-sizing: border-box;
  padding-left: 30rpx;
  /* #endif */
}
</style>
