<!--
 * @Author: yangwei
 * @Date: 2023-02-28 15:47:12
 * @LastEditors: yangwei
 * @LastEditTime: 2023-07-21 14:39:12
 * @FilePath: \bdcdj-web\src\views\lpb\lpbContent\ch.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
  <div class="ch-wrap">
    <table
      class="chTable"
      ref="ch"
      border="1"
      cellspacing="0"
      cellpadding="0"
      v-show="ch.length"
    >
      <tr v-for="(cs, csIndex) in ch" :key="csIndex">
        <!-- 显示层数 -->
        <td
          class="floor"
          ref="cBsm"
          @contextmenu.prevent="openMenu($event, cs, 'c')"
          @click="handleClickC($event, cs)"
        >
          {{ cs.sjc }}层
        </td>
        <!-- 显示户 -->
        <td
          v-for="(hs, hsIndex) in cs.hs"
          :rowspan="hs.sjcs"
          :colspan="hs.sjhs"
          :data-bsm="hs.bsm"
          :data-qszt="hs.qszt"
          ref="hBsm"
          :key="hsIndex"
          :style="{'border-color': borderColor}"
          :class="hs.select ? 'tdSelect' : ''"
          @click="handleClickH($event.target, hs.bsm, hs)"
          @dblclick="dbclick(hs.bsm)"
          @contextmenu.prevent="openMenu($event, hs, 'h')"
        >
          {{ hs.shbw }}
          <span @click.stop="" class="hqszt lin" v-show="hs.qszt == '0'"
            >临</span
          >
          <span @click.stop="" class="hqszt zheng" v-show="hs.qszt == '1'"
            >正</span
          >
          <span @click.stop="" class="hqszt xian" v-show="hs.qszt == '2'"
            >现</span
          >
          <ul @click.stop="hDyztClick($event, hs.bsm, hs)" class="dyzt">
            <li style="background-color: #6edee1" v-show="hs.qqzt == '1'">
              确
            </li>
            <li style="background-color: #8adc88" v-show="hs.bazt == '1'">
              备
            </li>
            <li style="background-color: #ff8282" v-show="hs.dyzt == '1'">
              抵
            </li>
            <li style="background-color: #d7cecf" v-show="hs.cfzt == '1'">
              查
            </li>
            <li style="background-color: #d4a3eb" v-show="hs.yyzt == '1'">
              异
            </li>
            <li style="background-color: #a5a3fb" v-show="hs.xzzt == '1'">
              限
            </li>
          </ul>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "BdcdjWebCh",
  inject: {
    openMenu:{value:'openMenu',default:null},
    selectAll:{value:'selectAll',default:null},
    changeChoosedObj:{value:'changeChoosedObj',default:null},
    clearChangeChoosedObj:{value:'clearChangeChoosedObj',default:null},
    getBsmList:{value:'getBsmList',default:null}
  },
  props: {
    ch: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      //选中户bsm合集
      hbsmList: [],
      //选中层bsm合集
      cbsmList: [],
      //区分单双击事件的定时器
      time: null,
      // 边框颜色
      borderColor:'rgb(230, 230, 230)',
      // 申请单元列表数据
      unitIdList:[]
    };
  },
  mounted() {
    // 根据申请单元列表数据处理选中户
    if(window.unitData.length){
      window.unitData.forEach(e => {
        this.unitIdList.push(e.bdcdyid) 
      })
      this.ch.forEach((c) => {
        c.hs.forEach((h) => {
          if (h.dyhbsm.indexOf(this.unitIdList) > -1) {
            h.select = true;
            // 使用hbsmList时，需要去重
            this.hbsmList.push(h.bsm)
          }
        });
      });
    }
  },
  methods: {
    // 层选中事件
    /**
     * @description: 层选中事件
     * @param {*} e
     * @param {*} item
     * @author: renchao
     */
    handleClickC(e, item) {
      // 判断点击的层是否选中
      if (e.target.className.indexOf("tdSelect") == -1) {
        //未选中→选中
        item.hs.forEach((h) => {
          //加边框
          e.target.className += " tdSelect"; 
          h.select = true;
          // 使用hbsmList时，需要去重
          this.hbsmList.push(h.bsm)
        });
      } else {
        //选中→未选中
        item.hs.forEach((h) => {
          e.target.className = "floor";
          h.select = false;
          this.hbsmList = this.hbsmList.filter((i) => i != h.bsm);
        });
      }
    },
    //户单击事件
    /**
     * @description: 户单击事件
     * @param {*} e
     * @param {*} bsm
     * @param {*} hs
     * @author: renchao
     */
    handleClickH(e, bsm, hs) {
      let self = this;
      // 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
      clearTimeout(self.time);
      self.time = setTimeout(() => {
        // this.closeMenu();
        //判断点击的户是否选中
        if (!hs.select) {
          //未选中→选中
          //加边框
          hs.select = true;
          // 将户bsm放进hbsmList
          self.hbsmList.push(bsm); 
        } else {
          //选中→未选中
          hs.select = false;
          self.hbsmList = self.hbsmList.filter((i) => i != bsm);
        }
        //更新当前选中户数据
        this.$forceUpdate();
      }, 200);
    },
    // 户单元状态点击事件
    /**
     * @description: 户单元状态点击事件
     * @param {*} e
     * @param {*} bsm
     * @param {*} hs
     * @author: renchao
     */
    hDyztClick(e, bsm, hs) {
      this.handleClickH(e.target.parentNode, bsm, hs);
    },
    //户双击事件
    /**
     * @description: 户双击事件
     * @param {*} bsm
     * @author: renchao
     */
    dbclick(bsm) {
      // clearTimeout(this.time);
    },
    //幢单元全选/反选
    /**
     * @description: 幢单元全选/反选
     * @param {*} val
     * @param {*} flag
     * @author: renchao
     */
    zdySelectAll(val,flag) {
      // 手动点击全部取消选中
      !flag &&  this.clearChangeChoosedObj()
      this.ch.forEach((c) => {
        c.hs.forEach((h) => {
          if (val) {
            h.select = true;
            // 使用hbsmList时，需要去重
            this.hbsmList.push(h.bsm)
          } else {
            h.select = false;
            this.borderColor = 'rgb(230, 230, 230)'
            this.hbsmList = []
          }
        });
      });
      this.$refs.hBsm && this.$refs.hBsm.forEach((item) => {
        // item.style.borderColor = this.borderColor
        item.style.backgroundColor =  '#fff';
        // item.style.border = `1px solid ${this.borderColor}`
      });
    },
    //清除选中
    clearChoosed(){
      //清除选中户
      this.zdySelectAll(false)
      //清除选中层
      this.cbsmList = [];
      this.$refs.cBsm && this.$refs.cBsm.forEach((item)=>{
        item.className = 'floor'
      })
    },
  },
  watch: {
    selectAll: {
      handler(val) {
        this.zdySelectAll(val.selectAll);
        val.cancelChoosed && this.clearChoosed()
      },
      immediate: true,
      deep: true,
    },
    hbsmList(val){
      let list = []
      val.length && val.forEach((i)=>{
        this.ch.forEach((c) => {
        c.hs.forEach((h) => {
          if (i == h.bsm) {
            list.push(
              {
                bdcdyh:h.bdcdyh,
                bsm:h.bsm,
                dyhbsm:h.dyhbsm
              }
            )
          }
        });
      });
      })
      this.getBsmList(list)
    },
    changeChoosedObj: {
      handler(val) {
        this.borderColor = 'rgb(230, 230, 230)';
        if (val.bsms.length) {
          //清除选中户
          this.zdySelectAll(false,true)
          this.$refs.hBsm.forEach((item) => {
            val.bsms.forEach((i,ind) => {
              if (item.dataset.bsm == i) {
                if (ind == 0) {
                  //定位到第一个户所在位置
                  window.lpbContent.$refs.lpbContent.scrollTop = item.offsetTop;
                  window.lpbContent.$refs.lpbContent.scrollLeft = item.offsetLeft;
                }
                // item.style.border = '1px solid '+ val.color;
                // 背景色高亮
                item.style.backgroundColor =  val.color;
              }
            });
          });
        }
      },
      immediate: true,
      deep: true,
    }
  },
};
</script>

<style lang="scss" scoped>
.ch-wrap {
  display: flex;
  flex-direction: column-reverse;
  .chTable {
    // margin-left: -1px;
    border-color: #e4ebf4 !important;
    border-collapse: collapse;
    border-spacing: 0;
    // position: relative;
    tr {
      .floor {
        min-width: 56px;
        background: #e8f2ff;
        border: 1px solid #acbae8;
      }
      &:first-child {
        .floor {
          border-radius: 4px 0px 0px 1px;
        }
      }
      td {
        min-width: 138px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        cursor: pointer;
        position: relative;
        .hqszt {
          display: inline-block;
          width: 16px;
          height: 16px;
          font-size: 12px;
          line-height: 16px;
          position: absolute;
          left: 6px;
          top: 6px;
          border: 1px solid;
          border-radius: 3px 0px 3px 0px;
        }
        .lin {
          color: #f7b500;
          border-color: #f7b500;
        }
        .zheng {
          color: #1ad6e1;
          border-color: #1ad6e1;
        }
        .xian {
          color: #45aefd;
          border-color: #45aefd;
        }
        .dyzt {
          user-select: none;
          width: 138px;
          height: 18px;
          position: absolute;
          bottom: 28px;
          box-sizing: border-box;
          padding: 0 6px;
          li {
            display: inline-block;
            width: 18px;
            height: 18px;
            font-size: 12px;
            line-height: 18px;
            color: #ffffff;
            border: 1px solid;
            border-radius: 9px;
          }
        }
      }
      .tdSelect {
        border: 1px solid ;
        border-color: #5A78DE !important;
        background-image: url("./images/tdSelect.png");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 30px;
      }
      .hasBorder {
        border-width: 1px;
        border-style: solid;
      }
    }
  }
}
</style>