<template>
    <div class="remark-dialog-content">
        <div class="dialog-header">
            <i class="el-icon-document header-icon"></i>
            <span class="header-title">添加客户备注</span>
        </div>
        
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="remark-form">
            <el-form-item label="备注内容" prop="remark">
                <el-input 
                    :rows="5" 
                    v-model="form.remark" 
                    type="textarea" 
                    placeholder="请输入备注内容..."
                    maxlength="500"
                    show-word-limit
                />
            </el-form-item>
            <el-form-item>
                <div class="form-footer">
                    <el-button type="primary" :loading="loading" @click="submitForm">
                        <i class="el-icon-check"></i> 保 存
                    </el-button>
                    <el-button @click="clearAndSave">
                        <i class="el-icon-delete"></i> 清空备注并保存
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
    import { updateCustomer  } from "@/api/crm/customer";
    export default {
        name: "AddRemark",
        data() {
            return {
                loading: false,
                form: {
                    customerId:null,
                    remark:null,
                 
                },
                rules: {
                    remark: [
                        { required: true, message: "请输入备注内容", trigger: "blur" },
                        { min: 2, message: "备注内容至少2个字符", trigger: "blur" }
                    ],
             
                }
                 
            };
        },
        created() {
        },
        methods: {
            reset(customer) {
                this.form.customerId=customer.customerId;
                this.form.remark=customer.remark;
            },
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        updateCustomer(this.form).then(response => {
                            this.loading = false;
                            if (response.code === 200) {
                                this.$message.success("操作成功");
                                this.$emit('close');
                            }
                        }).catch(() => {
                            this.loading = false;
                        });
                    }
                });
            },
            clearAndSave() {
                this.$confirm('确定要清空备注内容并保存吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.form.remark = '';
                    updateCustomer(this.form).then(response => {
                        this.loading = false;
                        if (response.code === 200) {
                            this.$message.success("备注已清空");
                            this.$emit('close');
                        }
                    }).catch(() => {
                        this.loading = false;
                    });
                }).catch(() => {});
            },
        }
    };
</script>
<style lang="scss" scoped>
.remark-dialog-content {
    padding: 10px 0;
    
    .dialog-header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        
        .header-icon {
            font-size: 24px;
            color: #909399;
            margin-right: 12px;
        }
        
        .header-title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }
    }
    
    .form-footer {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding-top: 10px;
        
        .el-button {
            min-width: 100px;
        }
    }
}
</style>
