<template>
  <div class="building">
    <div>
      <div class="building-info" v-if="detail">
        <el-row class="row">
          <el-col :span="24">
            <div class="title" :title="detail.gcjzmc">{{ detail.gcjzmc }}</div>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">
            <span>重点治理标签：</span>
            <p class="g" :title="detail.jzlb">{{ detail.jzlb }}</p>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">
            <span>详细地址：</span>
            <p :title="detail.xxdz">{{ detail.xxdz }}</p>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="8">
            <span>区县：</span>
            <p :title="detail.qx">{{ detail.qx }}</p>
          </el-col>
          <el-col :span="8">
            <span>镇街：</span>
            <p :title="detail.xzjd">{{ detail.xzjd }}</p>
          </el-col>
          <el-col :span="8">
            <span>社区：</span>
            <p :title="detail.szsq">{{ detail.szsq }}</p>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="8">
            <span>高度：</span>
            <p :title="detail.gd">{{ detail.gd }}</p>
          </el-col>
          <el-col :span="8">
            <span>楼层：</span>
            <p :title="'地上' + detail.dslc + '层，地下' + detail.dxlc + '层'">
              地上{{ detail.dslc }}层，地下{{ detail.dxlc }}层
            </p>
          </el-col>
          <el-col :span="8">
            <span>面积：</span>
            <p :title="detail.jzmj">{{ detail.jzmj }}㎡</p>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="8">
            <span>建筑分类：</span>
            <p style="width: 50%;" :title="detail.jzdx">{{ detail.jzdx }}</p>
          </el-col>
          <el-col :span="16">
            <span>使用功能：</span>
            <p :title="detail.jznsygn">{{ detail.jznsygn }}</p>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">
            <span>消防设施：</span>
            <p :title="detail.xffssList">{{ detail.xfssList || '暂无消防设施' }}</p>
          </el-col>
        </el-row>
        <!-- <ul>
          <li>
            <span>建筑名称：</span>
            <p>{{ detail.gcjzmc }}</p>
          </li>
          <li>
            <span>详细地址：</span>
            <p>{{ detail.xxdz }}</p>
          </li>
          <li>
            <span>建成年代：</span>
            <p>{{ detail.jcnd }}</p>
          </li>
          <li>
            <span>区县：</span>
            <p>{{ detail.qx }}</p>
          </li>
          <li>
            <span>街镇：</span>
            <p>{{ detail.xzjd }}</p>
          </li>
          <li>
            <span>重点治理标签：</span>
            <p>{{ detail.jzlb }}</p>
          </li>
          <li>
            <span>建筑内使用功能：</span>
            <p>{{ detail.jznsygn }}</p>
          </li>
        </ul>
        <ul>
          <li>
            <span>建筑楼层：</span>
            <p>{{ detail.dslc }}</p>
          </li>
          <li>
            <span>使用功能：</span>
            <p>{{ detail.jznsygn }}</p>
          </li>
          <li>
            <span>建筑面积：</span>
            <p>{{ detail.jzmj }}m²</p>
          </li>
          <li>
            <span>小区：</span>
            <p>{{ detail.xq }}</p>
          </li>
          <li>
            <span>高度：</span>
            <p>{{ detail.gd }}m</p>
          </li>
          <li>
            <span>建筑分类：</span>
            <p>{{ detail.jzdx }}</p>
          </li>
          <li>
            <span>消防设施：</span>
            <p>{{ xfssList }}</p>
          </li>
        </ul> -->
      </div>
      <!-- <div class="maintenance" v-if="detail">
        <span class="unit-info">维保单位：</span>
        <p class="unit">{{ detail.wbdwzl }}</p>
      </div> -->
    </div>
    <div class="unit-img" v-if="detail">
      <div style="margin-bottom: 5px">建筑附件：</div>
      <div class="accessory-img">
        <!-- <img src="../../../assets/images/Rectangle 3726.png" alt="" />
        <img src="../../../assets/images/Rectangle 3728.png" alt="" />
        <img src="../../../assets/images/Rectangle 3726.png" alt="" />
        <img src="../../../assets/images/Rectangle 3728.png" alt="" />
        <img src="../../../assets/images/Rectangle 3728.png" alt="" /> -->

        <el-image
          style="width: 75px; height: 51px; margin-right: 29px"
          :src="detail.jzzp1"
          :preview-src-list="srcList"
          v-if="detail.jzzp1"
        >
        </el-image>
        <el-image
          style="width: 75px; height: 51px; margin-right: 29px"
          :src="detail.jzzp2"
          :preview-src-list="srcList"
          v-if="detail.jzzp2"
        >
        </el-image>
        <el-image
          style="width: 75px; height: 51px; margin-right: 29px"
          :src="detail.jzzp3"
          :preview-src-list="srcList"
          v-if="detail.jzzp3"
        >
        </el-image>
        <el-image
          style="width: 75px; height: 51px; margin-right: 29px"
          :src="detail.jzzp4"
          :preview-src-list="srcList"
          v-if="detail.jzzp4"
        >
        </el-image>
        <el-image
          style="width: 75px; height: 51px; margin-right: 29px"
          :src="detail.jzzp5"
          :preview-src-list="srcList"
          v-if="detail.jzzp5"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { getXfss } from "@/api/detail.js";

export default {
  data() {
    return {
      srcList: [],
      xfssList: null,
    };
  },
  props: ["detail"],
  methods: {
    getXfsss() {
      getXfss({
        id: this.detail.id,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.data.rows) {
          this.xfssList = res.data.rows.map((p) => p.yhxm).join(",");
        }
      });
    },
    getSygn() {
      if (this.detail.jzdx.indexOf("住宅") >= 0) {
        return "住宅建筑";
      } else if (this.detail.jzdx.indexOf("公共") >= 0) {
        return "公共建筑";
      } else if (this.detail.jzdx.indexOf("工业") >= 0) {
        return "工业建筑";
      }

      return null;
    },
  },
  created() {
    this.srcList = [
      this.detail.jzzp1,
      this.detail.jzzp2,
      this.detail.jzzp3,
      this.detail.jzzp4,
      this.detail.jzzp5,
    ];
    this.getXfsss();
  },
};
</script>

<style lang="less" scoped>
.building {
  padding: 20px 12px;
  font-size: 14px;
}
.building-info {
  // display: flex;
  // letter-spacing: 1px;
  line-height: 25px;

  ul:first-child {
    flex: 1;
  }
  ul:last-child {
    width: 190px;
  }
  li {
    overflow: hidden;
  }
  p {
    display: inline-block;
  }
  span {
    color: #78c3cd;
    font-size: 12px;
  }
}
.maintenance {
  display: flex;
  margin-top: 10px;
}
.unit {
  font-size: 14px;
  width: auto;
}
.unit-info {
  color: #78c3cd;
  font-size: 12px;
}
.unit-img {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  font-size: 12px;
  color: #78c3cd;
  img {
    display: inline-block;
    margin: 10px 5px;
    width: 75px;
    height: 57px;
  }
  .accessory-img {
    display: flex;
  }
}
.title {
  font-family: "Abel";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}
.row {
  .el-col {
    height: 30px;
    overflow: hidden;
    display: flex;
    span {
      min-width: 40px;
    }
    p {
      padding-right: 5px;
    }
  }
}
.g {
  padding: 3px 14px !important;
  background: rgba(0, 213, 255, 0.6);
  border-radius: 3px;
  line-height: 18px;
  box-sizing: border-box;
  height: 24px;
}
</style>
