<template>
   <div class="sampleRoom">
       <div class="sample__room-infos">
          <p class="sample__room-img">
          	<img class="sample__room-imgurl" :src="`${hostUrl}${data.coverImg}`">
          </p>
          <p class="sample__room-info">
          	<span class="sample__room-type">{{data.layoutName}}</span>
          	<span class="sample__room-price">{{data.minimumPrice|currency}}元起/月</span>
          	<span class="sample__room-address">{{data.address}}</span>
          	<span @click="jump" class="panoramic_img" v-if="data.degreeUrl">
                <svg class="icon panoramic__icon" aria-hidden="true">
                     <use xlink:href="#icon-duquanjing"/>
                </svg>
          	</span>
          </p>
       </div>
   </div>
</template>

<script>
//import { mapState } from 'vuex'
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  name: "sampleRoom",
  props: ["data"],
  components: {
    //addPane
  },
  computed: {
    // ...mapState({
          
    // })
  },
  mounted() {
      
  },
  data: function() {
    return {
      name: "sampleRoom",
      hostUrl: URL
    };
  },
  methods: {
    jump(event) {
      event.preventDefault();
      location.href = this.data.degreeUrl;
    }
  }
};
</script>
<style scoped lang='less'>
  @import "~@/common/less/variable.less";
   .sample__room-infos {
     	width: 348px;
     	height: 114px;
     	background:@nice-bgwhite;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0,0,0,0.16);
      .sample__room-img { 
         width: 125.98px;
         height: 83.45px;
         float: left;
         margin: 16px 15px 14.55px 9px;
         .sample__room-imgurl {
            width: 125.98px;
        	  height: 83.45px;
        	  display: block;
         } 
      }
      .sample__room-info {
        width: 195px;
        float: left;
        margin-top: 16px;
        .sample__room-type {
        	text-align: left;
        	display: block;
        	width: 100%;
        	height: 24px;
        	line-height: 24px;
        	font-size: 17px;
        	font-weight: 600;
        	color: #585858;
        }
        .sample__room-price {
        	text-align: left;
        	display: block;
        	width: 100%;
        	height: 18px;
        	line-height: 18px;
        	color: #313131;
        	margin-top: 6px;
        }
        .sample__room-address {
           text-align: left;
           display: block;
           width: 100%;
           height: 16px;
           line-height: 16px;
           font-size: 11px;
           color: #585858;
           margin-top: 3px;
        }
        .panoramic_img {
        	 display: block;
        	 width: 100%;
        	 height: 18.4px;                  
           .panoramic__icon {
            	display: block;
            	width: 53.33px;
            	height: 18.4px;
              color: @nice-green;
            
          }
        }
      }

   }

   
</style>