<template>
  <div class="mt-3">
    <d-card class="mb-[16px] bg-white" shadow="never">
      <div class="text-[14px] w-full flex items-center justify-between">
        <div class="font-bold mb-[16px]">基础信息</div>
      </div>
      <d-form ref="formRef" layout="vertical" class="ml-3 mr-3" :data="forms">
        <d-row :gutter="16">
          <d-col span="8">
            <d-form-item
              field="nickname"
              label="名称"
              :rules="[{ required: true, message: '请填写名称', trigger: 'blur' }]"
            >
              <d-input v-model="forms.nickname" />
            </d-form-item>
          </d-col>
          <d-col span="8">
            <d-form-item
              field="email"
              label="邮件"
              :rules="[{ required: true, message: '请填写邮件', trigger: 'blur' }]"
            >
              <d-input v-model="forms.email" />
            </d-form-item>
          </d-col>
          <d-col span="8">
            <d-form-item
              field="mobile"
              label="电话"
              :rules="[{ required: true, message: '请填写电话', trigger: 'blur' }]"
            >
              <d-input v-model="forms.mobile" />
            </d-form-item>
          </d-col>
        </d-row>
      </d-form>
    </d-card>
    <d-card class="mb-[16px] bg-white" shadow="never">
      <div class="text-[14px] w-full flex items-center justify-between">
        <div class="font-bold mb-[16px]">预警通知设置</div>
      </div>
      <d-form layout="vertical">
        <d-form-item field="radio" label="是否开启预警通知">
          <d-radio-group direction="row" v-model="forms.userExt.emailAlertSwitch">
            <d-radio :value="true">开启</d-radio>
            <d-radio :value="false">关闭</d-radio>
          </d-radio-group>
        </d-form-item>
      </d-form>
    </d-card>
    <div class="flex">
      <d-button variant="solid" class="mr-[8px]" @click="save" :loading="loading">保存</d-button>
      <!-- <d-button color="secondary" class="mr-[8px]">保存草稿</d-button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { userEdit } from '@/api/jyh';
import { getUserInfo } from '@/api/user';
import { onMounted, reactive, ref, shallowRef } from 'vue';
import { Message } from 'vue-devui';
import { useAccountStore } from '@/stores/user';

const loading = ref(false);

const forms = reactive({
  nickname: '',
  mobile: '',
  email: '',
  userExt: {
    emailAlertSwitch: true
  }
});

const getInfo = async () => {
  const userRes = await getUserInfo();
  const user = userRes.data.data.data || {};
  forms.nickname = user.nickname;
  forms.mobile = user.mobile;
  forms.email = user.email;
  forms.userExt.emailAlertSwitch = user.userExt?.emailAlertSwitch || false;

  if (userRes.data?.data) {
    localStorage.setItem('userInfo', JSON.stringify(userRes.data?.data));
    useAccountStore().saveAccountInfo({
      ...userRes.data?.data
    });
    // }
  }
};

const formRef = ref();
const save = () => {
  formRef.value.validate(async (isValid, invalidFields) => {
    if (isValid) {
      loading.value = true;
      await userEdit(forms);
      loading.value = false;
      Message.success('保存成功');
      getInfo();
    }
  });
};

onMounted(() => {
  getInfo();
});
</script>

<style scoped lang="scss"></style>
