<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="8">
            <span>使用功能：</span>
            <p :title="detail.jznsygn">{{ detail.jznsygn }}</p>
          </el-col>
          <el-col :span="8">
            <span>建筑年代：</span>
            <p :title="detail.jcnd + '年'">{{ detail.jcnd }}年</p>
          </el-col>
        </el-row>
      </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">
        <div v-for="(file, i) in files" :key="i" class="file">
          <!-- <div class="mask" v-if="file.show">{{ file.name }}</div> -->
          <el-tooltip
            class="item"
            effect="dark"
            :content="file.name"
            placement="top-start"
            v-if="file.name.indexOf('.pdf') < 0"
          >
            <el-image
              style="width: 75px; height: 51px; margin-right: 10px"
              :src="file.url"
              :preview-src-list="srcList"
            >
            </el-image>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="file.name"
            placement="top-start"
            v-else
          >
            <a
              :href="file.url"
              target="_blank"
              style="
                width: 75px;
                height: 51px;
                display: flex;
                margin-right: 10px;
              "
            >
              <img
                src="../../../assets/images/pdf.png"
                style="width: 75px; height: 51px"
              />
            </a>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      srcList: [],
      xfssList: null,
      files: [],
      itemCount: 0,
    };
  },
  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;
    },
    getFiles() {
      getFile({ jzid: this.detail.id, ywid: "" }).then((res) => {
        const files = [];
        if (res.data.data && res.data.data.length > 0) {
          res.data.data.forEach((p) => {
            if (p.fjid) {
              // files.push({
              //   url: `https://zfjg.cq119.gov.cn/api/file/${p.fjid}/open`,
              //   name: p.fjmc,
              // });
            } else {
              files.push({
                url: `http://183.66.101.53:8787/images/${this.detail.id}/${p.fjlj}`,
                name: p.fjmc,
              });
            }
          });
        }
        this.files = files;
        this.srcList = files
          .filter((p) => p.name.indexOf(".pdf") < 0)
          .map((p) => p.url);
      });
    },
  },
  created() {
    this.getXfsss();
    this.getFiles();
  },
};
</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;
    width: 75px;
    height: 57px;
  }
  .accessory-img {
    padding-top: 5px;
    display: flex;
    height: 71px;
    // overflow: hidden;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

::v-deep(.accessory-img .el-carousel) {
  width: 443px;
  overflow: hidden;
}
.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;
}
.roww {
  display: flex;
}
::v-deep(.el-carousel__arrow) {
  display: none !important;
}
.file {
  width: 85px;
  height: 51px;
  position: relative;
  .mask {
    position: absolute;
    width: 75px;
    height: 51px;
    left: 0;
    top: 0;
    background: #333333;
    // opacity: 0.6;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
}
</style>
