<!--
 * @Author: yangwei
 * @Date: 2023-02-28 17:25:45
 * @LastEditors: yangwei
 * @LastEditTime: 2023-09-15 14:55:58
 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ljzs.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="ljzs-wrap">
    <div v-for="ljzarr in ljzsCptd" :style="{'margin-bottom': ljzarr.length == 1 ? '44px':'80px'}" :key="ljzarr[0].bsm">
      <!-- 多个同起始层逻辑幢 横向排列  -->
      <div class="ch-zdy-wrap" v-if="ljzarr.length > 1">
        <div v-for="ljz in ljzarr" :key="ljz.ljzmc" class="same-floor-ljz">
          <div
            :class="
              ljz.cs.length ? 'cs-visible ch-zdy-wrap' : 'cs-none ch-zdy-wrap'
            "
          >
            <!-- 逻辑幢名称 -->
            <p class="lpb-xmmc ljz-xmmc">
              <el-checkbox @change="zdySelectAll($event,ljz.bsm)">{{
                ljz.ljzmc
              }}</el-checkbox>
            </p>
            <!-- 独立层户 -->
            <ch-cpn v-if="ljz.cs.length" :ref="ljz.bsm" :ch="ljz.cs" :onlyShow="onlyShow"/>
            <!-- 幢单元 -->
            <zdy-cpn v-if="ljz.zdys.length" :ref="'zdy' + ljz.bsm" :zdys="ljz.zdys" :onlyShow="onlyShow"/>
          </div>
        </div>
      </div>
      <!-- 不同起始层的逻辑幢纵向排列 -->
      <div
        :class="
          ljzarr[0].cs.length ? 'cs-visible ch-zdy-wrap' : 'cs-none ch-zdy-wrap'
        "
        v-else
      >
        <!-- 逻辑幢名称 -->
        <p class="lpb-xmmc ljz-xmmc" v-if="onlyShow">{{ ljzarr[0].ljzmc }}</p>
        <p class="lpb-xmmc ljz-xmmc" v-else>
          <el-checkbox @change="zdySelectAll($event,ljzarr[0].bsm)">{{
            ljzarr[0].ljzmc
          }}</el-checkbox>
        </p>
        <!-- 独立层户 -->
        <ch-cpn v-if="ljzarr[0].cs.length" :ref="ljzarr[0].bsm" :ch="ljzarr[0].cs"  :onlyShow="onlyShow"/>
        <!-- 幢单元 -->
        <zdy-cpn v-if="ljzarr[0].zdys.length" :ref="'zdy' + ljzarr[0].bsm" :zdys="ljzarr[0].zdys" :onlyShow="onlyShow"/>
      </div>
    </div>
  </div>
</template>

<script>
import chCpn from "./ch.vue";
import zdyCpn from "./zdys.vue";
export default {
  name: "BdcdjWebLjzs",
  components: { chCpn, zdyCpn },
  props: {
    ljzs: {
      type: Array,
      default: function () {
        return [];
      },
    },
    onlyShow:{
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
    };
  },
  mounted() {
    console.log(this.ljzsCptd);
  },
  computed: {
    ljzsCptd() {
      let tempArr = [];
      //逻辑幢数据已经按照place从小到大排序
      this.ljzs.forEach((item, index) => {
        //判断当前逻辑幢是否与上一个逻辑幢的起始层数相同，将起始层数相同的逻辑幢放在同一排
        if (index && item.place == this.ljzs[index - 1].place) {
          tempArr[index - 1].push(item);
        } else {
          tempArr[index] = [];
          tempArr[index].push(item);
        }
      });
      //过滤假值
      return tempArr.filter(Boolean)
    },
  },
  methods: {
    /**
     * @description: 逻辑幢全选
     * @param {*} val
     * @param {*} r
     * @return {*}
     */
    zdySelectAll(val,r) {
      // 逻辑幢下的独立层户全选
      this.$refs[r] && this.$refs[r][0].zdySelectAll(val)
      // 逻辑幢下的幢单元全选
      this.$refs['zdy' + r] && this.$refs['zdy' + r][0].selectAll(val)
    }
  },
};
</script>

<style lang="scss">
.ljzs-wrap {
  display: flex;
  flex-direction: column-reverse;
  > div {
    // margin-bottom: 80px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    .ch-zdy-wrap {
      display: flex;
      flex-direction: row-reverse;
      width: fit-content;
      position: relative;
      .same-floor-ljz{
        display: flex;
        flex-direction: row;
        margin-right: 20px;
      }
      .ljz-xmmc {
        position: absolute;
        // width: calc(100% - 4px);
        width: 100%;
        bottom: -34px;
      }
    }
    .cs-none {
      .zdys-wrap > div:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>