<template>
  <div :class="prefixCls" :style="getStyle" v-if="showFooter || $slots.footer" style="background: #13265a;">
    <template v-if="!$slots.footer">
      <slot name="insertFooter"></slot>
      <a-button v-bind="cancelButtonProps" @click="handleClose" class="mr-2 form-cancel" v-if="showCancelBtn">
        {{ cancelText }}
      </a-button>
      <slot name="centerFooter"></slot>
      <a-button
        :type="okType"
        @click="handleOk"
        v-bind="okButtonProps"
        class="mr-2 form-ok"
        :loading="confirmLoading"
        v-if="showOkBtn"
      >
        {{ okText }}
      </a-button>
      <slot name="appendFooter"></slot>
    </template>

    <template v-else>
      <slot name="footer"></slot>
    </template>
  </div>
</template>
<script lang="ts">
  import type { CSSProperties } from 'vue';
  import { defineComponent, computed } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';

  import { footerProps } from '../props';

  export default defineComponent({
    name: 'BasicDrawerFooter',
    props: {
      ...footerProps,
      height: {
        type: String,
        default: '60px',
      },
    },
    emits: ['ok', 'close'],
    setup(props, { emit }) {
      const { prefixCls } = useDesign('basic-drawer-footer');

      const getStyle = computed((): CSSProperties => {
        const heightStr = `${props.height}`;
        return {
          height: heightStr,
          lineHeight: `calc(${heightStr} - 1px)`,
        };
      });

      function handleOk() {
        emit('ok');
      }

      function handleClose() {
        emit('close');
      }
      return { handleOk, prefixCls, handleClose, getStyle };
    },
  });
</script>

<style lang="less">
  @prefix-cls: ~'@{namespace}-basic-drawer-footer';
  @footer-height: 60px;
  .@{prefix-cls} {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 24px 0 20px;
    border-top: 1px solid @border-color-base;
    background-color: @component-background;
    text-align: right;

    > * {
      margin-right: 8px;
    }
  }

  .form-cancel {
    font-family: "Noto Sans SC", serif;
    font-size: 14px;
    color: #FFFFFF;
    background-color: rgba(58,98,203,0.8);
    box-shadow: inset 0 0 20px 2px #3A62CB;
    height: 36px;
    border-radius: 6px;
    border: none;
  }

  .form-cancel:hover {
    font-family: "Noto Sans SC", serif;
    font-size: 14px;
    color: #FFFFFF;
    background-color: rgba(58,98,203,0.8);
    box-shadow: inset 0 0 20px 2px #006CC6;
    height: 36px;
    border-radius: 6px;
    border: none;
  }

  .form-ok {
    font-family: "Noto Sans SC", serif;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #3793d4;
    box-shadow: inset 0 0 20px 2px #006CC6;
    height: 36px;
    border-radius: 6px;
    border: none;
  }

  .form-ok:hover {
    font-family: "Noto Sans SC", serif;
    font-size: 14px;
    color: #FFFFFF;
    background-color: rgba(69,175,223,0.8);
    box-shadow: inset 0 0 20px 2px #006CC6;
    height: 36px;
    border-radius: 6px;
    border: none;
  }

</style>
