<template>
  <view class="main">
    <u-loading-page :loading="loading" /> 
    <SimpleDynamicFormUni
      ref="formRef"
      :formDefine="formDefine"
      :formProps="{
        labelPosition: 'top',
        labelWidth: '720rpx',
      }"
      :formGlobalParams="querys"
    />
    <u-button type="primary" @click="submit">提交</u-button>
    <u-safe-bottom />
    <Success ref="popupRef" @back="backPrev" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { showError } from '@/common/composeabe/ErrorDisplay';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { getVillageInfoForm } from './forms';
import { backAndCallOnPageBack } from '@imengyu/imengyu-utils/dist/uniapp/PageAction';
import type { FormDefine, FormExport } from '@/common/components/form';
import VillageInfoApi, { CommonInfoModel } from '@/api/inhert/VillageInfoApi';
import SimpleDynamicFormUni from '@/common/components/form/SimpleDynamicFormUni.vue';
import Success from './success.vue';
import { RequestApiError } from '@imengyu/imengyu-utils/dist/request';

const popupRef = ref();
const loading = ref(false);

const formRef = ref<FormExport>();
const formDefine = ref<FormDefine>();

async function submit() {
  if (!formRef.value)
    return;
  try {
    const data = await formRef.value.submitForm<CommonInfoModel>();
    if (!data)
      return;
    loading.value = true;
    data.type = querys.value.subId;
    await VillageInfoApi.updateInfo(
      querys.value.subType,
      querys.value.villageId,
      querys.value.villageVolunteerId,
      data,
    );
    popupRef.value.open();
  } catch (e) {
    showError(e);
  } finally {
    loading.value = false;
  }
}
function backPrev(needRefresh: boolean) {
  backAndCallOnPageBack('list', {
    needRefresh,
  });
}

const { querys } = useLoadQuerys({ 
  villageId: 0,  
  villageVolunteerId: 0,
  subType: '',
  subId: 0,
  id: 0,
}, async (querys) => {
  loading.value = true;
  if (!formRef.value)
    return;

  let formData = undefined;

  try {
    const [model, forms] = getVillageInfoForm(querys.subType, querys.subId);
    formRef.value.initFormData(() => new model());
    formDefine.value = forms;
    if (querys.id >= 0)
      formData = await VillageInfoApi.getInfo(
        querys.subType, 
        querys.subId,
        querys.villageId, 
        querys.villageVolunteerId,
        querys.id,
        model,
      );
  } catch (e) {
    if (!(e instanceof RequestApiError && e.errorMessage.startsWith('请完成')))
      showError(e, undefined, () => backPrev(false));
  } finally {
    loading.value = false;
  }

  if (formData) {
    formRef.value.loadFormData(formData);
  }
});


</script>

<style lang="scss" scoped>
.form-block {
  margin-bottom: 32rpx;
  padding: 24rpx 26rpx;
  background: #fff;
  border-radius: 10rpx;
}

::v-deep .uni-forms-item__label {
  font-weight: 600;
  font-size: 28rpx;
  color: #23262D;
  line-height: 36rpx;
}
::v-deep .uni-input-placeholder,::v-deep .uni-textarea-placeholder, ::v-deep .uni-select__input-placeholder, ::v-deep .uni-date__x-input, ::v-deep .is-disabled .uni-easyinput__placeholder-class{
  font-weight: 400;
  font-size: 28rpx;
  color: #999999;
}
::v-deep .uni-easyinput__content.is-disabled {
  background-color: #fff;
  cursor: pointer;
}
button[type="primary"] {
  background: #FF8719;
  border-radius: 16rpx;
  font-size: 28rpx;
  padding: 8rpx;
  color: #FFFFFF;
  font-weight: 600;
}
.address-select {
  position: relative;
  width: 100%;  // 添加宽度
  height: 100%;
}
.input-wrapper {
  width: 100%;
  height: 100%;
  pointer-events: none;  /* 禁用内部元素的点击事件 */
}
::v-deep .uni-easyinput__content.is-disabled {
  background-color: #fff;
  cursor: pointer;
  width: 100%;  // 确保输入框宽度占满
}
::v-deep .popup-content{
  text-align: center;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 22rpx 44rpx 37rpx;
  image{
    width: 158rpx;
    height:186rpx;
    display: block;
    margin: 0 auto;
    margin-bottom: 12rpx;
  }
  text{
    font-weight: 500;
    font-size: 24rpx;
    color: #666666;
  }
}
</style>
