<template>
    <el-dialog v-model="isShow" class="hc-modal-border" :class="[isTable?'hc-modal-table':'', isSlotExtra?'hc-modal-header-extra':'', padding ? '':'hc-modal-no-padding', ui]" :append-to-body="appendToBody"
               :style="isBgColor?'--el-dialog-bg-color:' + isBgColor:''" :title="title" :show-close="isClose" :width="isWidth" draggable destroy-on-close @closed="dialogClosed" :close-on-click-modal="false">
        <template #header v-if="isSlotHeader || isSlotExtra">
            <slot name='header' v-if="isSlotHeader"/>
            <div role="heading" class="el-dialog__title" v-if="!isSlotHeader && isSlotExtra">{{title}}</div>
            <slot name='extra' v-if="isSlotExtra"/>
        </template>
        <slot></slot>
        <template #footer v-if="footer">
            <slot name='footer' v-if="isSlotFooter"/>
            <div class="lr-dialog-footer" v-else-if="isRowFooter">
                <div class="left">
                    <slot name='leftRowFooter'/>
                </div>
                <div class="right flex">
                    <slot name='rightRowFooter'/>
                </div>
            </div>
            <div class="dialog-footer" :class="isFooterCenter?'text-center':''" v-else>
                <el-button size="large" @click="cancelClick">
                    <HcIcon name="close"/>
                    <span>{{cancelText}}</span>
                </el-button>
                <el-button type="primary" hc-btn :loading="isLoading" @click="saveClick">
                    <HcIcon name="check"/>
                    <span>{{saveText}}</span>
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {ref, watch, useSlots} from "vue";
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: [String,Number],
        default: 'dialog'
    },
    widths: {
        type: String,
        default: '38rem'
    },
    loading: {
        type: Boolean,
        default: false
    },
    footer: {
        type: Boolean,
        default: true
    },
    cancelText: {
        type: [String,Number],
        default: '取消'
    },
    saveText: {
        type: [String,Number],
        default: '提交'
    },
    bgColor: {
        type: [String,Number],
        default: '#f1f5f8'
    },
    isTable: {
        type: Boolean,
        default: false
    },
    isRowFooter: {
        type: Boolean,
        default: false
    },
    isClose: {
        type: Boolean,
        default: true
    },
    padding: {
        type: Boolean,
        default: true
    },
    isFooterCenter: {
        type: Boolean,
        default: false
    },
    appendToBody: {
        type: Boolean,
        default: false
    },
    cancelClose: {
        type: Boolean,
        default: true
    },
})

//变量
const isShow = ref(props.show)
const isWidth = ref(props.widths)
const isLoading = ref(props.loading)
const isBgColor = ref(props.bgColor)

//监听
watch(() => [
    props.show,
    props.widths,
    props.loading,
    props.bgColor,
], ([show, width, loading, bgColor]) => {
    isShow.value = show
    isWidth.value = width
    isLoading.value = loading
    isBgColor.value = bgColor
})

//判断<slot>是否有传值
const slots = useSlots()
const isSlotHeader = ref(!!slots.header);
const isSlotExtra = ref(!!slots.extra);
const isSlotFooter = ref(!!slots.footer);

const emit = defineEmits(['close', 'cancel', 'save'])

//取消
const cancelClick = () => {
    if (props.cancelClose) {
        dialogClosed()
        emit('cancel')
    } else {
        emit('cancel')
    }
}

//关闭
const dialogClosed = () => {
    isShow.value = false
    emit('close', false)
}

//按钮保存
const saveClick = () => {
    emit('save')
}
</script>

<style lang="scss">
.el-overlay-dialog {
    .el-dialog.hc-modal-border.hc-modal-header-extra,
    .el-dialog.hc-modal-header-extra {
        .el-dialog__header {
            position: relative;
            display: flex;
            align-items: center;
            padding: 8px var(--el-dialog-padding-primary);
            .el-dialog__title {
                flex: 1;
            }
            .el-dialog__headerbtn {
                position: relative;
                top: initial;
                right: initial;
                width: auto;
                height: inherit;
                margin-left: 24px;
                font-size: 18px;
            }
        }
    }
    .el-dialog.hc-modal-no-padding .el-dialog__body {
        padding: 0;
    }
}
</style>
