<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { updateUser } from '@/api/permission/user'
import { ElMessage } from 'element-plus'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const props = defineProps({
    applicationId: String,
    userList:Object,
})
const userlist: any = ref({
    username: 'admin',
    nickname: '管理员',
    email: '',
    phone: '',
    id:''
})
onMounted(() => {
    userlist.value = props.userList
})
function saveinfo() {
    //保存
    updateUser(userlist.value).then(res => {
      if(res.data.code == '0'){
        ElMessage({
          type: 'success',
          message: '修改成功',
       })
       wsCache.set('Permission-userinfo', userlist.value)
      }    
        
})
}
</script>
<template>
    <div class="userinfo-box">
        <div class="userinfo-content">
            <div class="userinfo-content-top">
                <div class="userinfo-title">
                    <div class="userinfo-title-icon"></div>
                    <div class="userinfo-title-text">个人信息</div>
                </div>
                <div class="userinfo-content-top-content">
                    <div class="userinfo-content-top-content-box">
                        <div class="userinfo-content-top-text">用户姓名</div>
                        <el-input v-model="userlist.nickname" disabled placeholder="请输入用户姓名"></el-input>
                    </div>
                    <div class="userinfo-content-top-content-box">
                        <div class="userinfo-content-top-text">登录账号</div>
                        <el-input v-model="userlist.username" disabled placeholder="请输入登录账号"></el-input>
                    </div>
                    <div class="userinfo-content-top-content-box">
                        <div class="userinfo-content-top-text">联系邮箱</div>
                        <el-input v-model="userlist.email" placeholder="请输入联系邮箱"></el-input>
                    </div>
                    <div class="userinfo-content-top-content-box">
                        <div class="userinfo-content-top-text">联系电话</div>
                        <el-input v-model="userlist.phone" placeholder="请输入联系电话"></el-input>
                    </div>
                </div>
            </div>
            <!-- <div class="userinfo-content-top" style="margin-top: 50px;">
                <div class="userinfo-title">
                    <div class="userinfo-title-icon"></div>
                    <div class="userinfo-title-text">修改密码</div>
                </div>
                <div class="userinfo-content-top-content">
                    <div class="userinfo-content-top-content-box">
                        <div class="userinfo-content-top-text">原密码</div>
                        <el-input v-model="userlist.password" placeholder="请输入原密码"></el-input>
                    </div>
                    <div class="userinfo-content-top-content-box">
                        <div class="userinfo-content-top-text">新密码</div>
                        <el-input v-model="userlist.newpassword" placeholder="请输入新密码"></el-input>
                    </div>
                    <div class="userinfo-content-top-content-box">
                        <div class="userinfo-content-top-text">确认新密码</div>
                        <el-input v-model="userlist.submitpassword" placeholder="请输入确认新密码"></el-input>
                    </div>
                </div>
            </div> -->
            <div class="userinfo-content-btn">
                <el-button type="primary" style="min-width: 50px;" @click="saveinfo">保存</el-button>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.userinfo-box {
    width: 100%;
    height: 100%;
    background: #E3E8F0;
    padding: 15px;
    .userinfo-content {
        width: 100%;
        height: 100%;
        overflow: auto;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
        padding: 40px;
        .userinfo-content-top {
            width: 600px;
            .userinfo-title {
                display: flex;
                align-items: center;
                .userinfo-title-icon {
                    width: 5px;
                    height: 15px;
                    background-color: rgba(64, 158, 255, 1);
                }
                .userinfo-title-text {
                    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 16px;
                    margin-left: 10px;
                }
            }
            .userinfo-content-top-content {
                .userinfo-content-top-content-box {
                    margin-top: 20px;
                    display: flex;
                    align-items: center;
                    .userinfo-content-top-text {
                        width: 90px;
                        margin-right: 20px;
                        text-align: right;
                        font-size: 14px;
                        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
                        font-weight: 400;
                        font-style: normal;
                        color: rgb(120, 120, 120);
                    }
                }
            }
        }
        .userinfo-content-btn {
            width: 600px;
            display: flex;
            justify-content: flex-end;
            margin-top: 30px;
        }
    }
}

:deep(.ed-input__wrapper) {
    background: #ffffff;
    border: 1px solid #dcdfe6;
    box-shadow: none;
}

:deep(.ed-input__inner) {
    color: rgb(56, 56, 56)
}

:deep(.ed-input.is-disabled .ed-input__wrapper) {
    background: rgb(242, 246, 252);
    border: 1px solid #dcdfe6;
    box-shadow: none;
}

:deep(.ed-input.is-disabled .ed-input__inner) {
    color: rgb(56, 56, 56);
    -webkit-text-fill-color: rgb(56, 56, 56);
}

:deep(.ed-button) {
    border-color: #dcdfe6;
}

:deep(.ed-button--primary) {
    background-color: #409eff;
    color: #ffffff;
    border-color: #409eff;
}
</style>