<template>
   <div id="projectCard">
       <div class="project_box">
          <div class="project_img_box">
          	 <img class="project_img" :src="`${hostURL}${data.coverImg}`">
          </div>
          <div class="project_infos">
          	<p class="preject_name">
              <b class="project__info-area">{{data.title}}</b>
              <span v-show="isProject" class="project_type">项目</span>
              <span v-show="isHouse" class="room_type">户型</span>
            </p>
          	<p class="project_address" v-show="isHouseAddress">{{data.address }}</p>
            <p class="project_address" v-show="isHouseHouder"></p>
          	<p class="project__room-type" v-show="isProjectNum">{{data.layoutCount}}个户型 | {{data.houseCount }}套房源</p>
             <p class="project_address" v-show="isHouseSpace"></p>
            <p class="project__room-type" v-show="isHouseName">{{data.regionName}}</p>
          	<p class="project__price">{{(data.minimumPrice || 0)|currency}}起/月</p>
          </div>
       </div>
   </div>
</template>

<script>
//import { mapState } from 'vuex'
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  name: "projectCard",
  props: {
    data: {
      type: Object,
      default: {},
      required: true
    },
    isProject: {
      type: Boolean,
      default: false,
      required: false
    },
    isHouse: {
      type: Boolean,
      default: false,
      required: false
    },
    isHouseSpace:{
      type: Boolean,
      default: false,
      required: false
    },   
    isHouseName: {
      type: Boolean,
      default: false,
      required: false
    },
    isProjectNum:{
      type: Boolean,
      default: false,
      required: false
    },
    isHouseAddress: {
      type: Boolean,
      default: false,
      required: false
    },
    isHouseHouder: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  components: {
    //addPane
  },   
  mounted() {
      
  },
  data: function() {
    return {
      name: "projectCard",
      hostURL: URL,
    };
  },
  methods: {

  }
};
</script>
<style scoped lang='less'>
  @import "~@/common/less/variable.less";
   .project_box {
   	width: 375px;
   	height: 94.5px;
   	background:@nice-bgwhite;
   	border-bottom:1px solid #F2F2F2;
    margin-top: 11.5px;
   	.project_img_box {
   		width: 100px;
   		height: 76px;
   		float: left;
   		margin: 5px 14px 14px 13px;
   		.project_img {
   			display: block;
   			width: 100px;
   			height: 76px;
   		}
   	}
   	.project_infos {
   		width: 248px;
   		height: 94.5px;
   		float: left;
   		text-align: left;
   		.preject_name {
   			width: 100%;
   			height: 22px;
        margin-top: 5px;
   			.project__info-area{
   			font-size: 16px;
   			height: 22px;  			
   			line-height: 22px;
   			color: #323232;
   			float: left;
   		    }
   			.project_type {
   				display: inline-block;
   				width: 41.36px;
   				height: 17px;
   				border-radius: 10px;
   				text-align: center;
   				line-height: 19px;
   				border:1px solid #FF2929;
   				background: #FFF2F2;
   				font-size: 11px;
   				color: #FF2929;
                float: left;
                margin:1px 0 0 12px;
   			}
   			.room_type {
   				display: inline-block;
   				width: 41.36px;
   				height: 17px;
   				border-radius: 10px;
   				text-align: center;
   				line-height: 19px;
   				border:1px solid #FFA224;
   				background: #FFF8F2;
   				font-size: 11px;
                color: #FFA224;
                float: left;
                margin:1px 0 0 12px;

   			}
   		}
   		.project_address {
   			width: 100%;
   			height: 17px;
   			font-size: 12px;
   			color: #999999;
   			line-height: 17px;
   		}
   		.project__room-type {
   			width: 100%;
   			height: 17px;
   			font-size: 12px;
   			color: #95989A;
   			line-height: 17px;
   			margin-top: 3px;
   		}
   		.project__price {
   			width: 100%;
   			height: 20px;
   			font-size: 14px;
   			color: #FA2B31;
   			line-height:20px;
   			margin-top: 1px;
   			font-weight: 600;
   		}
   	}
   }

   
</style>