<!--  -->
<template>
  <NConfigProvider :theme-overrides="themeOverrides">
    <navheader></navheader>
    <div class="details">
      <div class="content">
        <div class="details-title">
          <div class="name-box">
            <div class="name">
              <span>{{ houseInfo.title }}</span>
              <div class="label-wrap">
                <div class="label zs">{{ houseInfo.tags[0] }}</div>
                <div class="label zz">{{ houseInfo.tags[1] }}</div>
              </div>
            </div>
            <!-- <div class="other-name">别名：璟云雅苑</div> -->
          </div>
          <div class="tel-num">Contact details: 4008315585</div>
        </div>
        <div class="details-top">
          <div class="banner-box">
            <div class="swiper-wraper">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="i in bannerList">
                  <n-image
                    width="100%"
                    height="100%"
                    object-fit="cover"
                    :src="`./static/image/house/${i}`"
                  />
                  <div class="vr-layer" v-if="bannerActiveIndex == 1">
                    <div class="vr-btn" @click="goVr()"></div>
                  </div>
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <!-- <div class="swiper-pagination"></div> -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
            <div class="image-box">
              <div
                class="item-image"
                :class="{ active: i.type === bannerActiveIndex }"
                @click="changeBanner(i.type)"
                v-for="(i, index) in bannerListType"
              >
                <img :src="`./static/image/house/${i.images[0]}`" alt="" /><span
                  class="name"
                  >{{ i.name }}（{{ i.images.length }}）</span
                >
              </div>
            </div>
          </div>
          <div class="info-box">
            <div class="top-info">
              <span class="title">Reference Average Price</span>
              <!-- <span class="price-number">60000</span> -->
              <!-- <span class="price-unit">元/平(单价) </span> -->
              <span class="price-unit">{{ houseInfo.price }} </span>
              <!-- <span class="price-number">480-765</span> -->
              <!-- <span class="price-unit">(万/套)(总价)</span> -->
              <span class="total-title">Total price </span>
              <span class="price-unit">{{ houseInfo.total }} </span>
            </div>
            <div class="info-tag">
              <div class="tag-item" v-for="(i, index) in houseInfo.label">
                {{ i }}
              </div>
            </div>
            <div class="info-desc">
              <div class="desc-item">
                <div class="title">Project Address</div>
                <div class="text">{{ houseInfo.address }}</div>
              </div>
              <div class="desc-item">
                <div class="title">Project Launch Date</div>
                <div class="text">{{ houseInfo.time }}</div>
              </div>
              <div class="desc-item">
                <div class="title">Property layout</div>
                <div class="text">
                  <span v-for="(i, key, index) in cadData"
                    >{{ key }}({{ i.length }})</span
                  >
                  <!-- <span>四居室({{ 2 }})</span> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="details-bottom">
          <div class="cad-box">
            <h2 class="title">Layout Description</h2>
            <div class="cad-tab">
              <div
                class="tab-item"
                :class="{ active: activeCad == key }"
                v-for="(i, key, index) in cadData"
                @click="activeCad = key"
              >
                <span>{{ key }}({{ i.length }})</span>
              </div>
              <!-- <div class="tab-item"><span>三居室(1)</span></div> -->
            </div>
            <div class="cad-list">
              <div class="cad-item" v-for="i in cadData[activeCad]">
                <div class="cad-img">
                  <n-image
                    width="100%"
                    height="100%"
                    object-fit="cover"
                    :src="`./static/image/house/${i.thumb}`"
                  />
                </div>
                <div class="cad-info">
                  <div class="cad-title">
                    <span> {{ i.desc }} </span>
                    <div class="label-wrap">
                      <!-- <div class="label zs">在售</div>
                      <div class="label zz">住宅</div> -->
                    </div>
                  </div>
                  <div class="area">{{ i.area }} （South/North Facing）</div>
                  <div class="price">
                    {{ i.price }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom-info-box">
            <div class="name-info">
              <h3>{{ houseInfo.title }}</h3>
              <div class="label-wrap">
                <div class="label zs">{{ houseInfo.tags[0] }}</div>
                <div class="label zz">{{ houseInfo.tags[1] }}</div>
              </div>
            </div>
            <div class="top-info">
              <span class="title">Reference Average Price</span>
              <span class="price-number">{{ houseInfo.price }}</span>
              <!-- <span class="price-unit">元/平(单价) </span> -->
            </div>

            <div class="info-desc">
              <div class="desc-item">
                <div class="title">Project Address</div>
                <div class="text">{{ houseInfo.address }}</div>
              </div>
              <div class="desc-item">
                <div class="title">Project Launch Date</div>
                <div class="text">{{ houseInfo.time }}</div>
              </div>
              <div class="desc-item">
                <div class="title">Property layout</div>
                <div class="text">
                  <span v-for="(i, key, index) in cadData"
                    >{{ key }}({{ i.length }})</span
                  >
                  <!-- <span>四居室({{ 2 }})</span> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="google-map" id="map">
          <GoogleMap
            api-key="AIzaSyD-nVI43AYI9qp4rsQMJgN6abyPdn3QRY0"
            style="width: 100%; height: 100%"
            :center="center"
            :zoom="13"
            language="en-us"
          >
            <Marker :options="{ position: center }" />
          </GoogleMap>
        </div>
      </div>
    </div>
    <copyRight
  /></NConfigProvider>
</template>

<script setup>
import router from "@/router";
import navheader from "@/components/header/index.vue";
import copyRight from "@/components/copyRight/index.vue";
import { reactive, ref, toRefs, onBeforeMount, onMounted, computed } from "vue";
import { GoogleMap, Marker } from "vue3-google-map";
import Swiper from "swiper";
import "swiper/css/swiper.css";
import { NConfigProvider } from "naive-ui";
import { houseData } from "../data/data.js";
import { useRoute } from "vue-router";

const route = useRoute();

const houseId = ref(route.params.id || 1);
const houseInfo = computed(() => {
  return houseData.find((item) => item.id == houseId.value);
});
const themeOverrides = {
  common: {
    primaryColor: "#3072f6",
    primaryColorHover: "#3072f6",
  },

  // ...
};
const goVr = () => {
  window.open(houseInfo.value.vrLink);
};
const bannerActiveIndex = ref(1);
const bannerListType = ref([
  {
    type: 1,
    name: "VR",
    images: houseInfo.value.images_1,
  },
  {
    type: 2,
    name: "Render",
    images: houseInfo.value.images_2,
  },
  {
    type: 3,
    name: "Model",
    images: houseInfo.value.images_3,
  },
  {
    type: 4,
    name: "Location",
    images: houseInfo.value.images_4,
  },
  {
    type: 5,
    name: "Facilities",
    images: houseInfo.value.images_5,
  },
]);
const banner = ref(
  "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
);
const bannerList = ref(houseInfo.value.images_1);
// https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg

const activeCad = ref("2-Bedroom Unit");
const cadData = ref({
  "2-Bedroom Unit": [
    {
      title: "2-Bedroom Unit",
      area: "Construction area 76m²",
      desc: "2 bedrooms, 2 living rooms, 1 bathroom",
      price: "1.9 million/set (reference price)",
      thumb: "76二.jpg",
    },
    {
      title: "2-Bedroom Unit",
      area: "Construction area 71m²",
      desc: "2 bedrooms, 2 living rooms, 1 bathroom",
      price: "1.9 million/set (reference price)",
      thumb: "71二.jpg",
    },
  ],
  "3-Bedroom Unit": [
    {
      title: "3-Bedroom Unit",
      area: "Construction area 96m²",
      desc: "3 bedrooms, 2 living rooms, 1 bathroom",
      price: "2.7 million/set (reference price)",
      thumb: "96三.jpg",
    },
    {
      title: "3-Bedroom Unit",
      area: "Construction area 106m²",
      desc: "2.75 million/set (reference price)",
      price: "270 万/套(参考价格）",
      thumb: "106三.jpg",
    },
    {
      title: "3-Bedroom Unit",
      area: "Construction area 97m²",
      desc: "3 bedrooms, 2 living rooms, 2 bathrooms",
      price: "2.7 million/set (reference price)",
      thumb: "96三.jpg",
    },
  ],
});

const changeBanner = (type) => {
  bannerActiveIndex.value = type;
  bannerList.value = bannerListType.value.find(
    (item) => item.type === type
  ).images;
  if (swiper) {
    swiper.destroy(true, true);
    swiper = null;
  }
  banner.value =
    "https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg";
  setTimeout(() => {
    initBanner();
  }, 0);

  // swiper.update();
  // console.log(bannerCount.value);
};

let swiper = null;
const initBanner = () => {
  swiper = new Swiper(".swiper-wraper", {
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
      // disabledClass: "my-button-disabled",
    },
    // Swiper选项...
    loop: false,
    on: {
      slideChange: (e) => {},
      init: () => {},
    },
  });
};

let map;

const initMap = async () => {
  const { Map } = await google.maps.importLibrary("maps");
  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  addMarker();
};

// let center = { lat: -34.397, lng: 150.644 };
let lonlat = houseInfo.value.location.split(",");

// const center = { lat: 40.689247, lng: -74.044502 };
const center = { lat: lonlat[0] - 0, lng: lonlat[1] - 0 };

const addMarker = async () => {
  let center = { lat: -34.397, lng: 150.644 };
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: center,
  });
};

onMounted(() => {
  initBanner();
  // initMap();
});
</script>
<style lang="scss" scoped>
.label-wrap {
  display: flex;
  .label {
    width: auto;
    height: 24px;
    line-height: 24px;
    padding: 0 6px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    border-radius: 2px;
    &.zs {
      margin-left: 7px;
      color: #fff;
      background-image: linear-gradient(-135deg, #6b99f6, #3072f6);
    }
    &.zz {
      margin-left: 5px;
      font-size: 12px;
      color: #849aad;
      background: #f2f4f6;
    }
  }
}
.details {
  // word-break: break-all;
}
.content {
  width: 1182px;
  margin: 0 auto;

  .details-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .name-box {
      display: flex;
      flex-direction: column;
      .name {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        > span {
          padding-bottom: 0;
          font-size: 26px;
          color: #101d37;
          font-weight: 600;
          display: inline-block;
          vertical-align: -4px;
        }
      }
      .other-name {
        padding-top: 7px;
        font-size: 13px;
        color: #9399a5;
        font-weight: 400;
        vertical-align: unset;
        padding-bottom: unset;
        margin-top: unset;
      }
    }
    .tel-num {
      position: relative;
      display: inline-block;
      color: #101d37;
      font-weight: bold;
      height: 22px;
      overflow: visible;
      font-size: 16px;
    }
  }
  .details-top {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    .banner-box {
      display: inline-block;
      width: 524px;
      position: relative;
      vertical-align: top;

      .swiper-wraper {
        width: 526px;
        height: 295px;
        overflow: hidden;
        position: relative;
        .swiper-wrapper {
          .swiper-slide {
            .vr-layer {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              background: rgba(0, 0, 0, 0.5);
              .vr-btn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 60px;
                height: 60px;
                background: url("@/assets/images/model720.png") no-repeat center
                  center;
                background-size: cover;

                cursor: pointer;
              }
            }
            // img {
            //   width: 100%;
            //   height: 100%;
            //   object-fit: cover;
            // }
          }
        }
      }
      .image-box {
        width: auto;
        height: 67px;
        overflow: hidden;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-image {
          width: 100px;
          height: 67px;
          border: none;
          // margin-right: 6px;
          display: inline-block;
          cursor: pointer;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .name {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            letter-spacing: 0;
            background: rgba(0, 0, 0, 0.5);
          }
          &.active {
            .name {
              background: #3072f6;
            }
          }
        }
      }
    }
    .info-box {
      width: 586px;
      margin-left: 60px;
      padding: 20px 30px;
      box-sizing: border-box;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
      -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);

      .top-info {
        color: #fe615a;
        .title {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #9399a5;
          display: inline-block;
          margin-right: 10px;
        }
        .price-number {
          font-family: Tahoma-Bold;
          font-size: 30px;
        }
        .total-title {
          font-size: 14px;
          color: #9399a5;
        }
        .price-unit {
          font-family: HiraginoSansGB-W6;
          font-size: 16px;
          margin-right: 20px;
        }
      }
      .info-tag {
        margin-top: 20px;
        border-bottom: 1px solid #e4e6f0;
        padding-bottom: 15.5px;
        .tag-item {
          display: inline-block;
          height: 30px;
          margin-right: 10px;
          padding: 0 12px;
          line-height: 30px;
          font-size: 12px;
          color: #849aae;
          background: rgba(132, 154, 174, 0.1);
          margin-bottom: 10px;
        }
      }
      .info-desc {
        border-bottom: 1px solid #e4e6f0;
        padding-bottom: 15.5px;
        .desc-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 13px;
          .title {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #9399a5;
          }
          .text {
            font-family: PingFangSC-Regular;
            font-weight: 300;
            font-size: 14px;
            color: #101d37;
            margin-right: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
            margin-left: 10px;
            > span {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  .details-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 50px;
    .cad-box {
      .title {
        font-size: 24px;
        font-weight: 600;
        color: #101d37;
      }
      .cad-tab {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .tab-item {
          padding: 10px 20px;
          float: left;

          span {
            color: #101d37;
            cursor: pointer;
            position: relative;
          }

          &.active {
            span {
              color: #3072f6;
              &::after {
                content: " ";
                background: #3072f6;
                bottom: -11px;
                height: 1px;
                left: 0;
                position: absolute;
                width: 100%;
              }
            }
          }
        }
      }
      .cad-list {
        margin-right: 0;
        width: 724px;
        display: inline-block;
        overflow: hidden;
        display: flex;

        .cad-item {
          position: relative;
          width: 230px;
          // height: 338px;
          display: inline-block;
          margin-right: 12px;
          border: 1px solid #e4e6f0;
          border-radius: 2px;
          vertical-align: top;

          .cad-img {
            height: 169px;
            width: 100%;
            border-bottom: 1px solid #e4e6f0;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .cad-info {
            padding: 20px 10px 20px;
            .cad-title {
              display: flex;
              align-items: center;
              span {
                font-weight: bold;
                color: #333;
                font-size: 14px;
                // max-width: 50%;
              }
            }
            .area {
              color: #9399a5;
              font-size: 14px;
              margin-bottom: 10px;
            }
            .price {
              margin-bottom: 5px;
              font-size: 16px;
              color: #fa5741;
              > span {
              }
            }
          }
        }
      }
    }
    .bottom-info-box {
      width: 400px;
      position: relative;
      padding: 20px 30px;
      box-sizing: border-box;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
      .name-info {
        display: flex;
        font-size: 26px;
        align-items: flex-start;
        flex-direction: column;
      }
      .top-info {
        color: #fe615a;
        .title {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #9399a5;
          display: inline-block;
          margin-right: 10px;
        }
        .price-number {
          font-family: Tahoma-Bold;
          font-size: 20px;
        }
        .price-unit {
          font-family: HiraginoSansGB-W6;
          font-size: 16px;
          margin-right: 20px;
        }
      }

      .info-desc {
        .desc-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-top: 13px;
          .title {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #9399a5;
          }
          .text {
            font-family: PingFangSC-Regular;
            font-weight: 300;
            font-size: 14px;
            color: #101d37;
            margin-right: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
            margin-left: 10px;
            > span {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
.google-map {
  width: 100%;
  height: 500px;
  margin-top: 30px;
}
.swiper-button-next,
.swiper-button-prev {
  // transform: translateY(-50%);
  // margin-top: 0;
}
.swiper-button-disabled {
  pointer-events: auto;
}
.n-image {
  width: 100%;
  height: 100%;
}
</style>
<style>
/* .gmnoprint,
.gm-style-cc {
  display: none !important;
} */
</style>
