<template>
  <div class="modal-wrapper">
    <a-modal
      v-model:visible="dialogVisable"
      :title="null"
      :footer="null"
      draggable="true"
      :wrapClassName="wrapClassName"
      :destroyOnClose="true"
      class="dialogClass"
      :centered="true"
      :width="width"
      :closable="false"
      :maskClosable="false"
      :mask="false"
    >
      <div class="dialog-header" ref="domRef" @mousedown="domRefMousedown">
        <span class="title"
          >{{ title }}
          <!-- 天气预报下拉框 -->
          <span v-if="isSelectAll">
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                城市切换
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="tabWeather(value, key)" v-for="(value, key) in selectAll" :key="key">
                    <a href="javascript:;">{{ key }}</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </span>
        </span>

        <span :class="wrapClassName === 'wrap-power wrap-power-min' ? 'switch switch-max' : 'switch switch-min'" @click="sizeChangeClick()"></span>
        <span class="switchClose" @click="switchCloseClick"></span>
      </div>
      <div :style="{ height: innerHeight + 'px' }" :class="wrapClassName === 'wrap-power wrap-power-min' ? 'dialog-content' : 'dialog-content-big'">
        <slot></slot>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted, watch, ref, unref } from 'vue';
import '/@/utils/screen/drag.js';
import $ from 'jquery';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import draggable from 'draggable';
import eventBus from '/@/utils/eventBus';
import { DownOutlined } from '@ant-design/icons-vue';
const props = {
  top: { type: Number, default: 20 },
  left: { type: Number, default: 48 },
  height: { type: Number, default: 400 },
  width: { type: String, default: 600 },
  dialogVisable: { type: Boolean, default: false },
  title: { type: String, default: '' },
  /**
   * 工程背景弹窗  dialogClass-gc   ,其他背景dialogClass-qt
   */
  dialogClass: { type: String, default: 'dialogClass-gc' },
  /**
   * 下拉选择数据
   */
  selectAll: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isSelectAll: { type: Boolean, default: false },
  resettingName: { type: String, default: '' },
};
export default defineComponent({
  components: {
    DownOutlined,
  },
  props,
  emits: ['visible-change'],
  setup(props, { emit }) {
    const data = reactive({
      top: props.top,
      left: props.left,
      height: props.height,
      dialogHeigth: props.height + 'px',
      width: props.width,
      visible: props.dialogVisable,
      title: props.title,
      selectAll: props.selectAll,
      isSelectAll: props.isSelectAll,
      /**鼠标拖动控制*/
      startPosition: {
        x: 0,
        y: 0,
        offsetX: 0,
        offsetY: 0,
        isMovedown: false,
      },
    });
    const elementRef = ref(null); // 组件中需要拖拽的元素的引用
    //弹开窗口类
    const wrapClassName = ref('wrap-power wrap-power-min');
    const domRef = ref(null);
    watch(
      () => props.dialogVisable,
      () => {
        data.visible = true;
        if (props.dialogVisable && data.isSelectAll) {
          // 获取可视窗高度
          setTimeout(() => {
            // switchCloseClick();
            const doc = document.querySelector('.dialogClass');
            doc.style.left = '0px';
            doc.style.top = '60px';
            data.width = '100%';
            data.dialogHeigth = window.innerHeight - 110 + 'px';
            innerHeight.value = window.innerHeight - 110;
            doc.style.position = 'absolute';
          }, 0);
        }
      }
    );
    watch(
      () => data.visible,
      (value) => {
        if (!value) {
          wrapClassName.value = 'wrap-power wrap-power-min';
          data.width = props.width;
          if (window.map) {
            TFMapUitl.clearPointLocation_list(window.map);
          }
        } else {
          setTimeout(() => {
            const modalWrapper = document.querySelector('.dialogClass');
            const dragHandle = document.querySelector('.dialog-header');
            const draggableInstance = new draggable(modalWrapper, {
              handle: dragHandle,
            });
          }, 2000);
        }
      }
    );
    watch([() => props.title, () => props.selectAll, () => props.isSelectAll], (value) => {
      data.title = value[0];
      data.selectAll = value[1];
      data.isSelectAll = value[2];
    });

    const dialogHeigth = window.innerHeight + 'px';
    let innerHeight = ref(props.height);
    watch(innerHeight, (newValue, oldValue) => {
      eventBus.emit('progressHeight', newValue);
    });
    /**
     * 尺寸改变函数
     */
    const sizeChangeClick = () => {
      const doc = document.querySelector('.dialogClass');
      console.log(doc);
      // 点击之后触发页面事件
      if (props.resettingName != '') {
        eventBus.emit('weatherReset');
      }
      // 放大事件
      if (wrapClassName.value === 'wrap-power wrap-power-min') {
        //控制高度
        data.dialogHeigth = window.innerHeight + 'px';
        console.log('高度改变', data.dialogHeigth);
        innerHeight.value = window.innerHeight;
        //修改类名
        wrapClassName.value = 'full-modal wrap-power wrap-power-big';
        setTimeout(() => {
          data.left = '0px';
          data.top = '0px';
          data.width = '100%';
          doc.style.left = '0px';
          doc.style.top = '0px';
        }, 0);
        //控制宽度
      } else {
        // 缩小事件
        wrapClassName.value = 'wrap-power wrap-power-min';
        data.width = props.width;
        innerHeight.value = props.height;
        if (props.dialogVisable && data.isSelectAll) {
          setTimeout(() => {
            doc.style.left = '0px';
            doc.style.top = '60px';
            doc.style.position = 'absolute';
          }, 0);
        }
      }
    };
    /**
     * 关闭
     */
    const switchCloseClick = () => {
      if (wrapClassName.value === 'wrap-power wrap-power-min') {
      } else {
        wrapClassName.value = 'wrap-power wrap-power-min';
        data.width = props.width;
        innerHeight.value = props.height;
      }
      emit('visible-change', false);
      // data.visible = false;
      wrapClassName.value = 'wrap-power wrap-power-min';
      data.width = props.width;
    };
    computed(() => {});
    const domRefMousedown = (e) => {
      data.startPosition.x = e.pageX;
      data.startPosition.y = e.pageY;
      data.startPosition.offsetX = e.offsetX;
      data.startPosition.offsetY = e.offsetY;
      data.startPosition.isMovedown = true;
    };
    const addEventListener = () => {
      document.body.addEventListener('mousemove', (e) => {
        if (data.startPosition.isMovedown) {
          if (
            e.x - data.startPosition.x > 10 ||
            e.y - data.startPosition.y > 10 ||
            e.x - data.startPosition.x < -10 ||
            e.y - data.startPosition.y < -10
          ) {
            let w = $('.ant-modal-content').width();
            let h = $('.ant-modal-content').height();
            $('.ant-modal-content').css({
              left: e.pageX - data.startPosition.offsetX - (document.body.clientWidth - w) / 2 + 'px',
              top: e.pageY - (document.body.clientHeight - h) / 2 + 'px',
            });
          }
        }
      });
      document.body.addEventListener('mouseup', (e) => {
        data.startPosition.isMovedown = false;
      });
    };
    const tabWeather = (item, key) => {
      // item.weatherDataAll = data.SelectAll;
      // console.log(item);

      eventBus.emit('weatherClick', {
        weatherDataAll: data.selectAll,
        weatherData: item,
        key,
      });
    };
    const drag = (wrap: any) => {
      console.log('wrapwrapwrapwrapwrapwrap2222222222', wrap);
      if (!wrap) return;
      wrap.setAttribute('data-drag', unref(true));
      const dialogHeaderEl = wrap.querySelector('.ant-modal-header');
      const dragDom = wrap.querySelector('.ant-modal');

      if (!dialogHeaderEl || !dragDom || !unref(true)) return;

      dialogHeaderEl.style.cursor = 'move';

      dialogHeaderEl.onmousedown = (e: any) => {
        if (!e) return;
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX;
        const disY = e.clientY;
        const screenWidth = document.body.clientWidth; // body当前宽度
        const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)

        const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
        const dragDomheight = dragDom.offsetHeight; // 对话框高度

        const minDragDomLeft = dragDom.offsetLeft;

        const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
        const minDragDomTop = dragDom.offsetTop;
        const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
        // 获取到的值带px 正则匹配替换
        const domLeft = getStyle(dragDom, 'left');
        const domTop = getStyle(dragDom, 'top');
        let styL = +domLeft;
        let styT = +domTop;

        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (domLeft.includes('%')) {
          styL = +document.body.clientWidth * (+domLeft.replace(/%/g, '') / 100);
          styT = +document.body.clientHeight * (+domTop.replace(/%/g, '') / 100);
        } else {
          styL = +domLeft.replace(/px/g, '');
          styT = +domTop.replace(/px/g, '');
        }

        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          let left = e.clientX - disX;
          let top = e.clientY - disY;

          // 边界处理
          if (-left > minDragDomLeft) {
            left = -minDragDomLeft;
          } else if (left > maxDragDomLeft) {
            left = maxDragDomLeft;
          }

          if (-top > minDragDomTop) {
            top = -minDragDomTop;
          } else if (top > maxDragDomTop) {
            top = maxDragDomTop;
          }

          // 移动当前元素
          dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
        };

        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    };
    const getStyle = (dom: any, attr: any) => {
      // alert(1);
      return getComputedStyle(dom)[attr];
    };
    onMounted(() => {
      // const modalWrapper = document.querySelector('.' + wrapClassName.value);
    });
    return {
      getStyle,
      drag,
      elementRef,
      domRef,
      ...toRefs(data),
      wrapClassName,
      switchCloseClick,
      sizeChangeClick,
      dialogHeigth,
      domRefMousedown,
      addEventListener,
      innerHeight,
      tabWeather,
    };
  },
});
</script>
<style lang="less" scoped>
.wrap-power {
  .dialog-header {
    // height: 50px;
    display: flex;
    // height: 30px;
    // line-height: 30px;
    width: 100%;
    // padding: 0 0 0 30px;
    // margin-bottom: 10px;
    justify-content: center;
    align-items: center;
    .title {
      display: flex;
      height: 30px;
      width: calc(100% - 50px);
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-style: italic;
      color: #ffffff;
    }
    .switch {
      display: flex;
      // height: 26px;
      // width: 25px;
      height: 20px;
      width: 20px;
      margin: 5px 5px 0 0;
      cursor: pointer;
    }
    .switch-max {
      background: url('/@/assets/images/dialog/open.png');
      background-size: 100% 100%;
    }

    .switch-min {
      background: url('/@/assets/images/dialog/pickup.png');
      background-size: 100% 100%;
    }
    .switchClose {
      display: flex;
      height: 20px;
      width: 20px;
      margin-top: 5px;
      background: url('/@/assets/images/dialog/close.png');
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
}

.wrap-power-min {
  height: calc(100% - 40px);
  .dialog-header {
    height: 50px;
    // line-height: 34px;
    padding: 6px 0px 0 30px;
    .title {
      display: flex;
      // height: 50px;
      width: calc(100% - 80px);
    }
    .switch {
      margin: 8px 6px 0 0;
    }
    .switchClose {
      margin-top: 8px;
    }
  }
}

.wrap-power-big {
  height: calc(100% - 40px);
  .dialog-header {
    height: 50px;
    // line-height: 50px;
    padding: 8px 0 0 10px;
    .title {
      // height: 50px;
      // line-height: 50px;
      font-size: 18px;
      margin-left: 51px;
    }
    .switch {
      margin: 0px 8px 0 0;
    }

    .switchClose {
      margin-top: 0px;
      margin-right: 22px;
    }
  }
}

.dialog-content {
  position: relative;
  // height: 100%;
  min-height: 600px;
  // max-height: 700px;
  width: calc(100% - 20px);
  // padding: 0px 20px 10px 20px;
  overflow: hidden;
  margin-left: 10px;
}

.dialog-content-big {
  position: relative;
  height: calc(100% - 60px);
  width: calc(100% - 20px);
  // padding: 10px 20px;
  padding: 0px 20px 10px 20px;
  overflow: hidden;
}
// body .ant-modal-root .ant-modal-wrap
// ::v-deep .ant-modal-wrap{
//   pointer-events: none !important;

// }
// /deep/ .ant-modal-wrap{
//   pointer-events: none !important;

// }

// ::v-deep .ant-modal-mask{
//   pointer-events: none;

// }
.ant-dropdown-link {
  margin-left: 20px;
  color: #21a3e5 !important;
}
</style>
