<template>
  <div class="g-cnt">
    <el-card class="m-tb">
      <h2>下级平台使用进度汇总</h2>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="tb"
        :max-height="maxTableHeight"
      >
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column prop="orgName" label="所属组织"> </el-table-column>
        <el-table-column prop="usingCommunityNum" label="开通平台社区数">
        </el-table-column>
        <el-table-column prop="userTotal" label="人口总数"></el-table-column>
        <el-table-column
          prop="czUserTotal"
          label="常住人口总数"
        ></el-table-column>
        <el-table-column
          prop="ldUserTotal"
          label="流动人口总数"
        ></el-table-column>
        <el-table-column prop="houseTotal" label="房屋总数"></el-table-column>
        <el-table-column
          prop="zzHouseTotal"
          label="自住房屋总数"
        ></el-table-column>
        <el-table-column
          prop="czHouseTotal"
          label="出租房屋总数"
        ></el-table-column>
        <el-table-column
          prop="xzHouseTotal"
          label="闲置房屋总数"
        ></el-table-column>
      </el-table>
    </el-card>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="displayedDetail"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="开放社区数"
      width="850px"
      top="5vh"
      @closed="displayedDetail = false"
    >
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";

export default {
  name: "renFangTongJi",
  components: {},
  data() {
    return {
      displayedDetail: false,
      tableData: [],

      orgId: "",
      orgType: "",
    };
  },
  computed: {
    maxTableHeight() {
      return this.clientHeight - 450;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    orgId() {
      this.getTableData();
    },
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      const url = "/gov/org/house/subuserhouselist";

      const { data, code, msg } = await requestPost(url, {
        orgId: this.orgId,
        orgType: this.orgType,
      });

      if (code === 0) {
        this.tableData = data
          ? data.map((item) => {
              return item;
            })
          : [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/c/config";
@import "@/assets/scss/c/function";
</style>
