<template>
  <view class="reject-modal">
    <!-- 插槽内容，点击后唤起弹窗 -->
    <view class="slot-content" @click="openModal">
      <slot></slot>
    </view>
    
    <!-- 驳回理由弹窗 -->
    <u-popup :show="show" mode="center" :round="8" @close="closeModal">
      <view class="modal-content">
        <!-- 标题 -->
        <view class="modal-header">
          <text class="modal-title">驳回理由</text>
          <u-icon name="close" color="#666666" size="20" @click="closeModal" />
        </view>
        
        <!-- 驳回理由输入框 -->
        <view class="reject-reason-input">
          <view class="input-label">请填写驳回理由：</view>
          <uni-easyinput 
            type="textarea"
            v-model="rejectReason" 
            placeholder="请输入驳回理由..."
            maxlength="500"
            :auto-height="true"
          />
          <view class="word-count">{{ rejectReason.length }}/500</view>
        </view>
        
        <!-- 按钮区域 -->
        <view class="modal-footer">
          <view class="btn btn-cancel" @click="closeModal">取消</view>
          <view class="btn btn-confirm" @click="handleConfirm">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'RejectModal',
  props: {
    // 是否显示弹窗（外部控制）
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      rejectReason: ''
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.show = newVal
      }
    },
    show(newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    // 打开弹窗
    openModal() {
      this.show = true
      this.rejectReason = ''
    },
    
    // 关闭弹窗
    closeModal() {
      this.show = false
      this.rejectReason = ''
    },
    
    // 确定按钮处理
    handleConfirm() {
      if (!this.rejectReason.trim()) {
        uni.showToast({
          title: '请输入驳回理由',
          icon: 'none'
        })
        return
      }
      
      // 向外传递驳回理由
      this.$emit('confirm', this.rejectReason.trim())
      this.closeModal()
    }
  }
}
</script>

<style lang="scss" scoped>
.reject-modal {
  width: 48%;
  // margin-right: 20rpx;
  .slot-content {
    // display: inline-block;
  }
  
  .modal-content {
    width: 600rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 40rpx 32rpx 32rpx;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32rpx;
      
      .modal-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .reject-reason-input {
      margin-bottom: 40rpx;
      
      .input-label {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 16rpx;
      }
      
      .word-count {
        text-align: right;
        font-size: 24rpx;
        color: #999;
        margin-top: 8rpx;
      }
    }
    
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 20rpx;
      
      .btn {
        padding: 20rpx 40rpx;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-weight: 500;
        cursor: pointer;
        
        &.btn-cancel {
          background-color: #f5f5f5;
          color: #666;
          border: 2rpx solid #e5e5e5;
          
          &:active {
            background-color: #e8e8e8;
          }
        }
        
        &.btn-confirm {
          background-color: #409EFF;
          color: #fff;
          border: 2rpx solid #409EFF;
          
          &:active {
            background-color: #337ecc;
          }
          
          &:disabled {
            background-color: #c0c4cc;
            border-color: #c0c4cc;
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style>