<template>
  <BasicLayout>
    <view class="p-15">
      <view class="white-bg-color p-15 r-md" v-if="notice">
        <view> 各位家长：</view>
        <view class="notice-text">
          {{ notice }}
        </view>
      </view>
      <BasicSign ref="signCompRef" title="签名"></BasicSign>
    </view>
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="flex-row items-center pb-10 pt-5">
          <u-button
            text="下一步"
            class="mx-15"
            type="primary"
            @click="submit"
          />
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { xkgzsApi } from "@/api/base/server";
import { updateSignFileApi } from "@/api/system/login";
import { useDataStore } from "@/store/modules/data";
import { useUserStore } from "@/store/modules/user";
import { showLoading } from "@/utils/uniapp";
import { onLoad } from "@dcloudio/uni-app";
import BasicSign from "@/components/BasicSign/Sign.vue";

const signCompRef = ref<any>(null);
const sign_file = ref<any>(null);
const { setData, getGlobal } = useDataStore();
const userStore = useUserStore();

const notice = ref("");
onLoad(async () => {
  showLoading({ title: "加载中..." });
  const res = await xkgzsApi({ kcLx: "兴趣课" });
  notice.value = res.rows?.[0]?.content || "";
  uni.hideLoading();
});

async function submit() {
  try {
    // 获取签名数据
  const data = await signCompRef.value.getSyncSignature();
  sign_file.value = data.base64;
    
    // 获取当前用户信息
    const userInfo = userStore.getUser;
    
    // 检查localStorage userdata中是否已有signFile
    const hasExistingSignFile = userInfo && userInfo.signFile;
    
    // 更新localStorage userdata中的signFile
  setData({
    sign_file: sign_file.value,
  });
    
    // 如果localStorage userdata中没有signFile，则调用后端API更新u_user表
    if (!hasExistingSignFile && userInfo && userInfo.userId) {
      try {
        await updateSignFileApi({
          userId: userInfo.userId,
          signFile: sign_file.value
        });
        console.log('签名数据已更新到后端数据库');
      } catch (error) {
        console.error('更新后端签名数据失败:', error);
        // 即使后端更新失败，也不影响前端流程继续
      }
    }
    
    // 跳转到下一页
    uni.reLaunch({
      url: "/pages/base/xk/qk/xqk",
    });
    
  } catch (error) {
    console.error('提交签名失败:', error);
    uni.showToast({
      title: '签名提交失败',
      icon: 'none'
    });
  }
}
</script>

<style lang="scss" scoped>
.notice-text {
  margin-top: 10px;
  text-indent: 2em; /* 添加两个中文字符的缩进 */
}
</style>