<!--
 * @Author: yangwei
 * @Date: 2023-02-28 15:47:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-09-20 15:17:07
 * @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 [];
        },
      },
      onlyShow: {
        type: Boolean,
        default: true,
      }
    },
    data () {
      return {
        //选中户bsm合集
        hbsmList: [],
        //选中层bsm合集
        cbsmList: [],
        //区分单双击事件的定时器
        time: null,
        // 边框颜色
        borderColor: 'rgb(230, 230, 230)',
        // 申请单元列表数据
        unitIdList: [],
        // 组件标识
        compFlag: Math.random()
      };
    },
    mounted () {
      // 根据申请单元列表数据处理选中户
      if (window.unitData && 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 (!this.onlyShow) {
          // 判断点击的层是否选中
          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) {
        if (!this.onlyShow) {
          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) {
        if (!this.onlyShow) {
          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,
                    bdcdyid: h.dyhbsm,
                    bdcdylx: '7',
                    flag: this.compFlag
                  }
                )
              }
            });
          });
        })
        this.getBsmList(list, this.compFlag)
      },
      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>