<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 chCpn from "./ch.vue";
  import zdyCpn from "./zdys.vue";
  import ljzsCpn from "./ljzs.vue";
  import { getLpb } from "@/api/lpcx.js";
  import { startBusinessFlow, choiceBdcdy, againAddSldy } 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 () {
        if (this.bsmList.length == 0) {
          this.$message.error("请至少选择一条数据");
          return;
        }
        this.loading = true;
        store.dispatch('user/reMenuRefresh', false)
        againAddSldy({
          bsmSqyw: this.sqywInfo.bsmSqyw,
          bsmSlsq: this.sqywInfo.bsmSlsq,
          bdcdysz: this.bsmList,
          sjlx: "houses"
        }).then((res) => {
          this.loading = false
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            })
            store.dispatch('user/reMenuRefresh', true)
            if (!this.isJump) {
              this.jump(res.result, this.sqywInfo.djywbm)
            }
            this.$popupCacel();
          } 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
        })
        // 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>