<template>
  <view class="buy-notice-restaurant">
    <view class="meal-info">
      <image :src="mealData.MealPic" mode="aspectFit" class="MealPic"></image>
      <view class="right">
        <view class="name">{{ mealData.MealName }}</view>
        <view class="sale">已售 {{ mealData.SaleCount }}</view>
      </view>
    </view>
    <view class="ticket-title">
      套餐内容
      <text class="ticket-title-bg"></text>
    </view>
    <view class="meal-con">
      <text v-if="mealData.MealDesc">{{ mealData.MealDesc }}</text>
      <text v-else class="zanwu">暂无</text>
    </view>
    <view class="ticket-title">
      购买须知
      <text class="ticket-title-bg"></text>
    </view>
    <view class="buy-notice-con">
      <rich-text
        :nodes="mealData.OtherTag"
        v-if="mealData.OtherTag"
      ></rich-text>
      <text v-else class="zanwu">暂无</text>
    </view>
    <view class="btn-box">
      <view class="price">
        <text class="price-pre">￥</text>
        {{ $utils.getretailer() == true ? mealData.LPriceB : mealData.LPriceC }}
      </view>
      <view class="btn" @click="subscribe"> 立即预订 </view>
    </view>
  </view>
</template>

<script>
// #ifdef MP-ALIPAY
import parseHtml from "../../../plugin/htmlparse.js";
// #endif
export default {
  props: {
    mealData: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    // #ifdef MP-ALIPAY
    this.mealData.OtherTag = parseHtml(this.mealData.OtherTag);
    // #endif
  },
  methods: {
    subscribe() {
      this.$emit("success");
    },
  },
};
</script>

<style lang="scss" scoped>
.buy-notice-restaurant {
  height: 70vh;
  padding: 45rpx 45rpx 120rpx 45rpx;
  overflow-y: scroll;
  overflow-x: hidden;
  .meal-info {
    display: flex;
    padding-bottom: 50rpx;
    border-bottom: 1rpx solid #e7e7e7;
    .MealPic {
      width: 129rpx;
      height: 129rpx;
      background-color: #dfbe6e;
      border-radius: 20rpx;
    }
    .right {
      flex-grow: 5;
      margin-left: 35rpx;
      .name {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #1b1d1e;
      }
      .sale {
        width: 120rpx;
        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: 38rpx;
        margin-top: 20rpx;
      }
    }
  }
  .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;
    }
  }
  .meal-con {
    white-space: pre-wrap;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #111111;
  }
  .buy-notice-con {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #111111;
  }
  .btn-box {
    position: fixed;
    right: 55rpx;
    bottom: 100rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .price {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #d91818;
      // line-height: 38rpx;
      .price-pre {
        font-size: 22rpx;
      }
    }
    .btn {
      width: 300rpx;
      height: 80rpx;
      background-color: #111111;
      border-radius: 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      line-height: 78rpx;
      margin-left: 45rpx;
    }
  }
}
.zanwu {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>
