<!--
 * @Descripttion: 弹窗扩展组件
 * @version: 2.0
 * @Author: sakuya
 * @Date: 2021年8月27日08:51:52
 * @LastEditors: sakuya
 * @LastEditTime: 2022年5月14日15:13:41
-->

<template>
	<div class="sc-dialog" ref="scDialog">
		<el-dialog ref="dialog" v-model="dialogVisible" v-bind="$attrs" :show-close="false" :before-close="closeDialog" :close-on-click-modal="false">
			<template #header>
				<slot name="header">
					<scTitle class="el-dialog__title">{{ title }}</scTitle>
				</slot>
				<div class="sc-dialog__headerbtn">
					<button v-if="showClose" aria-label="close" type="button" @click="beforeCloseDialog">
						<el-icon class="el-dialog__close"><el-icon-close /></el-icon>
					</button>
				</div>
			</template>
			<div class="sc-dialog__body" v-loading="loading">
				<slot></slot>
			</div>
			<template #footer>
				<slot name="footer"></slot>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	export default {
    	emits: ["beforeClose"],
		props: {
			modelValue: { type: Boolean, default: false },
			title: { type: String, default: "" },
			showClose: { type: Boolean, default: true },
			loading: { type: Boolean, default: false },
      		beforeClose: { type: Boolean, default: false },
		},
		data() {
			return {
				dialogVisible: false
			}
		},
		watch: {
			modelValue(val) {
				this.dialogVisible = val
			}
		},

		mounted() {
			this.dialogVisible = this.modelValue
		},

		methods: {
			beforeCloseDialog() {
				if (this.beforeClose) this.$emit("beforeClose")
				else this.closeDialog()
			},
      
			// 关闭
			closeDialog() {
        		this.dialogVisible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
.sc-dialog:deep(.el-dialog) {
  .el-dialog__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &::after {
      content: "";
      position: absolute;
      left: 20px;
      bottom: -10px;
      width: calc(100% - 40px);
      height: 1px;
      background: var(--el-border-color-light);
    }

    .el-dialog__title {
      line-height: var(--el-dialog-font-line-height);
      font-weight: normal;
    }

    .sc-dialog__headerbtn button {
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
      font-size: var(--el-message-close-size, 16px);
      margin-left: 15px;
      color: var(--el-color-info);

      &:hover .el-dialog__close {
        color: var(--el-color-primary);
      }
    }
  }

  .el-dialog__footer button {
    font-weight: normal;
  }
}
</style>