<template>
  <view class="container" :class="{ 'container--elder': elderMode }">
    <template v-if="logined">
      <view class="main">
        <scroll-view scroll-y="true" class="main-scroll">
          <view class="card" :class="{ 'card--elder': elderMode }">
            <uni-list>
              <!-- 信息条目 -->
              <uni-list-item direction="column">
                <template v-slot:body>
                  <view class="info-item" :class="{ 'info-item--elder': elderMode }">
                    <text class="item-label" :class="{ 'item-label--elder': elderMode }">姓名</text>
                    <text v-if="id" class="item-value" :class="{ 'item-value--elder': elderMode }">
                      {{ currentProfile ? currentProfile.name : '' }}
                    </text>
                    <input v-else v-model="form.name" :maxlength="10" class="item-value"
                      :class="{ 'item-value--elder': elderMode }" type="text" placeholder="请输入姓名" />
                  </view>
                  <view class="info-item" :class="{ 'info-item--elder': elderMode }">
                    <text class="item-label" :class="{ 'item-label--elder': elderMode }">证件类型</text>
                    <text class="item-value" :class="{ 'item-value--elder': elderMode }">身份证</text>
                  </view>
                  <view class="info-item" :class="{ 'info-item--elder': elderMode }">
                    <text class="item-label" :class="{ 'item-label--elder': elderMode }">证件号</text>
                    <text v-if="id" class="item-value" :class="{ 'item-value--elder': elderMode }">
                      {{ currentProfile ? currentProfile.maskCertNo : '' }}
                    </text>
                    <input v-else v-model="form.socialno" :maxlength="20" class="item-value"
                      :class="{ 'item-value--elder': elderMode }" type="idcard" placeholder="请输入证件号" />
                  </view>
                  <view class="info-item" :class="{ 'info-item--elder': elderMode }">
                    <text class="item-label" :class="{ 'item-label--elder': elderMode }">手机号</text>
                    <input v-model="form.tel" :maxlength="15" class="item-value"
                      :class="{ 'item-value--elder': elderMode }" type="number" placeholder="请输入手机号" />
                  </view>
                  <view v-if="currentProfile && currentProfile.blhno" class="info-item"
                    :class="{ 'info-item--elder': elderMode }">
                    <text class="item-label" :class="{ 'item-label--elder': elderMode }">病案号</text>
                    <text class="item-value highlight" :class="{ 'item-value--elder': elderMode }">
                      {{ currentProfile.blhno }}
                    </text>
                  </view>
                  <view class="info-item" :class="{ 'info-item--elder': elderMode }">
                    <text class="item-label" :class="{ 'item-label--elder': elderMode }">地址</text>
                    <input v-model="form.address" class="item-value" :class="{ 'item-value--elder': elderMode }"
                      type="text" placeholder="请输入地址" />
                  </view>
                </template>
              </uni-list-item>
            </uni-list>
          </view>
        </scroll-view>
      </view>
      <view class="save-footer" :class="{ 'save-footer--elder': elderMode }" @click="confirm">
        <view class="save-btn" :class="{ 'save-btn--elder': elderMode }">保存</view>
      </view>
      <view class="safearea-bottom"></view>
    </template>

    <re-login v-else height="80vh" />
  </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import useUser from '@/hooks/useUser';
import { bindFamilyProfile, updateFamilyProfile, sm4Encrypt } from '@/utils/api';
import { isChinaId } from "@/utils/validator";
import { toast } from '@/utils/widget';
import ybPlugin from "@/utils/insurance-plugin";

import reLogin from '@/components/re-login.vue';

const id = ref('')
const form = ref({
  name: '',
  socialno: '',
  tel: '',
  address: '',
});

const loading = ref(false);
const elderMode = ref(false);
const { familyProfile, logined, userInfo, getFamilyProfile, myProfile, getAuthCode } = useUser();
const currentProfile = computed(() => familyProfile.value.find(i => i._id === id.value && id.value));
const source = ref('')

async function confirm() {
  if (loading.value) return;
  if (form.value.name.trim() === '') {
    toast('姓名不能为空');
    return;
  }
  if (form.value.socialno.trim() === '') {
    toast('证件号不能为空');
    return;
  }
  if (!isChinaId(form.value.socialno)[0]) {
    toast('请输入有效的身份证号');
    return;
  }
  if (form.value.tel.trim() === '') {
    toast('手机号不能为空');
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(form.value.tel)) {
    toast('请输入有效的手机号');
    return;
  }
  loading.value = true;

  try {
    const payload = {
      id: id.value,
      name: form.value.name.trim(),
      socialno: form.value.socialno.trim(),
      tel: form.value.tel.trim(),
      address: form.value.address.trim(),
      userId: userInfo.value.userId,
    };
    uni.setStorageSync('family-profile-form', JSON.stringify(form.value));
    const psnToken = await getPsnToken(payload.name, payload.socialno);
    if (!psnToken) {
      loading.value = false;
      return;
    }
    payload.psnToken = psnToken;
    const api = id.value ? updateFamilyProfile : bindFamilyProfile;
    const { message, success } = await api(payload);
    if (success) {
      toast('保存成功')
      getFamilyProfile()
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        uni.redirectTo({
          url: source.value || '/pages/home/home'
        });
      }
    } else {
      toast(message || '保存失败')
    }
  } catch (e) {
    toast(e.message);
  }
  loading.value = false
}

async function getPsnToken(name, socialno) {
  const res = await sm4Encrypt({ textGroup: [name, socialno] })
  const [anotherName, anotherIdNo] = res && Array.isArray(res.textGroup) ? res.textGroup : [];
  if (!anotherName || !anotherIdNo) {
    toast('获取加密参数失败，请稍后再试');
    return Promise.reject('获取加密参数失败，请稍后再试');
  }
  const authCode = await getAuthCode("nhsamp");
  const psnToken = await ybPlugin.getArchiveToken(authCode, anotherIdNo, anotherName);
  if (!psnToken) {
    return Promise.reject('获取医保信息授权信息失败');
  }
  return psnToken;
}

onLoad((options) => {
  if (options.source) {
    source.value = decodeURIComponent(options.source);
  }
  if (options.type === 'getArchiveTokenRedirect') {
    const cacheForm = uni.getStorageSync('family-profile-form');
    try {
      const obj = JSON.parse(cacheForm);
      Object.keys(form.value).forEach(key => {
        form.value[key] = obj[key] || '';
      });
    } catch (e) { }
  }
  uni.removeStorageSync('family-profile-form');
  id.value = options.id || '';
  ybPlugin.init({
    archiveTokenCallback: () => {
      uni.redirectTo({
        url: `/pages/member/family-profile?type=getArchiveTokenRedirect&id=${id.value}&source=${source.value ? encodeURIComponent(source.value) : ''}`,
      });
    }
  });
  // 读取长辈模式状态
  const savedElderMode = uni.getStorageSync('elderMode')
  if (savedElderMode !== null && savedElderMode !== undefined) {
    elderMode.value = savedElderMode
  }
});

watch(currentProfile, val => {
  if (id.value) {
    form.value = {
      name: val ? val.name : '',
      socialno: val ? val.socialno : '',
      tel: val ? val.tel : '',
      address: val ? val.address : ''
    }
  }
}, { immediate: true })

</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  height: 100vh;

  // 定义CSS变量
  --font-scale: 1;
  --spacing-scale: 1;
  --border-radius-scale: 1;
  --font-weight-scal: 1;

  @at-root &--elder {
    --font-scale: 1.4;
    --spacing-scale: 1.2;
    --border-radius-scale: 1.25;
    --font-weight-scal: 1.2;
  }
}

.main {
  position: relative;
  flex-grow: 1;
}

.main-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.card {
  margin: calc(30rpx * var(--spacing-scale));
  border-radius: calc(16rpx * var(--border-radius-scale));
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.info-item {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(24rpx * var(--spacing-scale)) calc(30rpx * var(--spacing-scale));
  border-bottom: 1rpx solid #eee;
  min-height: calc(80rpx * var(--spacing-scale));

  &:last-child {
    border-bottom: none;
  }

  .item-label {
    color: #666;
    font-size: calc(30rpx * var(--font-scale));
    width: calc(200rpx * var(--spacing-scale));
    font-weight: 500;

    .container--elder & {
      font-weight: calc(600rpx * var(--font-size-scal));
    }
  }

  .item-value {
    color: #333;
    font-size: calc(30rpx * var(--font-scale));
    font-weight: 500;
    flex: 1;
    text-align: right;

    &.highlight {
      color: $theme-brown-primary;
      font-weight: 600;
    }

    .container--elder & {
      font-weight: 600;
    }
  }
}

.save-footer {
  padding: calc(24rpx * var(--spacing-scale)) calc(30rpx * var(--spacing-scale));
  background: white;
}

.save-btn {
  height: calc(80rpx * var(--spacing-scale));
  background: $theme-brown-primary;
  color: white;
  font-size: calc(28rpx * var(--font-scale));
  border-radius: calc(16rpx * var(--border-radius-scale));
  text-align: center;
  line-height: calc(80rpx * var(--spacing-scale));
  font-weight: 500;

  .container--elder & {
    font-weight: 600;
  }
}

/* 交互效果 */
uni-list-item {
  transition: all 0.2s;

  &:active {
    background-color: #f8f8f8;
  }
}

.safearea-bottom {
  height: env(safe-area-inset-bottom);
  flex-shrink: 0;
}

.hint {
  padding: 20rpx 30rpx 40rpx;
  color: red;
  font-size: 28rpx;
  line-height: 50rpx;
}

.hint-large {
  font-size: 40rpx;
  line-height: 70rpx;
}
</style>