<template>

    <el-dialog title="字符充值" :visible.sync="visible" width="500px" @close="handleClose" @open="handleOpen">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="用户" prop="userName">{{ userName }}</el-form-item>
            <el-form-item label="平台名称" prop="platformName">
                {{ platformName }}
            </el-form-item>
            <el-form-item label="剩余字符数量" prop="changeNum">
                <el-input v-model.number="form.changeNum" placeholder="请输入剩余字符数量"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { tmMemberPlatformChangeChar } from '@/api/admin/tm-member-platform'
export default {
    name: 'TmMemberChange',
    props: {
        type:{
            type:Number,
            default:1
        },
        memberId: {
            type: Number,
            required: true,
            default: 0
        },
        userName: {
            type: String,
            default: ''
        },
        platformId:{
            type:Number,
            default:0
        },
        platformName: {
            type: String,
            default: ''
        },
        totalNum: {
            type: Number,
            default: 0
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            form: {
                memberId: undefined,
                platformId: undefined,
                changeNum: 0
            },
            rules: {
                changeNum: [
                    { required: true, message: '请输入剩余字符数量', trigger: 'blur' }]
            },
            loading: false
        }
    },
    // watch:{
    //     totalNum(newVal,oldVal){
    //         if(newVal!==oldVal){
    //             this.form.changeNum=newVal
    //         }
    //     }
    // },
    methods: {
        resetForm() {
            this.form = {
                memberId: undefined,
                platformId: undefined,
                changeNum: 0
            }
        },
        handleOpen() {
            this.form.changeNum = this.totalNum
        },
        handleClose() {
            this.resetForm()
            this.$emit('update:visible', false)
            this.$emit('close')
        },
        cancel() {
            this.loading = false
            this.handleClose()
        },
        submitForm() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.loading = true
                    this.form.memberId = this.memberId
                    this.form.platformId = this.platformId
                    this.form.type=this.type

                    tmMemberPlatformChangeChar(this.form).then(response => {
                        if (response.code === 200) {
                            this.$message.success('修改成功')
                            this.handleClose()
                        } else {
                            this.$message.error(response.message)
                        }
                    })
                        .finally(() => {
                            this.loading = false
                        })
                }
            })
        }
    }
}
</script>