<template>
  <div class="info-wrap">
    <van-cell-group inset class="mt12_i">
      <van-field required name="uploader" class="uploader" label="" style="justify-content: center;">
        <template #input>
          <van-uploader :after-read="afterRead" v-model="fileList" multiple :preview-image="true" :max-count="1" :before-delete="deleteFun" />
        </template>
      </van-field>
      <van-field required v-model="query.nickname" name="nickname" label="昵称" placeholder="请输入10个字以内的昵称" />
      <van-field required v-model="query.mobile" name="mobile" label="手机号码" placeholder="请输入手机号码" type="number" maxlength="11" readonly />
      <van-field v-model="query.email" name="email" label="邮箱账号" placeholder="请输入邮箱账号" />
      <van-field required v-model="query.name" name="name" label="姓名" placeholder="请输入姓名" />
      <van-field required name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="query.sex" direction="horizontal">
            <van-radio v-for="item in sexArr" :key="item.code" :name="item.code">{{item.val}}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-model="query.company" name="company" label="公司名称" placeholder="请输入公司名称" />
      <van-field v-model="query.industry" name="industry" label="行业类型" placeholder="请输入行业类型" />
      <van-field v-model="query.occupation" name="occupation" label="职业类型" placeholder="请输入职业类型" />
    </van-cell-group>
    <div class="buy-btn-wrap">
      <el-button class="btn_main" @click="updateUserFun">
        保存
      </el-button>
    </div>
  </div>
  <van-popup v-model:show="showArea" destroy-on-close position="bottom">
    <van-area :area-list="areaList" :model-value="pickerValue" @confirm="onConfirm" @cancel="showArea = false" />
  </van-popup>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { areaList } from "@vant/area-data";
import { useAll } from "~/api/pubAll/service";
const { fileUploadWithPath, updateUser, getUserInfo } = useAll();
import { showLoadingToast, closeToast } from "vant";

let pageTitle: any = ref("HOTKING-个人中心-发票资料");
useHead(() => ({
  title: pageTitle.value,
}));
const sexArr: any = ref([
  {
    val: "男",
    code: 1,
  },
  {
    val: "女",
    code: 2,
  },
  {
    val: "保密",
    code: 0,
  },
]);
const fileList = ref<any[]>([]);
const route = useRoute();
const router = useRouter();
const query: any = ref({});
const user = useUserStore();
const checked = ref(false);
const zzsChecked = ref("1");
const billType = ref("公司发票");
user.value.adminTitle = "发票资料";
const nuxtApp = useNuxtApp();
const fieldValue = ref("");
const showArea = ref(false);
const AreaVal = ref("");
const pickerValue = ref<any[]>([]);
const onConfirm = ({ selectedValues, selectedOptions }: any) => {
  showArea.value = false;
  pickerValue.value = selectedValues;
  AreaVal.value =
    selectedOptions[0].text + selectedOptions[1].text + selectedOptions[2].text;
};
function deleteFun(e: any) {
  query.value.headImg = "";
  return true;
}

async function getUserInfoFun() {
  let res: any = await getUserInfo();
  if (res.httpCode == 200) {
    query.value = res.data;
    if (query.value.headImg) {
      fileList.value.push({
        url: query.value.headImg,
      });
    }
  }
}
const updateUserFun = async () => {
  const toast = showLoadingToast({
    message: "",
    forbidClick: true,
    zIndex: 3000,
    className: "my-custom-toast",
    duration: 0,
  });
  let res: any = await updateUser({ ...query.value });
  toast.close();
  if (res.httpCode == 200) {
    ElMessage.success("保存成功");
    router.go(-1);
  }
};
const afterRead = async (file: any) => {
  // 此时可以自行将文件上传至服务器
  const form = new FormData();
  form.append("file", file.file);
  form.append("path", "user");
  const toast = showLoadingToast({
    message: "",
    forbidClick: true,
    zIndex: 3000,
    className: "my-custom-toast",
    duration: 0,
  });
  let res: any = await fileUploadWithPath(form);
  toast.close();
  if (res.httpCode == 200) {
    query.value.headImg = res.data;
  }
};
onMounted(() => {
  getUserInfoFun();
});
</script>
<style scoped lang="scss">
.info-wrap {
  min-height: calc(100vh - 44px);
  background: #f7f7f7;
  padding-top: 1px;
  padding-bottom: 20px;
  .buy-btn-wrap {
    display: block;
    width: 100%;
    left: 0;
    padding: 0 12px;
    z-index: 1;
    width: 100%;
    .el-button {
      width: 100%;
      border-radius: 25px !important;
      flex: 1;
      height: 42px !important;
      line-height: 42px !important;
      margin-top: 20px;
      & + .el-button {
        margin-left: 0;
        margin-top: 10px;
      }
      &.is-disabled {
        background: #e9e9e9;
        color: #fff;
      }
    }
  }
  .uploader {
    :deep(.van-field__control.van-field__control--custom) {
      justify-content: center;
    }
  }
}
</style>