<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" :onlyShow="onlyShow"/>
      </div>
      <!-- 逻辑幢 -->
      <ljzs-cpn v-if="lpbData.ljzs.length" :ljzs="lpbData.ljzs" :onlyShow="onlyShow"/>
    </div>
    <!-- 自然幢名称 -->
    <p class="lpb-xmmc" v-if="onlyShow" style="border-bottom: 1px solid #e6e6e6">{{ lpbData.xmmc }}</p>
    <p class="lpb-xmmc" v-else :style="{ 'border-bottom':'1px solid #e6e6e6'}">
      <el-checkbox @change="zdySelectAll($event)">{{
        lpbData.xmmc
      }}</el-checkbox>
    </p>
    <el-button type="primary" class="save-btn" v-if="!onlyShow && showSave" @click="saveLpb">保存</el-button>
    <el-button type="primary" class="save-btn" v-if="!onlyShow && !showSave" @click="submitForm" :loading="loading">发起申请</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";
import { startBusinessFlow, choiceBdcdy } from "@/api/workFlow.js";
import jump from "../../ywbl/ywsq/components/mixin/jump";
import store from '@/store/index.js'
import { ywPopupCacel } from "@/utils/popup.js";
export default {
  mixins: [jump],
  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,
    },
    showSave:{
      type: Boolean,
      default: false,
    },
    scyclx: {
      type: Number,
      default: 0,
    },
    sqywInfo: { 
      type: Object,
       default: () => { } 
    },
    isJump: { type: Boolean, default: false },
  },
  data() {
    return {
      lpbData: {
        ljzs: [],
        cs: [],
        zdys: [],
      },
      //户全选标识 由于依赖注入的绑定并不是可响应的,所以传入可监听的对象以获取其属性的响应
      selectAllObj: {
        selectAll: false,
      },
      //层户右键菜单显隐
      lpbChVisible: false,
      //右键菜单定位位置
      lpbChLeft: 100,
      lpbChTop: 100,
      // 改变户选中状态
      changeChoosedObj:{
        bsms:[],
        color:''
      },
      // 选中户bsm合集
      bsmList:[],
      loading: false,
    };
  },
  mounted() {
    this.scyclx ? this.getLpb(this.zrzbsm,this.scyclx):this.getLpb(this.zrzbsm);
		window.lpbContent = this;
  },
  methods: {
    /**
     * @description: 获取当前楼盘表选中户信息
     * @param {Array} bsmList
     * @author: renchao
     */
    getBsmList(bsmList,compFlag){
      // 根据本次传入的组件标识删除之前对应组件标识存入hbsmList的数据
      this.bsmList = this.bsmList.filter((i) => i.flag != compFlag)
      // 合并本次数据
      this.bsmList = this.bsmList.concat([...new Map(bsmList.map(item => [item.bdcdyh, item])).values()]);
      // })
    },
    /**
     * @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) {
          if(scyclx){
            if(res.result.syclx == "1") {
              res.result.lpb.ljzs = res.result.lpb.ljzs.sort(this.compare("place"));
              this.lpbData = res.result.lpb == null ? this.lpbData : res.result.lpb;
            }
          }else{
              res.result.lpb.ljzs = res.result.lpb.ljzs.sort(this.compare("place"));
              this.lpbData = res.result.lpb == null ? this.lpbData : res.result.lpb;
          }
        } 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;
      };
    },
    /**
     * @description: submitForm
     * @author: renchao
     */
    submitForm () {
      if (this.bsmList.length == 0) {
          this.$message.error("请至少选择一条数据");
          return;
        }
      this.loading = true;
      startBusinessFlow({
        bsmSqyw: this.sqywInfo.bsmSqyw,
        bdcdysz: this.bsmList,
      }).then((res) => {
        this.loading = false
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: '发起申请成功',
            type: 'success'
          })
          if (!this.isJump) {
            this.jump(res.result, this.sqywInfo.djywbm)
          } else {
            store.dispatch('user/refreshPage', true);
          }
          this.close()
        } else {
          if (res.result && res.result.length > 0) {
            this.$popup("申请错误明细", "components/ywdialog", { width:'36%', formData:{result: res.result} })
          } else {
            this.$popup("申请错误明细", "components/ywdialog", { width:'36%', formData:{message: res.message} })
          }
        }
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * @description: close
     * @param {*} val
     * @author: renchao
     */
    close(){
      ywPopupCacel()
    },
  },
  computed:{
    lpbContentHeight(){
      return this.onlyShow ? 32 : 76
      // return 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>