<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { isNumber } from '@/utils/is'
import { Close } from '@element-plus/icons-vue'

defineOptions({ name: 'Dialog' })

const slots = useSlots()

const props = defineProps({
  modelValue: propTypes.bool.def(false),
  title: propTypes.string.def('Dialog'),
  fullscreen: propTypes.bool.def(true),
  width: propTypes.oneOfType([String, Number]).def('40%'),
  scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
  maxHeight: propTypes.oneOfType([String, Number]).def('400px')
})

const getBindValue = computed(() => {
  const delArr: string[] = ['fullscreen', 'title', 'maxHeight', 'appendToBody']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})

const isFullscreen = ref(false)

const toggleFull = () => {
  isFullscreen.value = !unref(isFullscreen)
}

const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)

watch(
  () => isFullscreen.value,
  async (val: boolean) => {
    await nextTick()
    if (val) {
      const windowHeight = document.documentElement.offsetHeight
      dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
    } else {
      dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
    }
  },
  {
    immediate: true
  }
)

const dialogStyle = computed(() => {
  return {
    height: unref(dialogHeight)
  }
})
</script>

<template>
  <ElDialog v-bind="getBindValue" :close-on-click-modal="true" :fullscreen="isFullscreen" :width="width"
    destroy-on-close lock-scroll draggable class="dialog" :show-close="false">
    <template #header="{ close }">
      <div class="my-header">
        <div class="my-header-left">
          <slot name="title">
            {{ title }}
          </slot>
        </div>
        <div class="my-header-right">
          <span @click="toggleFull">
            <Icon :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" />
          </span>
          <span @click="close">
            <el-icon>
              <Close />
            </el-icon>
          </span>
        </div>
      </div>
    </template>

    <ElScrollbar v-if="scroll" :style="dialogStyle">
      <slot></slot>
    </ElScrollbar>
    <slot v-else></slot>
    <template v-if="slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </ElDialog>
</template>
<style type="text/css">
.el-dialog__body {
  /* padding: unset; */
}

.dialog .el-card__body {
  padding: 0 20px 20px 0;
}

.dialog .el-dialog__headerbtn {
  top: 0px;
  line-height: 60px;
}

.dialog .el-dialog__headerbtn:hover {
  background-color: #ef6b6b;
}

.dialog .el-dialog__headerbtn:hover .el-dialog__close {
  color: #fff;
}

.dialog .el-dialog__header {
  padding: 0;
  margin: 0
}

.el-tabs--left .el-tabs__item.is-left {
  justify-content: center;
}

.el-tabs--left .el-tabs__header.is-left {
  margin-right: 0;
  width: 100%;
  text-align: center;

}

.el-tabs__nav {
  width: 100%;
  justify-content: center;
  /* justify-content:unset */
}

.el-tabs--left .el-tabs__nav-wrap.is-left {
  margin: 0
}
footer{
  border-top: 1px solid #e4e7ef;
}
</style>

<style lang="scss" scoped>
.left {
  width: 106px;
  float: left
}

.child-tabs {
  border-top: 2px solid #e4e7ef;
  margin-top: -7px;
}



::v-deep .child-tabs .el-tabs__item {
  width: 106px;
  justify-content: center;
}


.right {
  padding: 10px 0 60px;
  border-left: 2px solid #e4e7ee;
  margin-left: -2px;
  float: left;
  width: calc(100% - 120px);
  padding-left: 10px;
  max-height: 600px;
  min-height: 600px;
  overflow: auto;
  position: relative;
}

.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e4e7ee;

  &-left {
    // font-weight: bold;
    // font-size: 1rem;
    padding: 1rem;
    // padding-bottom: 10px
  }

  &-right {
    span {
      width: 55px;
      height: 55px;
      display: inline-block;
      line-height: 55px;
      text-align: center;
      cursor: pointer;
    }

    span:first-child:hover {
      background-color: #f6f6f6;
      // color: white
    }

    span:last-child:hover {
      background-color: #ef6b6b;
      color: white
    }
  }
}

.footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--el-border-color);
  padding: 10px;
  div {
    margin-right: 10px;
  }
}
</style>

