<template>
    <li  @click="productDetail(h)">
      <div class="hotel-img">
        <img v-lazy="h.image" alt="" width="100%">
      </div>
      <div class="hotel-info" >
        <h3 class="hotel_name">{{h.hotel.hotelName}}</h3>
        <div class="hotel_star">
          <b class="star">
            <i class="iconfont icon-xingxing starColor" v-for="i in parseInt(h.hotel.starRating)"></i>
          </b>
          <span class="address">
              <i class="iconfont icon-coordinates_fill"></i>{{h.hotel.city+h.hotel.area}}
          </span>
        </div>
        <p class="date">
          <i class="iconfont"></i>
          {{h.outFlight.departureDateTime | getMonthDate}}({{h.outFlight.departureDateTime | getWeek}})
          <em v-if="h.type!='OW_PACKAGE'">- {{h.inFlight.departureDateTime|getMonthDate}}({{h.inFlight.departureDateTime |getWeek}})</em>
        </p>
        <div class="des h-label hide"><span v-for="(type,index) in h.globalTypes" v-show="index<3">{{type}}</span></div>
        <p class="h-flight">
          <label for="" class="flight-box">
            <i class="iconfont icon-quchenghangban1 mColor"></i>
            <span>{{h.outFlight.airlineName}}</span>
            <span class="time">{{h.outFlight.departureDateTime | formatTime}}</span>
          </label>
          <label for="" class="flight-box" v-if="h.type!='OW_PACKAGE'">
            <i class="iconfont icon-fanchenghangban1 sColor"></i>
            <span>{{h.inFlight.airlineName}}</span>
            <span class="time">{{h.inFlight.departureDateTime | formatTime}}</span>
          </label>
        </p>
        <p class="h-people listColor">
          <i class="iconfont icon-xingzhuang1"></i>
          <span>{{h.peoples.length}}人{{h.type=='OW_PACKAGE' ? '去程' : '往返'}}机票及{{h.lengthOfStay}}晚酒店</span>
        </p>
        <div class="h-price" v-if="discountCoupon">
          <div v-if="parseInt(h.price.voucherAmount)>0">
            <span><i class="iconfont icon-wenhao price-describe" @click="openPriceDesModal(h)"></i><span class="price-discount">已减￥{{h.price.voucherAmount}}</span></span>
            <span class="nowPrice listColor"><font style="font-size: 12px">打包专享价(含税)</font>￥{{Math.ceil(h.price.amount)}}</span>
            <span class="oldPrice">官网价<i style="text-decoration: line-through;">￥{{Math.ceil(h.price.originalAmount)}}</i></span>
          </div>
          <div v-else>
            <font style="font-size: 13px">总价</font>
            <span class="nowPrice listColor">¥{{Math.ceil(h.price.amount)}}</span>
          </div>
        </div>
        <div class="h-price" v-else>
          <div class="" v-if="showOnePrice">
            <span class="nowPrice listColor">
              <font style="display: block;">每人低至</font>
              ￥{{Math.ceil(h.price.perPersonAmount)}}
            </span>
            <span class="oldPrice listColor">总价￥{{Math.ceil(h.price.amount)}}</span>
          </div>
          <div v-else>
            <font style="font-size: 13px">总价</font>
            <span class="nowPrice listColor">¥{{Math.ceil(h.price.amount)}}</span>
          </div>
        </div>
      </div>
      <span class="h_tip h_package">机+酒</span>
    </li>
</template>
<script>
    export default {
        name: '',
        props:{h:''},
        data () {
            return {
              discountCoupon:discountCoupon,
              showOnePrice:showOnePrice,
            }
        },
        methods: {
          productDetail(h){
              this.$emit("productDetail",h)
          },
          openPriceDesModal(h){
            this.$emit("openPriceDesModal",h);
            window.event.cancelBubble = true;
          },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "./productList.styl"
  li{
    position relative
    width 100%
    height 198px
    margin-bottom 14px
    background #fff
    border-radius 6px
    border-bottom 2px solid border_color
    .hotel-img{
      position relative
      float left
      left 0px
      top 0
      width 110px
      height 100%
      background url("https://file.luckytrip.cn/IBE/img/pic_hotel.jpg") no-repeat center
      background-size cover
      overflow hidden
      img{
        position absolute
        width auto
        min-width 100%
        height 100%
        left: 50%
        transform translateX(-50%)
      }
    }
    .h_tip{
      top 0.75rem
      left -0.35rem
      right auto
    }
    .hotel_name{
      line-height 24px
      margin 0px
      /*margin-bottom 5px*/
      font-weight bold
      font-size 18px
      color mainTitleColor
      text-overflow ellipsis
      overflow hidden
      white-space nowrap
      /*background red*/
    }
    .hotel_star{
      text-overflow ellipsis
      overflow hidden
      white-space nowrap
      .star{
        margin-top 0.29rem
        i{
          font-size 16px
        }
      }
      .address{
        i{
          font-size 12px
        }
        font-size 12px
        color blueColor
      }
    }
    .hotel-info{
      position relative
      width 100%
      height 100%
      top 0
      left 0
      background-size 100% 100%
      box-sizing border-box
      padding 8px 8px 5px 118px
    }
    .des{
      max-height 20px
      margin-top 5px
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      font-size .785rem
      span{
        height 16px
        line-height 16px
        padding 0 4px
        font-size 10px
      }
    }
    .h-flight{
      display block
      width 100%
      .flight-box{
        position relative
        display inline-block
        margin-right 6px
        padding 4px 0 0 16px
        box-sizing border-box
        i{
          position absolute
          left 0
          font-size 13px
          &.back{
          }
        }
        span{
          font-size 12px
          color subheadColor
        }
        .time{
          display block
          margin-top 6px
          font-weight bold
          font-size 14px
          color mainTitleColor
        }
      }
    }
    .h-people{
      margin-top 5px
      font-size 12px
      i{
        font-size inherit
      }
    }
    .h-price{
      position absolute
      bottom 6px
      right 5px
      margin-top 5px
      text-align right
      .price-discount{
        display inline-block
        background #d80000
        color #ffffff
        height 12px
        font-size 12px
      }
      i{
        font-style normal
      }
      span{
        display block
        &.oldPrice{
          font-size 12px
        }
        &.nowPrice{
          font-size 20px
          font{
            font-size: 12px
            font-weight normal
          }
        }
      }
    }
    h3{
      font-weight bold
      margin .3rem 0
      font-size 1.4rem
      i{
        margin 0 .3rem
      }
    }
    .date{
      margin 3px 0
      font-size 12px
      color mainTitleColor
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
    }
    .bottom{
      position absolute
      bottom .8rem
      display flex
      width 92%
      span{
        display inline-block
        flex 1
        font-size .625rem

      }
      .price{
        font-size .625rem
        align-self: flex-end;
        b{
          display inline-block
          font-size 1.1rem
          margin 0
          font-weight bold
        }
      }
    }
    .price-describe{
      margin-right 4px
      font-size 18px
    }
  }
</style>
