<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">
            <uni-list>
              <uni-list-item direction="column">
                <template v-slot:body>
                  <view class="info-item">
                    <text class="item-label">姓名</text>
                    <input v-model="form.name" :maxlength="20" class="item-value" type="text"
                      placeholder="请输入姓名" />
                  </view>
                  <view class="info-item">
                    <text class="item-label">证件类型</text>
                    <text class="item-value">身份证</text>
                  </view>
                  <view class="info-item">
                    <text class="item-label">证件号</text>
                    <input v-model="form.certNo" :maxlength="18" class="item-value" type="idcard"
                      placeholder="请输入证件号" />
                  </view>
                  <view class="info-item">
                    <text class="item-label">手机号</text>
                    <input v-model="form.mobile" :maxlength="11" class="item-value" type="number"
                      placeholder="请输入手机号" />
                  </view>
                  <view class="info-item address-item">
                    <view class="address-header">
                      <text class="item-label">地址</text>
                      <text class="choose-address" @click="chooseAddress">选择地址</text>
                    </view>
                    <textarea v-model="form.address" :maxlength="200" class="address-textarea"
                      placeholder="请输入详细地址"></textarea>
                  </view>
                </template>
              </uni-list-item>
            </uni-list>
          </view>
        </scroll-view>
      </view>

      <view class="save-footer">
        <view class="save-btn" :class="{ 'save-btn--disabled': loading }" @click="confirm">
          {{ loading ? '保存中...' : '保存' }}
        </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 { addHlwPatient, getHlwPatient, updateHlwPatient } from '@/utils/api';
import { isChinaId } from '@/utils/validator';
import { toast } from '@/utils/widget';
import reLogin from '@/components/re-login.vue';

const id = ref('');
const loading = ref(false);
const elderMode = ref(false);
const loadedPatientKey = ref('');
const form = ref({
  name: '',
  certNo: '',
  mobile: '',
  address: '',
});

const { userInfo, logined } = useUser();
const accountId = computed(() => userInfo.value && userInfo.value.userId ? userInfo.value.userId : '');

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

function chooseAddress() {
  uni.chooseLocation({
    success: location => {
      const address = typeof location.address === 'string' ? location.address.trim() : '';
      const name = typeof location.name === 'string' ? location.name.trim() : '';
      form.value.address = address && name && !address.endsWith(name)
        ? `${address}${name}`
        : address || name;
    },
    fail: error => {
      if (!error || !/cancel/i.test(error.errMsg || '')) {
        toast('选择地址失败');
      }
    },
  });
}

async function confirm() {
  if (loading.value || !validateForm()) return;
  if (!accountId.value) {
    toast('请先登录');
    return;
  }

  loading.value = true;
  try {
    const payload = {
      accountId: accountId.value,
      name: form.value.name.trim(),
      certNo: form.value.certNo.trim(),
      mobile: form.value.mobile.trim(),
      address: form.value.address.trim(),
    };
    const api = id.value ? updateHlwPatient : addHlwPatient;
    const res = await api(id.value ? { ...payload, id: id.value } : payload);
    if (!res || !res.success) {
      toast((res && res.message) || '保存失败');
      return;
    }

    toast('保存成功');
    const pages = getCurrentPages();
    if (pages.length > 1) {
      uni.navigateBack();
    } else {
      uni.redirectTo({ url: '/pages/member/list' });
    }
  } catch (error) {
    toast(error.message || error || '保存失败');
  } finally {
    loading.value = false;
  }
}

async function loadPatient() {
  if (!id.value || !accountId.value) return;
  const patientKey = `${accountId.value}:${id.value}`;
  if (loadedPatientKey.value === patientKey) return;

  loading.value = true;
  try {
    const res = await getHlwPatient(accountId.value, id.value);
    if (!res || !res.success || !res.data) {
      toast((res && res.message) || '查询就诊人失败');
      return;
    }
    form.value = {
      name: res.data.name || '',
      certNo: res.data.certNo || '',
      mobile: res.data.mobile || '',
      address: res.data.address || '',
    };
    loadedPatientKey.value = patientKey;
  } catch (error) {
    toast(error.message || error || '查询就诊人失败');
  } finally {
    loading.value = false;
  }
}

onLoad(options => {
  id.value = options.id || '';
  uni.setNavigationBarTitle({ title: id.value ? '编辑就诊人' : '新增就诊人' });

  const savedElderMode = uni.getStorageSync('elderMode');
  if (savedElderMode !== null && savedElderMode !== undefined) {
    elderMode.value = savedElderMode;
  }
});

watch([id, accountId], loadPatient, { immediate: true });
</script>

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

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

.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;
  }
}

.address-item {
  display: block;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: calc(20rpx * var(--spacing-scale));
}

.choose-address {
  color: $theme-brown-primary;
  font-size: calc(30rpx * var(--font-scale));
  font-weight: 500;
}

.address-textarea {
  box-sizing: border-box;
  width: 100%;
  height: calc(160rpx * var(--spacing-scale));
  padding: calc(20rpx * var(--spacing-scale));
  border-radius: calc(8rpx * var(--border-radius-scale));
  background: #f7f7f7;
  color: #333;
  font-size: calc(30rpx * var(--font-scale));
  line-height: 1.5;
}

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

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

  .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;

  &--disabled {
    opacity: 0.6;
  }
}

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