<template>
    <el-drawer
        v-model="visible"
        :title="$t(operates.title || 'title')"
        :size="operates.size || '30%'"
        :append-to-body="operates.appendToBody || true"
        :close-on-press-escape="operates.closeOnPressEscape === false ? false : true"
        :close-on-click-modal="operates.wrapperClosable === false ? false : true"
        :custom-class="customClass"
        :modal="operates.modal === false ? false : true"
        :show-close="operates.showClose === false ? false : true"
        :direction="operates.direction || 'rtl'"
        :modal-append-to-body="operates.modalAppendToBody === false ? false : true"
        :destroy-on-close="operates.destroyOnClose || false"
        :withHeader="operates.withHeader === false ? false : true"
        @open="open"
        @opened="opened"
        @close="close"
        @closed="closed"
    >
        <slot />
        <div class="panelFixed">
            <info-panel>
                <span
                    v-if="operates.isShowBtn && operates.operation?.length === 0"
                    class="drawer-footer"
                >
                    <el-button
                        :round="operates.buttonRound"
                        size="small"
                        @click="close"
                    >
                        {{ $t('cancel') }}
                    </el-button>
                    <el-button
                        :type="operates.tableButtonType || 'primary'"
                        :text="operates.text"
                        :round="operates.buttonRound"
                        size="small"
                        @click="confirm"
                    >
                        {{ $t('confirm') }}
                    </el-button>
                </span>
                <span
                    v-if="operates.operation?.length !== 0"
                    class="drawer-footer"
                >
                    <el-button
                        v-for="(item, index) of operates.operation"
                        :key="index"
                        :name="item.label"
                        :type="item.type"
                        :text="item.text"
                        :size="item.size"
                        :icon="item.icon"
                        :loading="item.loading?.()"
                        :disabled="item.disabled?.()"
                        :plain="item.plain"
                        @click="item.method()"
                    >
                        {{
                            $t(item.label())
                        }}
                    </el-button>
                </span>
            </info-panel>
        </div>
    </el-drawer>

</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import infoPanel from '../infoPanel/index.vue'

export default defineComponent({
    name: 'InfoDrawer',
    components: {
        infoPanel
    },
    props: {
        operates: {
            type: Object,
            default: () => {
            }
        },
        isShowDrawer: {
            type: Boolean,
            default: false
        }
    },
    emits: ['openDrawer', 'openedDrawer', 'closeDrawer', 'confirmDrawer', 'closedDrawer'],
    setup (props, ctx) {
        const { operates } = props
        const customClass = computed(() => {
            let className = 'custom-drawer '
            if (operates.customClass) {
                className += operates.customClass
            }
            if (operates.isShowBtn || operates.operation.length) {
                className += ' has-footer'
            }
            return className
        })
        const visible = computed(() => props.isShowDrawer)
        const open = () => {
            ctx.emit('openDrawer')
        }
        const opened = () => {
            ctx.emit('openedDrawer')
        }
        const close = () => {
            ctx.emit('closeDrawer')
        }
        const confirm = () => {
            ctx.emit('confirmDrawer')
        }
        const closed = () => {
            ctx.emit('closedDrawer')
        }
        return {
            open,
            opened,
            close,
            confirm,
            closed,
            visible,
            customClass
        }
    }
})
</script>
<style>
.custom-drawer .el-drawer__header {
    margin-bottom: 1px;
}
.has-footer {
    padding-bottom: 60px;
}
</style>
<style lang="scss" scoped>
.custom-drawer {

    .panelFixed {
        background-color: var(--bg-color);
        z-index: 1;
        position: absolute;
        bottom: 0;
        right: 0px;
        left: 0;
        height: 60px;
        width: 100%;
    }
}
</style>
