<template>
  <div class="dialog">
    <el-dialog
      class="operate"
      v-model="computedVis"
      :title="title"
      :width="width"
      @close="handleClose"
      :lock-scroll="false"
      :draggable="draggable"
    >
      <template #default>
        <slot></slot>
      </template>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import {computed } from 'vue'
  const props = defineProps({
    overlayBg: {
      type: String,
      default: 'transparent'
    },
    modelValue: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    width: {
      type: [Number, String],
      default: () => 870
    },
    draggable: {
      type: Boolean,
      default: () => false
    }
  })
  const emit = defineEmits(['update:modelValue', 'close'])
  const computedVis = computed({
    get: () => props.modelValue,
    set: (val) => {
      emit('update:modelValue', val)
    }
  })

  function handleClose() {
    emit('close')
  }
</script>

<style lang="scss" scoped>
  .dialog {
    :deep(.el-overlay) {
      background-color: v-bind('props.overlayBg');
    }
    :deep(.el-dialog.operate) {
      padding: 0 !important;
      margin-top: 15vh !important;
      border-radius: 6px;
      .el-dialog__header {
        padding: 0 0 0 20px;
        height: 52px;
        background-color: #f1f3f7;
        line-height: 52px;
        box-sizing: border-box;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom: 1px solid #dddddd;
        .el-dialog__headerbtn {
          width: 52px;
          height: 52px;
        }
      }
      .el-dialog__body {
        padding: 20px 30px 0 30px;
        .download {
          box-sizing: border-box;
          width: 260px;
          height: 40px;
          background-color: rgba(232, 241, 255, 1);
          border-radius: 4px;
          padding: 10px 16px;
          box-sizing: border-box;
          line-height: 20px;
          color: rgba(0, 118, 232, 1);
          cursor: pointer;
        }
      }
      .selectbtn {
        color: #0076e8;
        border-color: #0076e8;
        // cursor: pointer;
        &:hover {
          background-color: #0076e8;
          color: #fff;
        }
      }
      .el-dialog__footer {
        text-align: center;
        padding: 0 0 20px 0;
      }
    }
  }
</style>
