<template>
  <div class="list-links__box">
    <div class="list-links__upper">
      <div class="list-links__infos">
        <div class="list-links__title">{{property.name}}</div>
        <section class="tags">
          <div class="tags__tag-new">NEW</div>
          <div class="tags__tag-nhouse">新築戸建</div>
        </section>
      </div>
      <section class="icons">
        <a href class="icons__icon">
          <i class="far fa-heart pink"></i>
          <div>お気に入り</div>
        </a>
        <a href class="icons__icon">
          <i class="far fa-calendar-alt"></i>
          <div>見学予約</div>
        </a>
        <a href class="icons__icon">
          <i class="far fa-envelope"></i>
          <div>お問い合わせ</div>
        </a>
      </section>
    </div>
    <div class="list-links__model" v-if="property.model">{{property.model}}</div>
    <div class="list-links__copy">{{property.copy}}</div>
    <div class="list-links__details">
      <div class="list-links__photo">
        <img class="list-links__img" :src="property.photo" :alt="property.name">
        <div class="list-option__style">
          <div class="list-option__radio selected" @click="changePhoto()">
            <i class="fas fa-camera"></i>写真表示
          </div>
          <div class="list-option__radio" @click="changePhoto()">
            <i class="fas fa-ruler-combined"></i>間取り表示
          </div>
        </div>
      </div>
      <a class="list-links__detail" :href="property.id">
        <dl class="list-links__data">
          <dt>
            <i class="fas fa-yen-sign"></i>物件価格
          </dt>
          <dd class="list-links__price">
            <span>3,280</span>万円
          </dd>
        </dl>
        <dl class="list-links__data">
          <dt>
            <i class="fas fa-map-marker-alt"></i>所在地
          </dt>
          <dd>{{property.address}}</dd>
        </dl>
        <dl class="list-links__data">
          <dt>
            <i class="fas fa-subway"></i>交通
          </dt>
          <dd>
              {{property.traffics}}
              
              </dd>
        </dl>
        <div class="list-links__pieces">
          <dl class="list-links__piece">
            <dt>間取り</dt>
            <dd>{{property.layout}}</dd>
          </dl>
          <dl class="list-links__piece">
            <dt>向き</dt>
            <dd>{{property.exposure}}</dd>
          </dl>
          <dl class="list-links__piece">
            <dt>建物面積</dt>
            <dd>{{property.area}}㎡</dd>
          </dl>
          <dl class="list-links__piece">
            <dt>容積率</dt>
            <dd>{{property.FAR}}%</dd>
          </dl>
          <dl class="list-links__piece">
            <dt>建築年月</dt>
            <dd>{{property.year}}年{{property.month}}月築</dd>
          </dl>
          <dl class="list-links__piece">
            <dt>階数</dt>
            <dd>
              {{property.numFloor}}階／
              <br>
              地上{{property.numFloors}}階
            </dd>
          </dl>
        </div>
        <div class="list-links__flow">
          <div class="list-links__pictures">
            <i class="fas fa-camera"></i>29枚
          </div>
          <div class="list-links__watch">
            詳細を見る
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  props: [
      "property",
      ],
  methods: {
    changePhoto() {
      console.log("change");
    }
  }
};
</script>
