<template>
  <li class="" @click="toDetail(p)">
    <div class="box-img">
      <img :src="p.hotel.hotelImg"  alt="">
    </div>
    <slot name="tipSlot"></slot>
    <div class="box-info">
      <p class="b-near textOneLine flex-box">
        <label for="">{{depart}}<i class="iconfont " :class="tripType=='OW_PACKAGE' ? 'icon-icon_jipiaodancheng' : 'icon-xianghujiaohuan'"></i>{{p.hotel.city | strSliceLast}}</label>
        <!--<span v-for="(near,nIndex) in p.nearbyInfo" v-show="nIndex<3">{{near.name}}<font v-show="nIndex<2"> | </font> </span>-->
        <span class="flex text-r"><i class="iconfont icon-xingxing starColor" v-for="i in parseInt(p.hotel.category)"></i></span>
      </p>
      <h3 class="b-title textOneLine">{{p.hotel.hotelName}}</h3>
      <p class="b-date textOneLine">
        <span v-if="tripType=='OW_PACKAGE'">{{p.outFlight.depTime | getMonthDate}} {{p.outFlight.depTime | formatTime}}出发</span>
        <span v-else>{{p.outFlight.depTime | getMonthDate}} 至 {{p.inFlight.depTime | getMonthDate}}</span>
      </p>
      <div class="b-flight" v-if="tripType=='RT_PACKAGE'">
        去程航班{{p.outFlight.depTime | formatTime}}|返程航班{{p.inFlight.depTime | formatTime}}
      </div>
      <p style="margin-bottom: 3px;font-size: 11px;color: #2894f2">
        <em class="iconfont icon-xingzhuang1" style="font-size: 12px"></em>{{adultNum}}人{{tripType=='OW_PACKAGE' ? '去程' : '往返'}}机票及{{p.duration}}晚酒店</p>
      <div class="price-wrap textOneLine" v-if="!discountCoupon">
        <p class="listColor" v-if="showOnePrice">每人低至
          <b class="nowPrice">￥{{Math.ceil(p.price.perPersonAmount)}}</b>
        </p>
        <p class="listColor" v-else>总价
          <b class="nowPrice">￥{{Math.ceil(p.price.amount)}}</b>
        </p>
      </div>
      <div class="price-wrap textOneLine" v-else>
        <p class="listColor">{{p.price.voucherAmount>0 ? '打包专享价(含税)' : '总价'}}</p>
        <b class="nowPrice listColor">￥{{Math.ceil(p.price.amount)}}</b>
        <span class="price-discount" v-if="p.price.voucherAmount>0">已减￥{{Math.ceil(p.price.voucherAmount)}}</span>
          <p class="oldPrice" :class="{opacity:p.price.voucherAmount<=0}">官网价￥<font style="text-decoration: line-through">{{Math.ceil(p.price.originalAmount)}}</font></p>
      </div>
    </div>
  </li>
</template>
<script>
    export default {
        name: '',
        props:{
          p:'',
          depart:'',
          adultNum:'',
          tripType:''
        },
        data () {
            return {
              discountCoupon:discountCoupon,
              showOnePrice:showOnePrice
            }
        },
        methods: {
          toDetail(p){
            this.$emit("toDetail",p)
          }
        },
        mounted(){

        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "home.styl"
</style>
