<template>
  <div class="layer" v-drag="layer.show">
    <el-dialog v-model="layer.show" :title="layer.title" :width="layer.width" :top="layer.top" center
      :before-close="close">
      <el-scrollbar :height="layer.height">
        <slot></slot>
      </el-scrollbar>
      <template #footer v-if="layer.showButton">
        <div style="position: relative;">
          <slot name="bottom"></slot>
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button class="default-but" @click="close">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="js">
import { defineComponent } from 'vue'
import drag from '@/directive/drag/index'
export default defineComponent({
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: '',
          showButton: false,
          width: 400,
          top: '8vh',
          height: '70vh'
        }
      },
      required: true
    }
  },
  directives: {
    drag
  },
  setup(props, ctx) {
    function confirm() {
      ctx.emit('confirm')
    }
    function close() {
      props.layer.show = false
      ctx.emit('close')
    }
    return {
      confirm,
      close
    }
  }
})
</script>

<style lang="scss" scoped>
el-dialog {
  background-color: var(--system-page-background);
}

:deep(.el-dialog--center) {
  min-width: 30vw;
}

:deep(.el-dialog__body) {
  max-height: 60vh;
  overflow: auto;
}

:deep() {
  .el-dialog,
  .el-dialog__title,
  .el-input__wrapper,
  .el-textarea__inner,
  .el-upload--picture-card,
  .default-but {
    background-color: var(--system-page-background);
    color: var(--system-page-color);
    border-color: var(--system-page-border-color);
  }
  .el-switch__core {
    background-color: var(--system-page-border-color);
  }
}
</style>