<!--  -->
<template>
  <NConfigProvider :theme-overrides="themeOverrides">
    <navheader @search="search"></navheader>
    <div class="home">
      <div class="list">
        <div class="list-left">
          <div
            class="left-item"
            v-for="i in homeList"
            @click="router.push(`/details/${i.id}`)"
          >
            <div class="item-info">
              <div class="item-cover">
                <img :src="`./static/image/house/${i.images_1[0]}`" alt="" />
              </div>
              <div class="item-text">
                <div class="title">
                  <span class="name">{{ i.title }}</span>
                  <div class="label-box">
                    <div class="label-item zs">{{ i.tags[0] }}</div>
                    <div class="label-item zz">{{ i.tags[1] }}</div>
                    <div class="label-item dmzz">{{ i.tags[2] }}</div>
                  </div>
                </div>
                <div class="location">
                  <span>address：</span><span>{{ i.address }}</span>
                </div>
                <div class="house">
                  <span>Unit Layout：</span><span>{{ i.cad }}</span>
                  <span>Building Area: </span><span>120-196㎡</span>
                </div>
                <div class="role">Sales Consultant：{{ i.agent }}</div>
                <div class="tag">
                  <div class="tag-item" v-for="j in i.label">{{ j }}</div>
                </div>
              </div>
            </div>
            <div class="item-price">
              <div class="unit-price">
                <!-- <span>{{ i.price }}</span> 元/㎡(均价) -->
                <span>{{ i.price }}</span> ( Average Price)
              </div>
              <div class="total-price">Total price{{ i.total }}</div>
            </div>
          </div>
        </div>
        <div class="list-right">
          <p class="title">Popular Properties</p>
          <div class="hot-list">
            <div
              class="hot-item"
              @click="router.push(`/details/${i.id}`)"
              v-for="i in hotList"
            >
              <div class="hot-cover">
                <img :src="`./static/image/house/${i.images_1[0]}`" alt="" />
              </div>
              <div class="hot-text">
                <div class="hot-name">
                  <span>{{ i.title }}</span>
                  <div class="hot-label">
                    <div class="item zs">{{ i.tags[0] }}</div>
                    <div class="item zz">{{ i.tags[1] }}</div>
                  </div>
                </div>

                <div class="price-wrapper">
                  <div class="hot-price">{{ i.total }}</div>
                  <!-- <div class="hot-unit">(万/套)</div> -->
                </div>
              </div>
            </div>
          </div>
        </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 { houseData } from "../data/data.js";
import { NConfigProvider } from "naive-ui";
const hotList = computed(() => {
  return houseData.slice(0, 5);
});
const themeOverrides = {
  common: {
    primaryColor: "#3072f6",
    primaryColorHover: "#3072f6",
  },

  // ...
};
const homeList = ref(houseData);
const search = (val) => {
  if (val == "all") {
    homeList.value = houseData;
    return;
  }
  let list = houseData.filter((item) => {
    return item.title.includes(val);
  });
  homeList.value = list;
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
.home {
  // word-break: break-all;
  .list {
    position: relative;
    width: 1174px;
    // min-height: 1200px;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .list-left {
      width: 932px;
      .left-item {
        position: relative;
        padding: 30px 0;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        &:last-of-type {
          border: none;
        }
        .item-info {
          display: flex;
          align-items: center;
          justify-content: flex-start;

          .item-cover {
            // position: absolute;
            width: 236px;
            height: 178px;
            background: #f5f5f6;
            // background-image: url(../../common/img/default_icon.png?4d16840…);
            background-size: 40px 38px;
            background-repeat: no-repeat;
            background-position: 50%;
            img {
              width: 236px;
              height: 178px;
              background: transparent;
              object-fit: cover;
            }
          }
          .item-text {
            margin-left: 40px;
            min-height: 178px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            .title {
              display: flex;
              align-items: flex-start;
              justify-content: flex-start;
              flex-direction: column;
              margin-bottom: 10px;

              .name {
                display: inline-block;
                margin-right: 7px;
                font-size: 22px;
                color: #101d37;
                line-height: 22px;
                vertical-align: middle;
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .label-box {
                .label-item {
                  display: inline-block;
                  padding: 6px 7px;
                  margin-right: 7px;
                  line-height: 12px;
                  font-size: 12px;
                  vertical-align: middle;
                  border-radius: 2px;
                  letter-spacing: -0.27px;
                  text-align: center;
                  font-weight: 400;
                  color: #fff;
                  margin-top: 10px;
                  &.zs {
                    background: #5f94ff;
                  }
                  &.zz {
                    background: #fb9252;
                  }
                  &.dmzz {
                    background: #8fd24e;
                  }
                }
              }
            }
            .location,
            .house,
            .role {
              font-size: 14px;
              color: #9399a5;
            }
            .tag {
              .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;
              }
            }
          }
        }
        .item-price {
          padding-left: 20px;
          .unit-price {
            color: #fe615a;
            span {
              font-size: 22px;
              line-height: 28px;
              vertical-align: bottom;
            }
          }
          .total-price {
            margin-top: 10px;
            font-size: 12px;
            color: #9399a5;
            text-align: right;
          }
        }
      }
    }
    .list-right {
      .title {
        font-size: 16px;
        color: #101d37;
        line-height: 22px;
        font-weight: 700;
      }
      .hot-list {
        margin-top: 20px;
        .hot-item {
          cursor: pointer;
          width: 184px;
          margin-top: 20px;
          .hot-cover {
            width: 100%;
            height: 128px;
            img {
              width: 100%;
              height: 128px;
              object-fit: cover;
            }
          }
          .hot-text {
            .hot-name {
              display: flex;
              align-items: flex-start;
              justify-content: flex-start;
              flex-direction: column;
              > span {
                display: inline-block;
                font-size: 14px;
                color: #18253e;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .hot-label {
                margin: 5px 0;
                display: flex;
                .item {
                  height: 16px;
                  font-size: 12px;
                  line-height: 16px;
                  padding: 0 4px;
                  box-sizing: border-box;
                  border-radius: 2px;
                  // flex: 1;

                  &.zs {
                    color: #3072f6;
                    background: rgba(107, 153, 246, 0.11);
                    margin-right: 4px;
                  }
                  &.zz {
                    border: 1px solid #ced2d6;
                    color: #9399a5;
                    line-height: 14px;
                  }
                }
              }
            }
            .price-wrapper {
              display: flex;
              .hot-price {
                font-size: 13px;
                color: #fe615a;
                font-weight: 700;
                word-break: break-all;
              }
              .hot-unit {
                font-size: 14px;
                color: #000019;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
}
</style>
