<template>
  <div class="lpbContent-wrap" ref="lpbContentWrap">
    <div class="lpbContent">
      <!-- 纵向倒序排列 逻辑幢位于独立幢单元和独立层户的上方 -->
      <div class="ch-zdy-wrap">
        <!-- 幢单元 -->
        <zdy-cpn v-if="lpbData.zdys.length" :zdys="lpbData.zdys" />
        <!-- 独立层户 -->
        <ch-cpn v-if="lpbData.cs.length" :ch="lpbData.cs" />
      </div>
      <!-- 逻辑幢 -->
      <ljzs-cpn v-if="lpbData.ljzs.length" :ljzs="lpbData.ljzs" />
    </div>
    <!-- 自然幢名称 -->
    <p class="lpb-xmmc">
      <el-checkbox @change="zdySelectAll($event)">{{
        lpbData.xmmc
      }}</el-checkbox>
    </p>
    <!-- 右键菜单 -->
    <ul
      v-show="lpbChVisible"
      :style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }"
      class="contextmenu"
    >
      <li @click="menuClick">菜单一</li>
      <li @click="menuClick">菜单二</li>
    </ul>
  </div>
</template>
<script>
import { getLpb } from "@/api/lpb";
import chCpn from "./ch.vue";
import zdyCpn from "./zdys.vue";
import ljzsCpn from "./ljzs.vue";
export default {
  provide() {
    return {
      openMenu: this.openMenu,
      selectAll: this.selectAllObj,
    };
  },
  name: "",
  components: { chCpn, zdyCpn, ljzsCpn },
  props: {
    zrzbsm: {
      type: String,
      default: "",
    },
    lpbParent: {
      type: String,
      default: "isLpb",
    },
    isHb: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      lpbData: {
        ljzs: [],
        cs: [],
        zdys: [],
      },
      //户全选标识 由于依赖注入的绑定并不是可响应的,所以传入可监听的对象以获取其属性的响应
      selectAllObj: {
        selectAll: false,
      },
      //层户右键菜单显隐
      lpbChVisible: false,
      //右键菜单定位位置
      lpbChLeft: 100,
      lpbChTop: 100,
    };
  },
  mounted() {
    this.getLpb("dfc08a0cc6a25188990ea53d1d2c500e");
    // setTimeout(() => {
    //   //让滚动条滚动至最下面 -6是横向滚动条的高度
    //   this.$refs.lpbContent.scrollTop =
    //     this.$refs.lpbContent.scrollHeight -
    //     this.$refs.lpbContent.clientHeight -
    //     6;
    // }, 200);
    // window.lpbContent = this;
  },
  methods: {
    //全选户
    zdySelectAll(val) {
      this.selectAllObj.selectAll = val;
    },
    //获取楼盘表数据
    getLpb(zrzbsm, scyclx, actual) {
      getLpb(zrzbsm, scyclx).then((res) => {
        if (res.code == 200) {
          res.result.ljzs = res.result.ljzs.sort(this.compare("place"));
          this.lpbData = res.result == null ? this.lpbData : res.result;
          //   this.$nextTick(() => {
          //     //渲染楼盘表
          //     this.dataChange();
          //   });
          console.log(this.lpbData, "this.lpbData");
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //户右键点击事件
    openMenu(e, item, type) {
      this.lpbChLeft = e.pageX - 96;
      this.lpbChTop = e.pageY - 23;
      this.lpbChVisible = true;
    },
    //关闭户右键菜单
    closeMenu() {
      this.lpbChVisible = false;
    },
    //右键菜单点击
    menuClick() {
      this.closeMenu();
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
  },
  watch: {
    //户右键菜单显示时，监听到鼠标点击时关闭户右键菜单
    lpbChVisible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.lpbContent-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .lpbContent {
    width: 100%;
    height: calc(100% - 62px);
    position: relative;
    overflow: scroll;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column-reverse;
    box-sizing: border-box;
    padding-top: 20px;
    .ch-zdy-wrap {
      display: flex;
      flex-direction: row;
    }
  }
  .lpb-xmmc {
    border: 0;
    border-top: 1px solid #e6e6e6;
  }
  // 自定义右键菜单样式
  .contextmenu {
    margin: 0;
    background: #fff;
    width: 92px;
    z-index: 3000;
    position: fixed;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      position: relative;
      .childUl {
        display: none;
        position: absolute;
        left: 92px !important;
        top: 0 !important;
        li {
          width: 76px;
        }
      }
    }
    li:hover {
      background: #eee;
      > .childUl {
        display: block;
      }
    }
    .noEdit {
      color: #e6e6e6;
      cursor: not-allowed;
    }
    .noEdit:hover {
      background: #ffffff;
    }
  }
}
</style>