<template>
  <view class="buyNotice">
    <scroll-view
      scroll-y="true"
      style="width: 100%; height: 100%; padding: 44rpx 0"
      @scroll="scroll"
    >
      <view class="notice-box">
        <view class="base-info">
          <image class="left" :src="coverImg" mode="aspectFill"></image>
          <view class="right">
            <view class="name">
              {{ TicketData.TicketSubName }}({{ TicketData.TicketName }})
            </view>
            <view class="evaluate">
              <u-rate
                size="24rpx"
                inactive-color="#FFF"
                :current="score"
                active-icon="star"
                disabled
                active-color="#F8632F"
              ></u-rate>
              <view class="rate">
                {{ score }}
                <text
                  v-if="
                    score === 1 ||
                    score === 2 ||
                    score === 3 ||
                    score === 4 ||
                    score === 5
                  "
                  >.0</text
                >
              </view>
              <view class="comment">
                {{ TicketData.CommentCount }}人评论
                <u-icon name="arrow-down" color="#6E6E6E" size="24rpx"></u-icon>
              </view>
            </view>
            <view class="sell"> 已售{{ TicketData.SaleCount }}票 </view>
          </view>
        </view>
        <view class="detail-info">
          <view class="ticket-title">
            购买须知
            <text class="ticket-title-bg"></text>
          </view>
          <view class="detail-info-item" v-if="TicketData.SubscribeTime">
            <view class="item-name"> 可订时间 </view>
            <view class="item-desc">
              {{ TicketData.AllTime }}
            </view>
          </view>
          <view class="detail-info-item" v-if="TicketData.OutTicket">
            <view class="item-name"> 出票速度 </view>
            <view class="item-desc">
              {{ TicketData.OutTicket }}
            </view>
          </view>
          <view class="detail-info-item" v-if="TicketData.ChangeTickets">
            <view class="item-name"> 无需换票 </view>
            <view class="item-desc">
              {{ TicketData.ChangeTickets }}
            </view>
          </view>
          <!-- 退票政策 -->
          <view class="method" v-if="TicketData.ReturnPriceList">
            <view class="method-title">
              <image
                class="title-bg"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/tuipiaozhengce-bg.png"
              ></image>
              <view class="title-text">退票政策</view>
            </view>
            <view
              v-for="(item, index) in TicketData.ReturnPriceList"
              :key="index"
              v-if="TicketData.IsWorryFreeRefund === 0"
              class="tuipaio-item"
            >
              <view class="tuipiao-name">{{ item.title }}</view>
              <view class="tuipiao-desc">{{ item.Dec }}</view>
            </view>
            <view
              v-for="(item, index) in TicketData.ConditionPriceList"
              :key="index"
              v-if="TicketData.IsWorryFreeRefund === 1"
              class="tuipaio-item"
            >
              <view class="tuipiao-name">{{ item.title }}</view>
              <view class="tuipiao-desc">{{ item.Dec }}</view>
            </view>
          </view>
          <!-- 使用说明 -->
          <view class="use-desc">
            <view class="ticket-title">
              使用说明
              <text class="ticket-title-bg"></text>
            </view>
            <view
              class="zanwu"
              v-if="
                TicketData.UseInstructionsList.length === 0 ||
                (TicketData.UseInstructionsList[0].title == '' &&
                  TicketData.UseInstructionsList[0].Dec == '')
              "
            >
              暂无
            </view>
            <view
              v-for="(item, index) in TicketData.UseInstructionsList"
              :key="index"
              v-if="TicketData.UseInstructionsList.length > 0"
            >
              <view class="detail-info-item">
                <view class="item2-name" v-if="item.title">
                  {{ item.title }}
                </view>
                <view class="item-desc" v-if="item.Dec">
                  {{ item.Dec }}
                </view>
              </view>
            </view>
          </view>
          <!-- 费用说明 -->
          <view class="cost-desc">
            <view class="ticket-title">
              费用说明
              <text class="ticket-title-bg"></text>
            </view>
            <view
              class="zanwu"
              v-if="
                TicketData.PriceInstructionsList.length === 0 ||
                (TicketData.PriceInstructionsList[0].title == '' &&
                  TicketData.PriceInstructionsList[0].Dec == '')
              "
            >
              暂无
            </view>
            <view
              v-for="(item, index) in TicketData.PriceInstructionsList"
              :key="index"
              v-if="TicketData.PriceInstructionsList.length > 0"
            >
              <view class="detail-info-item">
                <view class="item2-name" v-if="item.title">
                  {{ item.title }}
                </view>
                <view class="item-desc" v-if="item.Dec">
                  {{ item.Dec }}
                </view>
              </view>
            </view>
          </view>
          <!-- 其他信息 -->
          <view class="other-desc" v-if="TicketData.OtherDescList.length > 0">
            <view class="ticket-title">
              其他信息
              <text class="ticket-title-bg"></text>
            </view>
            <view
              class="zanwu"
              v-if="
                TicketData.OtherDescList.length === 0 ||
                (TicketData.OtherDescList[0].title == '' &&
                  TicketData.OtherDescList[0].Dec == '')
              "
            >
              暂无
            </view>
            <view
              v-for="(item, index) in TicketData.OtherDescList"
              :key="index"
              v-if="TicketData.OtherDescList.length > 0"
            >
              <view class="detail-info-item">
                <view class="item2-name" v-if="item.title">
                  {{ item.title }}
                </view>
                <view class="item-desc" v-if="item.Dec">
                  {{ item.Dec }}
                </view>
              </view>
            </view>
          </view>
          <view class="detail-btn">
            <view class="price">
              <text class="price-pre">￥</text>
              {{
                $utils.getretailer() == true
                  ? TicketData.HPriceB
                  : TicketData.HPriceC
              }}
            </view>
            <view class="btn" @click="success"> 立即预订 </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    coverImg: {
      type: String,
      default: "",
    },

    score: {
      type: Number,
      default: 1,
    },

    TicketData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      checkTicketNavIndex: 1,
      imgBaseUrl: "http://192.168.20.214:8130",
    };
  },
  watch: {
    TicketData: {
      handler(val) {
        console.log("购票须知", this.TicketData);
        this.$forceUpdate();
      },
    },
  },
  mounted() {
    console.log(this.TicketData);
  },
  methods: {
    goUrl() {
      uni.navigateTo({
        url: "/pages/ticketCoupons/imgList?id=" + this.ID,
      });
    },

    scroll(e) {},
    goback() {
      uni.navigateBack({
        delta: 1,
      });
    },
    success() {
      this.$emit("success");
    },
  },
};
</script>

<style lang="scss" scoped>
.buyNotice {
  width: 100vw;
  height: 70vh;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  overflow: hidden;
}

.notice-box {
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  padding: 45rpx 45rpx 0 45rpx;
  background-color: #ffffff;
  height: 70vh;
  z-index: 10;

  .base-info {
    // height: 175rpx;
    display: flex;
    padding-bottom: 35rpx;
    border-bottom: 1rpx solid #e7e7e7;

    .left {
      width: 130rpx;
      height: 130rpx;
      border-radius: 20rpx;
    }

    .right {
      margin-left: 50rpx;

      .name {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #1b1d1e;
        margin-bottom: 20rpx;
      }

      .evaluate {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;

        .rate {
          margin: 0 10rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #6e6e6e;
        }

        .comment {
          display: flex;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #6e6e6e;
        }
      }

      .sell {
        width: 150rpx;
        height: 40rpx;
        background-color: #ecf1f4;
        border-radius: 4rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #111111;
        text-align: center;
        line-height: 40rpx;
      }
    }
  }

  .detail-info {
    .ticket-title {
      // width: 70rpx;
      height: 50rpx;
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #1f1f1f;
      background-color: transparent;
      // line-height: 44rpx;
      position: relative;
      margin: 40rpx 0;

      .ticket-title-bg {
        width: 70rpx;
        height: 10rpx;
        background-color: #dfbe6e;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 6rpx;
        z-index: 1;
        opacity: 0.6;
      }
    }

    .detail-info-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20rpx;

      .item-name {
        // width: 120rpx;
        // height: 40rpx;
        padding: 8rpx;
        background-color: #111111;
        border-radius: 4rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #dfbe6e;
        margin-right: 45rpx;
        text-align: center;
        line-height: 38rpx;
        overflow: hidden;
      }
      .item2-name {
        // width: 120rpx;
        // height: 40rpx;
        padding: 8rpx;
        background-color: #ecf1f4;
        border-radius: 4rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #111111;
        margin-right: 45rpx;
        margin-bottom: 20rpx;
        // text-align: center;
        line-height: 38rpx;
        overflow: hidden;
      }

      .item-desc {
        // width: 500rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #111111;
        line-height: 40rpx;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
    }

    .method {
      // width: 660rpx;
      // height: 225rpx;
      background-color: #fcf8f0;
      border-radius: 4rpx;
      position: relative;
      margin-top: 40rpx;
      padding: 60rpx 25rpx 25rpx 25rpx;
      margin-bottom: 50rpx;

      .method-title {
        width: 120rpx;
        height: 60rpx;
        position: absolute;
        top: -20rpx;
        left: 15rpx;
        text-align: center;

        .title-bg {
          width: 120rpx;
          height: 60rpx;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
        }

        .title-text {
          width: 100%;
          text-align: center;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 40rpx;
          color: #fff;
        }
      }
      .tuipaio-item {
        display: flex;
        flex-wrap: wrap;
        padding-left: 25rpx;
        margin-bottom: 25rpx;
        .tuipiao-name {
          // height: 40rpx;
          background-color: #ffffff;
          border: 1rpx solid #dfbe6e;
          border-radius: 4rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #dfbe6e;
          text-align: center;
          margin-right: 25rpx;
          margin-bottom: 25rpx;
          padding: 0 10rpx;
          line-height: 38rpx;
        }

        .tuipiao-desc {
          // height: 40rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #111111;
        }
      }
    }
    .detail-btn {
      height: 80rpx;
      margin: 35rpx 0;
      margin-bottom: 80rpx;
      padding-right: 55rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .price {
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #d91818;
        .price-pre {
          font-size: 22rpx;
        }
      }
      .btn {
        width: 300rpx;
        height: 80rpx;
        background-color: #111111;
        border-radius: 20rpx;
        margin-left: 45rpx;
        text-align: center;
        line-height: 78rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
}
.zanwu {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>
