<script setup>/**
 * name：
 * user：sa0ChunLuyu
 * date：2022年12月25日 20:50:25
 */
import {$response, AdminChangeNicknameAction, AdminInfoAction, AdminChangePasswordAction} from "~/api";
import {useStore} from "~/store";

const $store = useStore()
const admin_info = ref({
  account_id: 0,
  nickname: ''
})
const AdminInfo = async () => {
  const response = await AdminInfoAction()
  $response(response, () => {
    $store.admin_info = response.data.info
    admin_info.value = JSON.parse(JSON.stringify(response.data.info))
  })
}
onMounted(() => {
  AdminInfo()
})
const AdminChangeNickname = async () => {
  if (admin_info.value.nickname === $store.admin_info.nickname) return
  const response = await AdminChangeNicknameAction(admin_info.value.nickname)
  $response(response, () => {
    AdminInfo()
    window.$message().success('修改成功')
  })
}

const password_data_default = {
  old: '',
  new: '',
  check: '',
}

const AdminChangePassword = async () => {
  if (changePasswordDisabled()) return
  const response = await AdminChangePasswordAction({
    account_id: admin_info.value.account_id,
    password: password_data.value.new,
    old_password: password_data.value.old,
  })
  $response(response, () => {
    password_data.value = JSON.parse(JSON.stringify(password_data_default))
    window.$message().success('修改成功')
  })
}
const password_data = ref(JSON.parse(JSON.stringify(password_data_default)))
const changePasswordDisabled = () => {
  if (password_data.value.old.length < 6 || password_data.value.old.length > 20) return true
  if (password_data.value.new.length < 6 || password_data.value.new.length > 20) return true
  if (password_data.value.new !== password_data.value.check) return true
  return false
}
</script>
<template>
  <div>
    <n-card title="个人设置">
      <div>
        <n-space align="center">
          <n-tag>
            <div class="form_tag_wrapper">昵称</div>
          </n-tag>
          <n-input class="form_input_wrapper" v-model:value="admin_info.nickname"></n-input>
          <n-button :disabled="admin_info.nickname === $store.admin_info.nickname" @click="AdminChangeNickname()"
                    type="info">修改昵称
          </n-button>
        </n-space>
        <n-space mt-5 align="center">
          <n-tag>
            <div class="form_tag_wrapper">旧密码</div>
          </n-tag>
          <n-input type="password" class="form_input_wrapper" v-model:value="password_data.old"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">新密码</div>
          </n-tag>
          <n-input type="password" class="form_input_wrapper" v-model:value="password_data.new"></n-input>
        </n-space>
        <n-space mt-2 align="center">
          <n-tag>
            <div class="form_tag_wrapper">确认密码</div>
          </n-tag>
          <n-input type="password" class="form_input_wrapper" v-model:value="password_data.check"></n-input>
        </n-space>
        <n-button :disabled="changePasswordDisabled()" @click="AdminChangePassword()" mt-5 type="info">修改密码
        </n-button>
      </div>
    </n-card>
  </div>
</template>
<style scoped>

</style>
<route>
{"meta":{"title":"个人设置"}}
</route>

