<template>
  <div class="info-container">
    <div>
      <introduceTitle title="小区概况" />
      <div class="info-box">
        <div class="introduction">
          {{ xiaoquIntroduce.intro.kaiguo.text | filterData }}
        </div>
        <div class="area-row">
          <div class="area-row-item">
            <div class="area-icon-name">
              <img src="@/assets/images/ui/icon_5@2x.png" alt="" />
              占地面积
            </div>
            <div class="area-data">
              <span class="unit-num">{{
                xiaoquIntroduce.intro.kaiguo.zhandi || 0
              }}</span>
              <span class="unit-text"> 万平方米</span>
            </div>
          </div>
          <div class="area-row-item">
            <div class="area-icon-name">
              <img src="@/assets/images/ui/icon_6@2x.png" alt="" />
              建筑总面积
            </div>
            <div class="area-data">
              <span class="unit-num">{{
                xiaoquIntroduce.intro.kaiguo.jianzhu || 0
              }}</span>
              <span class="unit-text"> 万平方米</span>
            </div>
          </div>
          <div class="area-row-item">
            <div class="area-icon-name">
              <img src="@/assets/images/ui/icon_7@2x.png" alt="" />
              住宅楼
            </div>
            <div class="area-data">
              <span class="unit-num">{{
                xiaoquIntroduce.intro.kaiguo.zhuzhai.mainZ || 0
              }}</span>
              <span class="unit-text"> 幢，其中多层 </span>
              <span class="unit-num">{{
                xiaoquIntroduce.intro.kaiguo.zhuzhai.duoc || 0
              }}</span>
              <span class="unit-text"> 幢，高层 </span>
              <span class="unit-num">{{
                xiaoquIntroduce.intro.kaiguo.zhuzhai.gaoc || 0
              }}</span>
              <span class="unit-text"> 幢</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <introduceTitle title="居住情况" />
      <div class="info-box flex-row">
        <div class="flex-row-item">
          <img
            src="@/assets/images/ui/icon_1@2x.png"
            alt=""
            class="row-item-icon"
          />

          <div class="row-item-data">
            <div class="row-item-name">小区总人口</div>
            <div class="row-item-value">
              <span class="unit-num" style="color: #00ffe4">1.8</span>
              <span class="unit-text" style="color: #fff"> 万人</span>
            </div>
          </div>
        </div>
        <div class="flex-row-item">
          <img
            src="@/assets/images/ui/icon_2@2x.png"
            alt=""
            class="row-item-icon"
          />
          <div class="row-item-data">
            <div class="row-item-name">暂住人口</div>
            <div class="row-item-value">
              <span class="unit-num" style="color: #00ffe4">1.2</span>
              <span class="unit-text" style="color: #fff"> 万人</span>
            </div>
          </div>
        </div>
        <div class="flex-row-item">
          <img
            src="@/assets/images/ui/icon_3@2x.png"
            alt=""
            class="row-item-icon"
          />
          <div class="row-item-data">
            <div class="row-item-name">常住人口</div>
            <div class="row-item-value">
              <span class="unit-num" style="color: #00ffe4">0.6</span>
              <span class="unit-text" style="color: #fff"> 万人</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <introduceTitle title="物业管理" />
      <div class="info-box flex-row">
        <div class="describe-text">
          {{ xiaoquIntroduce.intro.wuye | filterData }}
        </div>
        <img
          src="@/assets/images/ui/icon_4@2x.png"
          alt=""
          class="describe-icon"
        />
      </div>
    </div>
    <div>
      <introduceTitle title="配套设施" />
      <div class="info-box">
        <div class="describe-text">
          {{ xiaoquIntroduce.intro.peitao | filterData }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  components: {
    introduceTitle,
  },
  computed: {
    ...mapGetters(["queryParamsXiaoqu", "xiaoquIntroduce"]),
  },
  filters: {
    filterData(target) {
      return target ? target : "暂无数据";
    },
  },
  mounted() {
    this.$store.dispatch("GetXiaoquInfo", this.queryParamsXiaoqu.xiaoquId); //小区详情
  },
};
</script>

<style lang="scss" scoped>
.info-container {
  flex: 1;
  box-sizing: border-box;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  & > div {
    height: 20%;
    .info-box {
      padding: 0 8px;
      padding-top: 8px;
      height: calc(100% - 40px);
      overflow-y: auto;
    }
    .item-flex {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .introduction {
      font-size: 14px;
      color: #d3e9ff;
      font-weight: 400;
    }
    .area-row {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      .area-row-item {
        width: 50%;
        .area-icon-name {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #ffffff;
          font-weight: 500;
          img {
            height: 20px;
            width: 20px;
            margin-right: 6px;
          }
        }
        .area-data {
          margin-top: 4px;
        }
      }
      & > :last-child {
        flex: 1;
        margin-top: 8px;
      }
    }
    .flex-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .flex-row-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .row-item-icon {
        height: 60px;
        width: 58px;
        margin-bottom: 4px;
      }
      .row-item-name {
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
      }

      .describe-icon {
        margin-left: 8px;
        width: 58px;
        height: 60px;
      }
    }
  }
  & > div:first-child {
    height: 28%;
  }
  & > div:nth-child(2) {
    height: 23%;
  }
  & > div:nth-child(3) {
    height: 16%;
  }
  & > div:last-child {
    height: 33%;
  }
  .describe-text {
    font-size: 14px;
    color: #d3e9ff;
    font-weight: 400;
    overflow-y: auto;
  }
  .unit-num {
    font-size: 18px;
    color: #ffc500;
    font-family: "din-bold-2.ttf";
  }
  .unit-text {
    font-size: 12px;
    color: #dddddd;
    font-weight: 400;
  }
}

/*全局滚动条样式*/
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.5);
}
::-webkit-scrollbar-track {
  background: transparent;
}
</style>
