<!--
 * @Author: xiejiang
 * @Date: 2024-11-06 09:53:55
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-02 14:13:30
 * @Description: 抽屉
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->

<template>
  <t-drawer
    v-model:visible="visible"
    :close-btn="true"
    :size="width"
    :footer="true"
    size-draggable
    :close-on-overlay-click="false"
    v-bind="$attrs"
    :on-close="closeDrawer"
  >
    <template #header>
      <div>{{ title }}</div>
    </template>
    <template #body>
      <slot />
    </template>
    <template #footer>
      <div class="flex items-center justify-center">
        <t-button shape="round" variant="outline" @click="closeDrawer" v-if="cancelBtn">取消</t-button>
        <t-button shape="round" @click="confirm" :loading="loading">{{ confirmBtnText }}</t-button>
      </div>
    </template>
  </t-drawer>
</template>

<script setup lang="ts" name="Drawer">
interface DrawerProps {
  drawerVisible: boolean // 双向绑定的值 ==>必传
  title?: string
  loading?: boolean // 确定按钮是否加载中 ==>非必传（默认值false）
  width?: string // 抽屉宽度 ==>非必传（默认值480px）
  confirmBtnText?: string // 确定按钮文字 ==>非必传（默认值取消）
  cancelBtn?: boolean // footer里的取消按钮是否显示
}
const props = withDefaults(defineProps<DrawerProps>(), {
  title: '',
  width: '480px',
  showFooter: true,
  loading: false,
  cancelBtn: true,
  confirmBtnText: '确定'
})
const visible = ref(props.drawerVisible)
const emit = defineEmits(['update:drawerVisible', 'close', 'confirm'])
const closeDrawer = () => {
  emit('update:drawerVisible', false)
  emit('close')
}
const confirm = () => {
  emit('confirm')
}
watch(
  () => props.drawerVisible,
  val => {
    visible.value = val
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:global(.t-drawer__footer) {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:global(.t-drawer__body) {
  padding: 20px 16px;
}
</style>
