<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    direction="rtl"
    :size="computedWidth"
    class="global-drawer"
    :wrapper-closable="!showCancel"
    :modal-click-close="false"
  >
    <!-- 头部 -->
    <div class="drawer-header" :style="{ width: computedWidth }">
      <span class="title">{{ title }}</span>
      <!--  <i class="el-icon-close close-btn" @click="close" /> -->
      <svg-icon
        icon-class="simulation-close"
        class="el-icon-close close-btn"
        @click="close"
        style="width: 32px; height: 32px; cursor: pointer"
      />
    </div>

    <!-- 内容区域 -->
    <div class="drawer-content">
      <slot></slot>
    </div>

    <!-- 底部 -->
    <div class="drawer-footer" :style="{ width: computedWidth }">
      <el-button
        v-if="showCancel"
        class="cancel-btn"
        style="background-color: #f2f2f2; color: #333; font-weight: medium"
        @click="handleCancel"
        >{{ cancelText }}</el-button
      >
      <el-button type="primary" @click="handleConfirm">{{
        computedConfirmText
      }}</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'GlobalDrawer',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    visible: {
      type: Boolean,
      required: true
    },
    size: {
      type: [String, Number], // 支持字符串和数字类型
      default: '600px'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: null
    },
    showCancel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 移除设备类型判断，改为使用媒体查询
    }
  },
  computed: {
    computedWidth() {
      // 直接返回size属性，不再根据设备类型判断
      return typeof this.size === 'number' ? `${this.size}px` : this.size
    },
    computedConfirmText() {
      // 如果传入了confirmText，使用传入的值
      if (this.confirmText) {
        return this.confirmText
      }
      // 否则根据showCancel的值返回默认文本
      return this.showCancel ? '确定' : '关闭'
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
      this.$emit('cancel')
    },
    // 防抖函数 - 支持立即执行模式
    debounce(fn, delay = 300, immediate = true) {
      if (this._debounceTimer) {
        clearTimeout(this._debounceTimer)
        this._debounceTimer = null
        return // 如果在延迟期间再次调用，直接返回不执行
      }

      if (immediate) {
        // 立即执行模式：第一次调用立即执行
        fn()
      }

      // 设置延迟期间
      this._debounceTimer = setTimeout(() => {
        this._debounceTimer = null
      }, delay)
    },
    // 添加防抖处理的确认方法
    handleConfirm() {
      this.debounce(
        () => {
          this.$emit('confirm')
        },
        300,
        true
      )
    },
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang="scss">
.global-drawer {
  --header-height: 70px;
  --footer-height: 70px;
}

.drawer-header {
  position: fixed;
  top: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid #f2f2f2;
  background: white;
  z-index: 2000;
}
.title {
  text-align: center;
  color: #333;
  margin: 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
}

.drawer-content {
  height: calc(100vh - var(--header-height) - var(--footer-height));
  overflow-y: auto;
  padding: 30px 24px;
  color: #333;
  font-family: PingFangSC, PingFang SC;
  font-size: 16px;
  /* 换行显示 */
  ::v-deep .el-form-item {
    width: 100% !important;
    display: block !important;

    &__label {
      display: block !important;
      width: 100% !important;
      text-align: left;
      font-size: 14px;
      line-height: 16px;
      margin-bottom: 8px;
      font-family: PingFangSC, PingFang SC;
    }

    &__content {
      margin-left: 0 !important;
      width: 100% !important;
      display: block !important;
      font-family: PingFangSC, PingFang SC;
    }
  }

  /* 必填星号换到后面 */
  ::v-deep .el-form-item.is-required:not(.is-no-asterisk) {
    .el-form-item__label {
      &::before {
        content: none !important;
      }
      &::after {
        content: '•' !important;
        color: #f56c6c !important;
        margin-left: 4px !important;
        display: inline !important;
        /* vertical-align: middle; */
        line-height: 1;
      }
    }
  }
}

.drawer-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px;
  border-top: 1px solid #f2f2f2;
  background: white;
  z-index: 2000;
  color: #333;
  font-family: PingFangSC, PingFang SC;
  .el-button {
    font-family: PingFangSC, PingFang SC;
    border: none;
    font-weight: 500;
    font-size: 14px;
  }

  .cancel-btn:hover {
    color: #4a7ff8 !important;
  }
}

// 使用媒体查询实现移动端适配
@media (max-width: 768px) {
  ::v-deep .el-drawer {
    width: 100% !important;
  }

  .drawer-header,
  .drawer-footer {
    width: 100% !important;
  }

  .drawer-content {
    padding: 20px 16px;
  }
}
</style>
