<!-- components/discardDialog.vue - 废弃弹窗 -->
<template>
  <uni-popup ref="popup" type="center">
    <view class="discard-dialog">
      <view class="title">废弃</view>
      <uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="100px">
        <uni-forms-item label="废弃原因" name="handleOpinion">
          <textarea v-model="formData.handleOpinion" placeholder="请输入废弃原因(100字以内)" maxlength="100" />
        </uni-forms-item>
        <uni-forms-item label="废弃人">
          <input v-model="formData.handlerName" disabled />
        </uni-forms-item>
      </uni-forms>
      <view class="footer">
        <button @click="close">取消</button>
        <button type="primary" @click="handleSubmit">确定</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  emits: ['confirm'],
  data() {
    return {
      formData: { id: '', handleOpinion: '', handlerName: '' },
      rules: { handleOpinion: { required: true, message: '请输入废弃原因', trigger: 'blur' } }
    };
  },
  methods: {
    open(row) {
      const userInfo = uni.getStorageSync('userInfo') || {};
      this.formData = {
        id: row.id,
        handleOpinion: row.handleOpinion || '',
        handlerName: row.handlerName || userInfo.name || ''
      };
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
      this.$refs.form?.resetFields();
    },
    async handleSubmit() {
      const valid = await this.$refs.form.validate();
      if (!valid) return;
      this.$emit('confirm', { id: this.formData.id, handleOpinion: this.formData.handleOpinion });
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.discard-dialog {
  width: 500rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }
  .footer {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;
    button { flex: 1; margin: 0; }
  }
}
</style>