<style scoped>
._content_item{
    display: flex;
    flex-wrap: wrap;
}
._content_item ._item{
    width: 220px;
    position: relative;
    transition: all linear .5s;
    overflow: hidden;
    margin: 5px 4px;
}
._content_item ._item:hover{
    box-shadow: 0px 1px 13px 0px rgb(189, 189, 189);
}
._content_item ._top{
    background-color: #F1BC69;
}
._content_item ._top ._time{
    color: #A7711C;
}
._content_item ._top._blue{
    background-color: #8794E2;
}
._content_item ._top._blue ._time{
    color: #4C58A4;
}
._content_item div._top._gray{
    background-color: #ccc !important;
}
._content_item div._top._gray ._overdue,._content_item div._top._gray ._info_bottom{
    display: none
}
._content_item div._top._gray ._info_sale{
    color: #FFFFFF !important;
}
._content_item div._top._gray ._time{
    color: #777777 !important;
}
._top_raduis{
    display: flex;
    justify-content: space-between;
}
._top_raduis span{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 3px;
    border-radius: 50%;
    background-color: white;
    margin-top: -4px;
}
._item ._top ._overdue{
    background-color: #E9F026;
    color: #666666;
    padding: 4px 6px;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
}
._item ._top ._info_details{
    padding: 15px 10px;
}
._item ._top ._info_details ._info_sale{
    font-size: 30px;
    color: white;
}
._item ._top ._info_details ._info_sale span{
    font-size: 20px;
    color: white;
}
._item ._top ._info_details ._info_full{
    color: #FFFFFF;
    font-size: 12px;
    padding: 5px 0;
}
._item ._top ._info_details ._info_time{
    font-size: 12px;
}
._item ._top ._info_details  ._info_bottom{
    padding: 1px 5px;
    color: #A7711C;
    font-size: 12px;
    position: absolute;
    border: 1px solid #A7711C;
    border-radius: 4px;
    right: 13px;
    top: 24px;
    cursor: pointer;
}
._item ._bottom{
    padding: 15px 10px;
    background-color: #F9F9F9;
}
._item ._bottom p{
    font-size: 12px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 13px;
}
._item ._bottom p._bottom_info{
    color: #666666;
    font-weight: 300;
}
._item ._bottom p._margin_bt0{
    margin-bottom: 0 !important;
}
p._info_coupon_name{
    font-size: 18px !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
}
._item .itemImg{
  position: absolute;
  right: 45px;
  top: 42px;
}
</style>
<template>
  <div class="_item">
    <div class="itemImg">
      <img v-if="item.fromPlatform=='0'" src="../../../assets/img/yhq/all.png" alt="">                                
      <img v-if="item.fromPlatform=='1'" src="../../../assets/img/yhq/app.png" alt="">
      <img v-if="item.fromPlatform=='2'" src="../../../assets/img/yhq/xcx.png" alt="">
      <img v-if="item.fromPlatform=='3'" src="../../../assets/img/yhq/pc.png" alt="">
    </div>
    <div class="_top" :class="{'_blue':item.couponsType===1,'_gray':item.couponEffectStatus===3 || !Platfrom(item.fromPlatform)}">
      <div class="_top_raduis">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="_overdue" v-if="item.warning">即将过期</div>
      <div class="_info_details">
        <p class="_info_coupon_name" :title="item.couponsName">{{item.couponsName}}</p>
        <p class="_info_sale" v-if="item.couponsType !== 1">
          {{item.denomination}}
          <span>折</span>
        </p>
        <p class="_info_sale" v-else>
          <span>￥</span>
          {{item.denomination}}
        </p>
        <p class="_info_full">满{{item.useCondition}}可用</p>
        <p class="_info_time _time">有效时间：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}</p>
        <p class="_info_bottom" @click="goUrl('heel',true)">去使用</p>
      </div>
    </div>
    <div class="_bottom">
      <p class="_bottom_tit">可用线路及系列</p>
      <p
        class="_bottom_info"
      >{{item.lineName === '' ? '不限' : item.lineName}}-{{item.lineTeamName === '' ? '不限' : item.lineTeamName}}</p>
      <p class="_bottom_tit">优惠券来源</p>
      <p class="_bottom_info _margin_bt0">{{item.remark}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  data() {
    return {};
  },
  methods: {
    Platfrom(str){
          if(str){
              if(str.indexOf('0')!=-1 || str.indexOf('3')!=-1){
                  return true;
              }
              else{
                  return false;
              }
          }
      },
    goUrl(path) {
      this.$router.push({ name: path });
    }
  },
  mounted() {}
};
</script>