<template>
    <div style="max-width: 1700px;">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="70px" class="demo-ruleForm"
            :size="formSize">
            <el-form-item :inline="true" class="inputStyle">
                <el-form-item label="玩家ID" prop="id">
                    <el-input v-model="ruleForm.id" :disabled="true" />
                </el-form-item>

                <el-form-item label="账号ID" prop="aId">
                    <el-input v-model="ruleForm.aId" :disabled="true" />
                </el-form-item>

                <el-form-item label="角色名" prop="nm">
                    <el-input v-model="ruleForm.nm" />
                </el-form-item>

                <el-form-item label="游戏服" prop="gId">
                    <el-input v-model="ruleForm.gId" :disabled="true" />
                </el-form-item>

                <el-form-item label="等级" prop="lv">
                    <el-input v-model="ruleForm.lv" />
                </el-form-item>

                <el-form-item label="vip等级" prop="vLv">
                    <el-input v-model="ruleForm.vLv" :disabled="true" />
                </el-form-item>

                <el-form-item label="战斗力" prop="tmp">
                    <el-input v-model="ruleForm.tmp" :disabled="true" />
                </el-form-item>

                <el-form-item label="总充值" prop="atu">
                    <el-input v-model="ruleForm.atu" :disabled="true" />
                </el-form-item>

                <el-form-item label="公会" prop="gld">
                    <el-input v-model="ruleForm.gld" :disabled="true" />
                </el-form-item>

                <el-form-item label="封号截至" prop="btm">
                    <el-input v-model="ruleForm.btm" :disabled="true" />
                </el-form-item>

                <el-form-item label="封号理由" prop="btn">
                    <el-input v-model="ruleForm.btn" :disabled="true" />
                </el-form-item>

                <el-form-item label="禁言截止" prop="stm">
                    <el-input v-model="ruleForm.stm" :disabled="true" />
                </el-form-item>

                <el-form-item label="禁言理由" prop="stn">
                    <el-input v-model="ruleForm.stn" :disabled="true" />
                </el-form-item>

                <el-form-item label="深渊层数" prop="aby">
                    <el-input v-model="ruleForm.aby" :disabled="true" />
                </el-form-item>

                <el-form-item label="注册时间" prop="ctm">
                    <el-input v-model="ruleForm.ctm" :disabled="true" />
                </el-form-item>

                <el-form-item label="最近登录" prop="llTm">
                    <el-input v-model="ruleForm.llTm" :disabled="true" />
                </el-form-item>

                <el-form-item label="最近登出" prop="luTm">
                    <el-input v-model="ruleForm.luTm" :disabled="true" />
                </el-form-item>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" class="saveButton" @click="submitForm()" round>保存信息</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup name="inline-table">
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue'
import playerApi from '@/api/player'

const rules = reactive({

});

let props = defineProps({
    ruleForm: Object
});

const submitForm = () => {
    let data = {
        playerId: props.ruleForm.id,
        name: props.ruleForm.nm,
        playerLv: props.ruleForm.lv,
        srvId:props.ruleForm.gId
    }
    playerApi.editPlayerInfo(data).then((resp) => {
        let result = resp.data.result;
        let jsonData = JSON.parse(result);
        
        if (jsonData.msg === '修改角色信息失败' || jsonData.msg === '参数错误') {
            ElMessage({
                message: jsonData.msg,
                type: 'error',
                duration: 3000
            });
        } else {
            ElMessage({
                message: jsonData.msg,
                type: 'success',
                duration: 3000
            });
        }
    });
}

const formSize = ref('default')

</script>

<style>
.inputStyle .el-input {
    margin-bottom: 10px;
    width: 155px;
}

.saveButton {
    position: absolute;
    right: 50px;
}
</style>