<script setup lang="ts">
import { userinfo } from "@/store/store.ts";
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import { ref, watch } from "vue";
import { UploadProps } from "element-plus";

const props = defineProps<{ userinfo: userinfo; admin?: boolean }>();

const emit = defineEmits<{ update: [value: userinfo] }>();

const locationOption = ref<{ label: string; value: string }[]>([]);
const tmpUserinfo = ref<userinfo>({ ...props.userinfo });
const tmpUserType = ref<string[]>([]);

const { runAsync, loading } = useRequest(
  (param: string) => myRequest(`/api/weather/location?location=${param}`),
  { manual: true },
);
const { data: sys } = useRequest(
  () => myRequest(`/admin/sys`, userinfo.token),
  { ready: () => props.admin },
);
const getLocation = (query: string) => {
  runAsync(query).then((res) => {
    locationOption.value = res.data
      ? Object.keys(res.data).map((key) => ({
          label: res.data[key],
          value: key,
        }))
      : [];
  });
};
const afterAvatarUpload: UploadProps["onSuccess"] = (res) => {
  tmpUserinfo.value.avatar = res.data;
};
const toSave = () => emit("update", tmpUserinfo.value);
watch(props, () => (tmpUserinfo.value = props.userinfo));
watch(sys, () => {
  if (sys) {
    const d = sys.value.data.filter(
      (e: { name: string }) => e.name === "user_type",
    );
    console.log(d);
    if (d.length) {
      tmpUserType.value = d[0].data.map((e: { value: string }) => e.value);
    }
  }
});
</script>

<template>
  <el-form label-width="100px" class="userinfo-edit">
    <el-form-item label="用户名">
      <el-input v-model="tmpUserinfo.username" disabled />
    </el-form-item>
    <el-form-item label="昵称">
      <el-input
        v-model="tmpUserinfo.nickname"
        placeholder="填写呢称"
        clearable
      />
    </el-form-item>
    <el-form-item label="手机号码">
      <el-input
        v-model="tmpUserinfo.mobile"
        placeholder="填写手机号码"
        clearable
      />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="tmpUserinfo.email" placeholder="填写邮箱" clearable />
    </el-form-item>
    <el-form-item label="用户类型" v-if="props.admin">
      <el-select v-model="tmpUserinfo.type" placeholder="选择用户类型">
        <el-option
          v-for="item in tmpUserType"
          :label="item"
          :value="item"
          :key="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="所在地">
      <el-select
        v-model="tmpUserinfo.location"
        clearable
        filterable
        remote
        placeholder="选择所在地"
        :loading="loading"
        :remote-method="getLocation"
      >
        <el-option
          v-for="item in locationOption.map((e) => ({
            value: Object.keys(e)[0],
            label: Object.values(e)[0],
          }))"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="头像"
      ><el-upload
        :show-file-list="false"
        action="/api/file/static/avatar"
        :on-success="afterAvatarUpload"
        :headers="{ Authorization: `Bearer ${userinfo.token}` }"
      >
        <el-avatar
          :src="tmpUserinfo.avatar"
          v-if="tmpUserinfo.avatar" /><el-avatar
          src="/src/assets/image/avatar.png"
          v-else /></el-upload
    ></el-form-item>
    <el-form-item>
      <el-button type="primary" @click="toSave">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.userinfo-edit {
  padding-right: 5rem;
}
</style>
