<template>
  <full-page v-if="!visible" :customScroll="empty">
    <view v-if="formItems.length === 0" class="flex items-center justify-center h-full">
      <empty-data />
    </view>
    <view v-else class="p-15">
      <view class="bg-white rounded shadow-lg">
        <form-template ref="tempRef" :disableTitles="disableTitles" :items="formItems" :form="formData"
          @change="change($event)" />
      </view>
    </view>

    <template #footer>
      <button-footer confirmText="保存" :showCancel="false" @confirm="confirm()" />
    </template>
  </full-page>
  <bind-popup :customers="customers" :corpName="corpName" :visible="visible" @close="visible = false"
    @confirm="bindArchive($event)" />
  <verify-popup :visible="verifyVisible" @close="verifyVisible = false" />
</template>
<script setup>
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { onLoad } from "@dcloudio/uni-app";
import dayjs from 'dayjs';
import useGuard from '@/hooks/useGuard';
import useAccount from '@/store/account';
import api from '@/utils/api';
import { toast } from '@/utils/widget';
import validate from '@/utils/validate';

import ButtonFooter from '@/components/button-footer.vue';
import EmptyData from '@/components/empty-data.vue';
import FullPage from '@/components/full-page.vue';
import bindPopup from './bind-popup.vue';
import verifyPopup from './verify-popup.vue';
import formTemplate from '@/components/form-template/index.vue';

const empty = ref(false)
const { useLoad } = useGuard();
const { account, externalUserId } = storeToRefs(useAccount());
const { getExternalUserId } = useAccount()
const corpId = ref('');
const corpName = ref('');
const customer = ref({});
const customerId = ref('');
const customers = ref([]);
const disableTitles = ref(['mobile']);
const form = ref({});
const formItems = ref([]);
const loading = ref(false);
const teamId = ref('');
const tempRef = ref(null);
const customerArchive = ref(null);
const verifyVisible = ref(false);
const visible = ref(false);

const formData = computed(() => ({ ...customer.value, ...form.value }));

function change({ title, value }) {
  if (title) {
    form.value[title] = value;
  }
  if (title !== 'idCard') return;
  const [isIdCard, birthday, gender] = validate.isChinaId(value);
  if (isIdCard) {
    form.value.birthday = birthday;
    form.value.sex = gender == 'MALE' ? '男' : '女';
    const age = dayjs().diff(birthday, 'year');
    form.value.age = Math.max(1, age);
  }
}

function confirm() {
  if (!tempRef.value.verify()) return;
  if (customerId.value) {
    updateArchive();
  } else {
    addArchive();
  }
}

async function addArchive() {
  if (loading.value) return;
  loading.value = true;
  const params = {
    ...form.value,
    addMethod: 'customerManual',
    teamId: teamId.value,
    corpId: corpId.value,
    mobile: account.value.mobile,
    miniAppId: account.value.openid,
    externalUserId: externalUserId.value,
  }
  loading.value = false;
  const res = await api('addCustomer', { params });
  if (res && res.success) {
    uni.redirectTo({
      url: `/pages/archive/archive-result?corpId=${corpId.value}&teamId=${teamId.value}`
    })
  } else {
    toast(res?.message || '新增档案失败');
  }
}

async function bindArchive(customerId) {
  const res = await api('bindMiniAppArchive', { id: customerId, corpId: corpId.value, teamId: teamId.value, miniAppId: account.value.openid });
  if (res && res.success) {
    await toast('绑定成功');
    uni.reLaunch({ url: `/pages/home/home?corpId=${corpId.value}&teamId=${teamId.value}` })
  } else {
    toast(res?.message || '绑定失败');
  }
  // customerArchive.value = customers.value.find(item => item.customerId === customerId);
  // verifyVisible.value = true;
}

async function init() {
  if (customerId.value) {
    await getCustomer();
  } else {
    const res = await getArchives();
    if (res.length > 0) {
      visible.value = true;
    }
    if (!externalUserId.value) {
      getExternalUserId();
    }
  }
  await getBaseForm();
}

async function getArchives() {
  const res = await api('getUnbindMiniAppCustomers', { corpId: corpId.value, mobile: account.value.mobile });
  if (res && res.success) {
    corpName.value = res.corpName;
    customers.value = Array.isArray(res.data) ? res.data : [];
  } else {
    toast(res?.message || '查询档案信息失败');
    return Promise.reject()
  }
  return customers.value
}

async function getBaseForm() {
  const res = await api('getTeamBaseInfo', { corpId: corpId.value, teamId: teamId.value });
  if (res && res.success) {
    formItems.value = Array.isArray(res.data) ? res.data : [];
  } else {
    toast(res?.message || '查询失败');
    return Promise.reject()
  }
}

async function getCustomer() {
  const res = await api('getCustomerByCustomerId', { customerId: customerId.value });
  console.log(res.data)
  if (res && res.success && res.data) {
    customer.value = res.data;
  } else {
    await toast(res?.message || '查询档案信息失败');
    uni.navigateBack();
    return Promise.reject()
  }
}

async function updateArchive() {
  if (Object.keys(form.value).length > 0) {
    const res = await api('updateCustomer', { id: customerId.value, ...form.value });
    if (res && res.success) {
      await toast('修改成功');
      uni.navigateBack();
    } else {
      toast(res?.message || '修改失败');
    }
  } else {
    uni.navigateBack();
  }
}

// async updateCustomer() {
//       if (Object.keys(this.form).length === 0) return this.editMemberId;
//       const { success, message } = await updateCustomer(
//         this.editMemberId,
//         this.form
//       );
//       if (success) return this.editMemberId;
//       this.widget.hideLoading();
//       this.widget.toast(message);
//       return Promise.reject();
//     },

onLoad(options => {
  customerId.value = options.id || '';
  uni.setNavigationBarTitle({ title: customerId.value ? '编辑档案' : '新增档案' })
})
useLoad(options => {
  teamId.value = options.teamId;
  corpId.value = options.corpId;
  init();
})

</script>
<style scoped></style>