<template>
  <VueDragResize
      ref="ref_drag"
      :isActive="false"
      :z="zIndex"
      :layout="{
        width: layout.width,
        height: layout.height,
        left: layout.left,
        top: layout.top
      }"
      :isResizable="isResizable"
      :parentLimitation="true"
      @resizing="resize"
      @dragging="resize"
      @mousedown="setZ"
  >
    <div class="tools-dialog">
      <div class="dialog-head flex-space-center">
        <div class="head-left flex-center">
          <div class="line" />
          <div class="title">
            <slot name="head-title">
              {{title}}
            </slot>
          </div>
        </div>
        <div class="head-right flex-center">
          <slot name="head-right"></slot>
          <el-tooltip effect="light" content="关闭" placement="top-start">
            <img src="../images/tools-dialog-close.svg" class="close __hover" @click="$emit('close')"/>
          </el-tooltip>
        </div>
      </div>
      <div class="dialog-content">
        <div class="content-block">
          <slot></slot>
        </div>
      </div>
    </div>
  </VueDragResize>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref,
    toRefs,
    reactive,
    watch,
    getCurrentInstance,
    ComponentInternalInstance,
    computed, nextTick
  } from "vue";
  import { useStore } from "vuex";
  import { useRouter } from "vue-router";
  import VueDragResize from '@/components/vue-drag-resize/index.vue'

  export default defineComponent({
    name: "",
    components: {
      VueDragResize
    },
    props: {
      title: {default: ''},
      layout: {required: false},
      isResizable: {default: false},
    },
    setup(props, {emit}) {
      const store = useStore();
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
      const state = reactive({
        zIndex: 1
      });
      const resize = (layout) => {
        const obj = <any>{}
        obj.width = layout.width
        obj.height = layout.height
        obj.left = layout.left
        obj.top = layout.top
        emit('update:layout', obj)
      }
      const setZ = () => {
        store.dispatch('homeManagement/LOAD_DRAG_Z').then(z => {
          state.zIndex = z
        })
      }
      onMounted(() => {
        nextTick(() => {
          store.dispatch('homeManagement/LOAD_DRAG_Z').then(z => {
            state.zIndex = z
          })
        })
      })
      return {
        ...toRefs(state),
        resize,
        setZ,
      }
    },
  });
</script>
<style scoped lang="scss">
.tools-dialog{
  width: 100%;
  height: 100%;
  z-index: 3;
  position:relative;
  padding:1px;
  opacity: 0.9;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(45deg,transparent 10px, #68C3FF 10px), linear-gradient(-135deg,transparent 10px,#68C3FF 10px);
  &:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:1px;
    background-image: linear-gradient(45deg,transparent 10px,#101D69 10px),
    linear-gradient(-135deg,transparent 10px,#101D69 10px);
  }
  .dialog-head{
    z-index:2;
    height:42px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(104, 195, 255, .9);
    background-image: linear-gradient(135deg,transparent 10px,#0A46C8 10px),
    linear-gradient(-135deg,transparent 10px,#0A46C8 10px);
  }
}
.tools-dialog,
.tools-dialog:after,
.tools-dialog .dialog-head{
  background-size:51% 100%;
  background-repeat:no-repeat;
  background-position:left top, right top;
}
.head-left{
  .line{
    width: 3px;
    height: 20px;
    background: #68C3FF;
    margin-right: 10px;
  }
  .title{
    font-size: 16px;
    font-weight: 500;
    color: white;
  }
}
.close{
  width: 24px;
  height: 24px;
}
.dialog-content{
  width: 100%;
  height: calc(100% - 42px);
  position: relative;
  z-index: 3;
  padding: 10px;
  .content-block {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
