<template>
  <div class="unit">
    <!-- 管理单位 -->
    <div>
      <div class="building-info c" v-if="detail" @click="openModal">
        <el-row class="row">
          <el-col :span="24">
            <span>管理形式：</span>
            <p class="g" :title="detail.xfaqglxs">{{ detail.xfaqglxs }}</p>
          </el-col>
        </el-row>
          <el-row class="row">
            <el-col :span="24">
              <span>管理单位：</span>
              <p class="g" :title="gldw.dwmc" v-if="gldw">{{ gldw.dwmc }}</p>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <span>消防安全责任人/电话：</span>
              <p class="g" :title="gldw.xfaqfzr" v-if="gldw">
                {{ gldw.xfaqfzr }}/{{ gldw.xfaqfzrsjh }}
              </p>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <span>消防安全管理人/电话：</span>
              <p class="g" :title="gldw.xfaqgly" v-if="gldw">
                {{ gldw.xfaqgly }}/{{ gldw.xfaqglysjh }}
              </p>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <span>消防安全联系人/电话：</span>
              <p class="g" :title="gldw.xfaqlxrdh" v-if="gldw">
                {{ gldw.xfaqlxrxm }}/{{ gldw.xfaqlxrdh }}
              </p>
            </el-col>
          </el-row>
      </div>

      <div class="building-info" v-if="detail" style="margin-top: 11px">
        <el-row class="row">
          <el-col :span="24">
            <span>维保形式：</span>
            <p class="g" :title="detail.sfywbdw">{{ detail.sfywbdw }}</p>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">
            <span>维保单位名称：</span>
            <p class="g" :title="detail.wbdwzl">{{ detail.wbdwzl }}</p>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">
            <span>负责人/电话：</span>
            <p class="g" :title="detail.wbdwfzr + '/' + detail.wbdwfzrdh">{{ detail.wbdwfzr + '/' + detail.wbdwfzrdh }}</p>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="24">
            <span>联系人/电话：</span>
            <p class="g" :title="detail.wbdwlxr + '/' + detail.wbdwlxrdh">{{ detail.wbdwlxr + '/' + detail.wbdwlxrdh }}</p>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="margin-top: 14px">
      <div class="title">入住单位列表</div>
      <div>
        <div class="row header">
          <span class="idx">序号</span>
          <span class="in_unit">入住单位</span>
          <span class="person">楼层</span>
          <span class="manage">(责任人/管理人)联系方式</span>
        </div>
        <ul class="item">
          <li class="row" v-for="(item, index) in list" :key="index">
            <span class="idx">{{ index + 1 }}</span>
            <span class="in_unit" :title="item.dwmc">{{ item.dwmc }}</span>
            <span class="person">{{ item.rzdwszlc }}层</span>
            <span class="manage"
              >{{ item.xfaqfzr }}/{{ item.xfaqfzrsjh }} <br />
              {{ item.xfaqgly }}/{{ item.xfaqglysjh }}</span
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from "vue-seamless-scroll";
import { getRzdw } from "@/api/detail.js";
export default {
  name: "GementUnit",
  data() {
    return {
      list: [
        // ["国泰艺术中心", "王晓辉", "李小小"],
        // ["人民大礼堂", "李四", "张三"],
        // ["人民大礼堂", "王五", "赵六"],
        // ["花博艺术中心", "张米", "刘小明"],
        // ["人民大礼堂", "王五", "赵六"],
        // ["人民大礼堂", "王五", "赵六"],
        // ["人民大礼堂", "王五", "赵六"],
        // ["人民大礼堂", "王五", "赵六"],
      ],
      gldw: null,
      wbdw: null,
    };
  },
  props: ["detail"],
  components: {
    VueSeamlessScroll,
  },
  computed: {
    classOption() {
      return {
        singleHeight: 29,
      };
    },
  },
  methods: {
    openModal() {
      this.$emit('openModal', { name: 'gldwModal', params: { gcjzmc: this.detail.gcjzmc } });
    },
    getList() {
      getRzdw({
        pageNum: 1,
        pageSize: 10,
        jzid: this.detail.id,
      }).then((res) => {
        console.log(res);
        if (res.data.rows) {
          this.gldw = res.data.rows.find((p) => p.rzxs === "管理单位");
          this.wbdw = res.data.rows.find((p) => p.rzxs === "管理单位");
          this.list = res.data.rows.filter((p) => p.rzxs !== "管理单位");
          console.log(this.list);
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.unit {
  height: 587px;
  padding: 10px 10px;
  .building-info {
    // display: flex;
    // letter-spacing: 1px;
    line-height: 31px;
    padding: 10px 20px;
    background: rgba(0, 213, 255, 0.12);
    ul:first-child {
      flex: 1;
    }
    ul:last-child {
      width: 190px;
    }
    li {
      overflow: hidden;
    }
    p {
      font-size: 14px;
      display: inline-block;
    }
    span {
      color: #78c3cd;
      font-size: 12px;
    }
  }
  .building-info.c {
    cursor: pointer;
  }
}

.title {
  height: 30px;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  background-color: rgba(0, 163, 255, 0.3) !important;
}
.warp {
  height: 85px;
  margin: 0 auto;
  overflow: hidden;
  .item {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
  }
}

.header {
  color: #98dfe9 !important;
  height: 30px !important;
  line-height: 30px !important;
  background-color: rgba(7, 188, 223, 0.8) !important;
  margin-top: 2px; //07BCDF
  font-size: 12px !important;
}

li.row {
  border-bottom: 1px dotted #1d525f;
  box-sizing: border-box;
}

.row,
li.row {
  display: block;
  height: 29px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  // background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  .idx,
  .in_unit,
  .person,
  .manage {
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }
  .manage {
    flex: 0.4 !important;
  }
  .idx {
    flex: 0.1 !important;
  }
  .person {
    flex: 0.1 !important;
  }
  .in_unit {
    flex: 0.4 !important;
  }
}

.item {
  .row {
    height: 50px !important;
  }
}
</style>
