<template>
  <div class="lpbContent-wrap" ref="lpbContentWrap">
    <div class="lpbContent" ref="lpbContent" :style="{ 'height': 'calc(100% - '+ lpbContentHeight +'px)'}">
      <!-- 纵向倒序排列 逻辑幢位于独立幢单元和独立层户的上方 -->
      <div class="ch-zdy-wrap">
        <!-- 幢单元 -->
        <zdy-cpn v-if="lpbData.zdys.length" :zdys="lpbData.zdys" :onlyShow="onlyShow"/>
        <!-- 独立层户 -->
        <ch-cpn v-if="lpbData.cs.length" :ch="lpbData.cs" />
      </div>
      <!-- 逻辑幢 -->
      <ljzs-cpn v-if="lpbData.ljzs.length" :ljzs="lpbData.ljzs" :onlyShow="onlyShow"/>
    </div>
    <!-- 自然幢名称 -->
    <p class="lpb-xmmc" :style="{ 'border-bottom':  onlyShow ? 0 : '1px solid #e6e6e6'}">
      <el-checkbox @change="zdySelectAll($event)" v-if="!onlyShow">{{
        lpbData.xmmc
      }}</el-checkbox>
      <span v-else>{{lpbData.xmmc}}</span> 
    </p>
    <el-button type="primary" class="save-btn" v-if="!onlyShow" @click="saveLpb">保存</el-button>
    <!-- 右键菜单 -->
    <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/lpcx.js";
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,
      changeChoosedObj:this.changeChoosedObj,
      clearChangeChoosedObj:this.clearChangeChoosedObj,
      getBsmList:this.getBsmList
    };
  },
  name: "",
  components: { chCpn, zdyCpn, ljzsCpn },
  props: {
    zrzbsm: {
      type: String,
      default: "",
    },
    lpbParent: {
      type: String,
      default: "isLpb",
    },
    isHb: {
      type: Boolean,
      default: true,
    },
    onlyShow:{
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      lpbData: {
        ljzs: [],
        cs: [],
        zdys: [],
      },
      //户全选标识 由于依赖注入的绑定并不是可响应的,所以传入可监听的对象以获取其属性的响应
      selectAllObj: {
        selectAll: false,
      },
      //层户右键菜单显隐
      lpbChVisible: false,
      //右键菜单定位位置
      lpbChLeft: 100,
      lpbChTop: 100,
      // 改变户选中状态
      changeChoosedObj:{
        bsms:[],
        color:''
      },
      // 选中户bsm合集
      bsmList:[]
    };
  },
  mounted() {
    this.getLpb(this.zrzbsm);
		window.lpbContent = this;
  },
  methods: {
    /**
     * @description: 获取当前楼盘表选中户信息
     * @param {Array} bsmList
     * @author: renchao
     */
    getBsmList(bsmList){
      this.bsmList = bsmList;
    },
    /**
     * @description: 保存当前楼盘表
     * @author: renchao
     */ 
    saveLpb(){
      // todo 调用保存接口 传入参数待定
      console.log(this.bsmList,'this.bsmList');
      // 保存成功后关闭弹框
      this.$popupCacel()
    },
    // 改变户选中状态
    /**
     * @description: 改变户选中状态
     * @param {*} bsms
     * @param {*} color
     * @author: renchao
     */
    changeChoosed(bsms, color){
      this.changeChoosedObj.bsms = bsms;
      this.changeChoosedObj.color = color;
    },
    /**
     * @description: clearChangeChoosedObj
     * @author: renchao
     */
    clearChangeChoosedObj(){
      this.changeChoosedObj.bsms = [];
    },
    //全选户
    /**
     * @description: 全选户
     * @param {*} val
     * @author: renchao
     */
    zdySelectAll(val) {
      this.selectAllObj.selectAll = val;
    },
    //获取楼盘表数据
    /**
     * @description: 获取楼盘表数据
     * @param {*} zrzbsm
     * @param {*} scyclx
     * @param {*} actual
     * @author: renchao
     */
    getLpb(zrzbsm, scyclx, actual) {
      getLpb(zrzbsm, scyclx).then((res) => {
        if (res.code == 200) {
          res.result.lpb.ljzs = res.result.lpb.ljzs.sort(this.compare("place"));
          this.lpbData = res.result.lpb == null ? this.lpbData : res.result.lpb;
          //   this.$nextTick(() => {
          //     //渲染楼盘表
          //     this.dataChange();
          //   });
          console.log(this.lpbData, "this.lpbData");
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    //户右键点击事件
    /**
     * @description: 户右键点击事件
     * @param {*} e
     * @param {*} item
     * @param {*} type
     * @author: renchao
     */
    openMenu(e, item, type) {
      this.lpbChLeft = e.pageX - 96;
      this.lpbChTop = e.pageY - 23;
      // this.lpbChVisible = true;
    },
    //关闭户右键菜单
    /**
     * @description: 关闭户右键菜单
     * @author: renchao
     */
    closeMenu() {
      this.lpbChVisible = false;
    },
    //右键菜单点击
    /**
     * @description: 右键菜单点击
     * @author: renchao
     */
    menuClick() {
      this.closeMenu();
    },
    /**
     * @description: compare
     * @param {*} property
     * @author: renchao
     */
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
  },
  computed:{
    lpbContentHeight(){
      return this.onlyShow ? 36 : 76
    }
  },
  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%;
    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;
  }
  .save-btn{
    display: block;
    margin: 5px auto;
  }
  // 自定义右键菜单样式
  .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>