<template>
    <template v-if="!options.isDrawer">
        <el-dialog v-model="isShowDialog"
                   :width="width"
                   destroy-on-close
                   :modal="isShowBg"
                   :show-close="showClose"
                   :modal-class="modalClass"
                   append-to-body
                   :close-on-press-escape="escClose"
                   :close-on-click-modal="clickModalClose"
                   :before-close="close"
                   draggable
                   :fullscreen="fullscreen"
                   class="info-dialog"
                   @open="open">
                   <template
                        #title
                    >
                        <slot name="title" />
                        <div v-if="!options.isCustomTitle"
class="title">
                            {{ $t(title) }}
                            <span v-if="options.secondTitle">({{ $t(options.secondTitle) }})</span>
                        </div>
                    </template>
            <slot v-if="isShowDialog" />
            <template v-if="isShowBtn || (dialogOperates && dialogOperates.length !== 0)"
                      #footer>
                      <span class="footer-left">
                        <slot name="footer" />
                      </span>
                <span v-if="isShowBtn && (!dialogOperates || dialogOperates.length === 0)"
                      class="dialog-footer">
                    <el-button v-if="isCloseLeft"
                               @click="close">
                        {{ $t('cancel') }}
                    </el-button>
                    <el-button type="primary"
                               :loading="loading?.isLoading"
                               @click="confirm">
                        {{ $t('confirm') }}
                    </el-button>
                    <el-button v-if="!isCloseLeft"
                               @click="close">
                        {{ $t('cancel') }}
                    </el-button>
                </span>
                <span
                    v-if="dialogOperates && dialogOperates.length !== 0"
                    class="dialog-footer"
                >
                    <template
                        v-for="(item, index) of dialogOperates"
                        :key="index"
                    >
                        <el-button
                            v-show="handleShow(item)"
                            :type="item.type"
                            :size="item.size"
                            :text="item.text"
                            :icon="item.icon"
                            :disabled="item.disabled?.()"
                            :plain="item.plain"
                            :loading="item.btnLoading?.()"
                            @click="item.method"
                        >
                            {{ $t(item.label?.()) }}
                        </el-button>
                    </template>
                </span>
            </template>
        </el-dialog>
    </template>
    <template v-else>
        <el-drawer
            v-model="isShowDialog"
            :title="$t(title)"
            :size="width || '30%'"
            append-to-body
            :close-on-press-escape="escClose"
            custom-class="info-dialog"
            :modal="isShowBg"
            :close-on-click-modal="!!clickModalClose"
            :show-close="showClose"
            :before-close="close"
            :direction="options.direction || 'rtl'"
            :destroy-on-close="false"
            :with-header="options.withHeader === undefined ? false : options.withHeader"
            class="custom-drawer"
            @close="close"
            @open="open"
        >
            <template
                #title
            >
                <slot name="title" />
                <div v-if="!options.isCustomTitle"
class="title">
                    {{ $t(title) }}
                    <span v-if="options.secondTitle">({{ options.secondTitle }})</span>
                </div>
            </template>
            <slot v-if="isShowDialog" />
            <template v-if="isShowBtn || (dialogOperates && dialogOperates.length !== 0)"
                      #footer>
                <span v-if="isShowBtn && (!dialogOperates || dialogOperates.length === 0)"
                      class="dialog-footer">
                    <el-button v-if="isCloseLeft"
                               @click="close">
                        {{ $t('cancel') }}
                    </el-button>
                    <el-button type="primary"
                               :loading="loading?.isLoading"
                               @click="confirm">
                        {{ $t('confirm') }}
                    </el-button>
                    <el-button v-if="!isCloseLeft"
                               @click="close">
                        {{ $t('cancel') }}
                    </el-button>
                </span>
                <span
                    v-if="dialogOperates && dialogOperates.length !== 0"
                    class="dialog-footer"
                >
                    <template
                        v-for="(item, index) of dialogOperates"
                        :key="index"
                    >
                        <el-button
                            v-show="handleShow(item)"
                            :type="item.type"
                            :size="item.size"
                            :text="item.text"
                            :icon="item.icon"
                            :disabled="item.disabled?.()"
                            :plain="item.plain"
                            :loading="item.btnLoading?.()"
                            @click="item.method"
                        >
                            {{ $t(item.label?.()) }}
                        </el-button>
                    </template>
                </span>
            </template>
        </el-drawer>
    </template>
</template>
<script lang="ts">
import { defineComponent, PropType, toRefs } from 'vue'
import { DialogInterface, OperatesInterface } from './index'

export default defineComponent({
    name: 'InfoDialog',
    props: {
        options: {
            type: Object as PropType<DialogInterface>,
            default: {}
        }
    },
    emits: ['closeDialog', 'confirmDialog', 'open'],
    setup (props, ctx) {
        const {
            title,
            isShowDialog,
            width,
            isShowBg,
            showClose,
            escClose,
            clickModalClose,
            dialogOperates,
            isCloseLeft,
            loading,
            isShowBtn,
            modalClass,
            isCustomTitle,
            secondTitle,
            fullscreen
        } = toRefs(props.options)
        const handleShow = (item: OperatesInterface) => {
            return (typeof item.show === 'undefined') ? true : item.show?.()
        }
        const close = () => {
            ctx.emit('closeDialog')
        }
        const confirm = () => {
            ctx.emit('confirmDialog')
        }
        const open = () => {
            ctx.emit('open')
        }
        return {
            handleShow,
            close,
            confirm,
            title,
            isShowDialog,
            width,
            modalClass,
            isShowBg,
            showClose,
            escClose,
            clickModalClose,
            dialogOperates,
            isCloseLeft,
            loading,
            isShowBtn,
            open,
            fullscreen
        }
    }
})
</script>
<style lang="scss">
@use './index.scss';
</style>
