<template>
   <div class="hotProject" @click="stopJump">
     <dl class="hot__project-box">
       <dt class="hot__project_img">
          <img class="hot__img-url" :src="`${hostURL}${data.coverImg}`">
          <ExpectCard :date="data.publishTime" :isExpect="data.publishStatus === 2" class="expect_card"/>
          <p class="project__price" v-show="isPriceLeft">{{data.minimumPrice|currency}}元起</p>
       </dt>
       <dd class="hot__project-infos">
         <p class="infos__area-price">
            <b class="infos_area">{{data.name}}</b>
            <span class="infos_price" v-show="isPrice">{{(data.minimumPrice || 0)|currency}}起/月</span>
            <span class="infos_house_type" v-show="isHouse">
                {{data.layoutCount || 0}}个户型 {{data.houseCount || 0}}套房源
            </span>
         </p>
         <p class="infos__home_address">
            <span class="hot__home_address">
              <svg class="icon address" aria-hidden="true">
                  <use xlink:href="#icon-zuola"/>
              </svg>
                 {{data.address}}
            </span>
          </p>
       </dd>
       
     </dl>
   </div>
</template>

<script>
//import { mapState } from 'vuex'
import { Toast } from "vant";
import api from "@/api/index.js";
let URL = api.serverURI;
import ExpectCard from "@/common/widget/expectCard.vue";
export default {
  name: "hotProject",
  props: {
    data: { // 获取组建数据
      type: Object,
      default: {},
      required: true
    },
    isPrice: {
      type: Boolean,
      default: false,
      required: false
    },
    isHouse: {
      type: Boolean,
      default: false,
      required: false
    },
    isPriceLeft: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  components: {
    ExpectCard
  },
  computed: {
    // ...mapState({
          
    // })
  },
  mounted() {
      
  },
  data: function() {
    return {
      name: "hotProjectCard",
      hostURL: URL
    };
  },
  methods: {
    stopJump(event) {
      if(this.data.publishStatus === 2) {
        event.preventDefault();
      }
    }
  }
};
</script>
<style scoped lang='less'>
@import "~@/common/less/variable.less";
  .hotProject{
    .hot__project-box {
        width: 323.27px;
        height: 186.61px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.11);
        background: #ffffff; 
        border-bottom:1px solid @nice-searchbg;
         
        .hot__project_img {
          width: 322.86px;
          height: 127.61px;
          position: relative;  
          .hot__img-url {
            width: 322.86px;
            height: 127.61px; 
            border-radius: 5px; 
            display: block;
          }
          .expect_card {
            position: absolute;
            left: 114px;
            top: 16px;         
          }
          .project__price {
            width: 104px;
            height: 27px;
            text-align: center;
            font-size: 15px;
            line-height: 27px;
            background: @nice-green;
            color: @nice-bgwhite;
            bottom: 20px;
            left: 0;
            position: absolute;
          }
      }
      .hot__project-infos {
          width: 323.27px;
          height: 59px;
          .infos__area-price {
            width: 323.27px;
            height: 21px;
            margin-top: 6px;
            .infos_area {
              height: 21px;
              line-height: 21px;
              font-size: 15px;
              color: #000;
              float: left;
              margin-left: 12px;
            }
            .infos_price,.infos_house_type {
              height: 21px;
              line-height: 21px;
              font-size: 12px;
              color: #000;
              float: right;
              margin-right: 12.27px;
            }
        }
        .infos__home_address {
            width: 323.27px;
            height: 30px;
            text-align: left;        
            .hot__home_address {
               font-size: 12px;
               color: #585858;
               line-height:30px;
               margin-left:12px; 
               .address {
                margin-right: 5px;
                color: @nice_addressIcon;
               }
            }
        }
      }

    }   
  }
</style>