<!--
 * @Date: 2025-08-27 17:44:53
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-22 15:25:23
 * @FilePath: /lls_program/src/pages/EditFamily/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="min-h-screen flex flex-col bg-[#F9FAFB]">
    <!-- <AppHeader title="编辑家庭" /> -->
    <view class="flex-1 px-4 py-6 overflow-auto">
      <view class="mb-6">
        <!-- <view class="text-gray-600 mb-6">
          请填写家庭信息，创建您的专属家庭空间
        </view> -->
        <!-- Family Name -->
        <view class="mb-6">
          <view class="bg-white rounded-lg border border-gray-200 p-4">
            <view class="block text-lg font-medium mb-2">家庭名称</view>
            <input
              type="text"
              v-model="familyName"
              class="w-full text-gray-600 focus:outline-none"
              placeholder="请输入家庭名称（最多10个字）"
              @blur="validateFamilyName"
            />
            <view v-if="familyNameError" class="text-red-500 text-sm mt-2">{{ familyNameError }}</view>
          </view>
        </view>
        <!-- Family Introduction -->
        <view class="mb-6">
          <view class="bg-white rounded-lg border border-gray-200 p-4">
            <view class="block text-lg font-medium mb-2">家庭介绍</view>
            <textarea
              v-model="familyIntro"
              class="w-full text-gray-600 focus:outline-none resize-none"
              placeholder="请输入您家庭的特色、成员特点等家庭标签（最多100个字）"
              :rows="2"
              @blur="validateFamilyIntro"
            />
            <view v-if="familyIntroError" class="text-red-500 text-sm mt-2">{{ familyIntroError }}</view>
          </view>
        </view>
        <!-- District Selection -->
        <view class="mb-6">
          <view class="bg-white rounded-lg border border-gray-200 p-4">
            <view class="block text-lg font-medium mb-4">便于家人找到家</view>
            <view class="bg-white rounded-xl p-4 border border-gray-200" @click="showDistrictPicker = true">
              <view class="flex justify-between items-center">
                <view>
                  <IconFont size="15" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD2.png" class="mr-2" />
                  <text :class="{'text-gray-400': !selectedDistrictText, 'text-gray-900': selectedDistrictText}" class="text-base">
                    {{ selectedDistrictText || '请选择区域' }}
                  </text>
                </view>
                <Right size="16" color="#888" />
              </view>
            </view>
          </view>
        </view>
        <!-- Family Motto -->
        <view class="mb-6">
          <view class="bg-white rounded-lg border border-gray-200 p-4">
            <view class="flex justify-between items-center mb-4">
              <view class="block text-lg font-medium">家训口令</view>
              <!-- <view
                @click="generateRandomMotto"
                class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm"
              >
                随机生成
              </view> -->
            </view>
            <view class="flex gap-2 mb-4">
              <view v-for="(char, index) in familyMotto" :key="index" class="flex-1">
                <view class="w-full aspect-square flex items-center justify-center bg-gray-100 rounded-lg">
                  <input
                    type="text"
                    v-model="familyMotto[index]"
                    :placeholder="familyMottoPlaceholder[index]"
                    placeholder-style="color: var(--secondary-color-text);"
                    @input="(e) => handleInputChange(index, e.target.value)"
                    @focus="focusedIndex = index"
                    @blur="handleBlur(index)"
                    class="w-full h-full bg-transparent text-center"
                    style="font-size: 38rpx;"
                    :cursorSpacing="100"
                  />
                </view>
              </view>
              <!-- <view class="flex-1 flex items-center justify-center">
                <view class="w-full aspect-square flex items-center justify-center bg-gray-100 rounded-lg text-blue-500">
                  <Edit size="20" />
                </view>
              </view> -->
            </view>
            <view class="flex items-center text-sm text-gray-600">
              <view>
                <IconFont size="15" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD3.png" />
                <text class="ml-1">设置有意义的家训口令，便于家人记忆和加入</text>
              </view>
            </view>
          </view>
        </view>
        <!-- Family Cover -->
        <view class="mb-10">
          <view class="bg-white rounded-lg border border-gray-200 p-4">
            <view class="block text-lg font-medium mb-2">
              家庭封面图（选填）
            </view>
            <!-- 封面显示区域 -->
            <view class="mb-4">
              <view class="relative bg-gray-100 rounded-lg h-48 flex items-center justify-center">
                <!-- 有图片时显示图片 -->
                <image
                  v-if="familyAvatar"
                  :src="familyAvatar"
                  class="w-full h-full rounded-lg object-cover"
                  mode="aspectFill"
                  @tap="previewAvatar"
                />
                <!-- 没有图片时显示上传提示 -->
                <view v-else class="flex flex-col items-center justify-center text-gray-400" @click="chooseImage">
                  <IconFont size="48" class="mb-2" name="https://cdn.ipadbiz.cn/lls_prog/icon/%E5%88%9B%E5%BB%BA%E5%AE%B6%E5%BA%AD4.png" />
                  <text class="text-sm">点击上传封面图</text>
                </view>
                <!-- 删除按钮 -->
                <view
                  v-if="familyAvatar"
                  @click.stop="deleteAvatar"
                  class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center"
                >
                  <view class="text-white text-lg">×</view>
                </view>
                <!-- 更换按钮 -->
                <view
                  v-if="familyAvatar"
                  @click.stop="chooseImage"
                  class="absolute bottom-3 right-2 px-3 py-1 bg-gray-600 bg-opacity-50 text-white text-sm rounded-full flex items-center"
                >
                  <Photograph size="14" class="mr-1" />
                  更换
                </view>
              </view>
            </view>
            <!-- 上传提示 -->
            <view class="text-center text-gray-400 text-sm">
              支持图片格式（jpg、png）最大5MB
            </view>
          </view>
        </view>
      </view>
      <!-- Submit Button -->
      <view
        @click="handleSaveFamily"
        class="w-full py-3 bg-blue-500 text-white text-lg font-medium rounded-lg flex items-center justify-center"
      >
        保存
      </view>
    </view>

    <!-- 图片预览 -->
    <nut-image-preview
      v-model:show="previewVisible"
      :images="previewImages"
      :init-no="previewIndex"
      :show-index="false"
      @close="closePreview"
    />

    <!-- 区域选择器 -->
    <nut-popup v-model:visible="showDistrictPicker" position="bottom">
      <nut-picker
        v-model="districtValue"
        :columns="districtColumns"
        @confirm="onDistrictConfirm"
        @cancel="showDistrictPicker = false"
        title="选择区域战队"
      ></nut-picker>
    </nut-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import { Edit, Tips, Photograph, Right, IconFont } from '@nutui/icons-vue-taro';
// import AppHeader from '../../components/AppHeader.vue';
import BASE_URL from '@/utils/config';
//
const defaultFamilyCoverSvg = 'https://cdn.ipadbiz.cn/lls_prog/images/default-family-cover.png';
// 获取接口信息
import { editFamilyAPI, getFamilyInfoAPI } from '@/api/family';
// 区域信息
import { SHANGHAI_REGION } from '@/utils/config';

const familyId = ref('');
const familyName = ref('');
const familyIntro = ref('');
const selectedDistrict = ref(null);
const selectedDistrictText = ref('');
const familyMotto = ref(['', '', '', '']);
const familyMottoPlaceholder = ref(['孝', '敬', '和', '睦']);

// 字数验证错误信息
const familyNameError = ref('');
const familyIntroError = ref('');

// 图片审核信息
const familyAvatarAudit = ref('');

// 区域选择器相关
const showDistrictPicker = ref(false);
const districtValue = ref([]);
const districtColumns = ref(SHANGHAI_REGION);
const familyAvatar = ref('');
const focusedIndex = ref(-1);
const defaultFamilyCover = ref();

// 图片预览相关
const previewVisible = ref(false);
const previewImages = ref([]);
const previewIndex = ref(0);

onMounted(async () => {
  Taro.setNavigationBarTitle({ title: '编辑家庭' });
  const { code, data } = await getFamilyInfoAPI();
  if (code) {
    familyId.value = data.id;
    familyName.value = data.name;
    familyIntro.value = data.note;
    districtValue.value = [+data.county];
    selectedDistrict.value = +data.county;
    selectedDistrictText.value = districtColumns.value.find(item => item.value === selectedDistrict.value)?.text;
    //
    familyMotto.value = data.passphrase.split('');
    familyAvatar.value = data.avatar_url;
  }
});

/**
 * @description 确认选择区域
 * @param {object} param0 - 包含 selectedValue 和 selectedOptions 的对象
 */
const onDistrictConfirm = ({ selectedValue, selectedOptions }) => {
  // 如果selectedValue[0]为0或无效，使用第一个区域作为默认值
  if (!selectedValue[0] || selectedValue[0] === 0) {
    const firstDistrict = districtColumns.value[0];
    selectedDistrict.value = firstDistrict.value;
    selectedDistrictText.value = firstDistrict.text;
    districtValue.value = [firstDistrict.value]; // 同步更新picker的值
  } else {
    selectedDistrict.value = +selectedValue[0]; // 确保转换为数字类型
    selectedDistrictText.value = selectedOptions.map((option) => option.text).join('');
  }

  showDistrictPicker.value = false;
};

/**
 * 处理输入变化
 */
const handleInputChange = (index, value) => {
  // 只保留第一个有效字符（汉字、数字、大小写字母）
  const validChar = value.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] || '';
  familyMotto.value[index] = validChar;
};

/**
 * 处理失焦事件
 */
const handleBlur = (index) => {
  focusedIndex.value = -1;
  // 确保只保留有效字符（汉字、数字、大小写字母）
  const value = familyMotto.value[index];
  const validChar = value.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] || '';
  familyMotto.value[index] = validChar;
};

/**
 * 显示提示信息
 */
const showToast = (message, type = 'success') => {
  Taro.showToast({
    title: message,
    icon: type,
    duration: 2000
  });
};

/**
 * 选择图片
 */
const chooseImage = () => {
  Taro.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
      const tempFilePath = res.tempFilePaths[0];

      // 检查文件大小（5MB = 5 * 1024 * 1024 bytes）
      Taro.getFileInfo({
        filePath: tempFilePath,
        success: function (fileInfo) {
          if (fileInfo.size > 5 * 1024 * 1024) {
            showToast('图片大小不能超过5MB', 'none');
            return;
          }
          uploadImage(tempFilePath);
        },
        fail: function () {
          // 如果获取文件信息失败，直接上传
          uploadImage(tempFilePath);
        }
      });
    },
    fail: function () {
      // showToast('选择图片失败', 'none');
    }
  });
};

/**
 * 上传图片到服务器
 */
const uploadImage = (filePath) => {
  // 显示上传中提示
  Taro.showLoading({
    title: '上传中',
    mask: true
  });

  wx.uploadFile({
    url: BASE_URL + '/admin/?m=srv&a=upload&image_audit=1',
    filePath,
    name: 'file',
    header: {
      'content-type': 'multipart/form-data',
    },
    success: function (res) {
      let upload_data = JSON.parse(res.data);
      Taro.hideLoading({
        success: () => {
          if (upload_data.code === 0 && upload_data.data) {
            familyAvatar.value = upload_data.data.src;
            familyAvatarAudit.value = upload_data.data.audit_result;
            showToast('上传成功', 'success');
          } else {
            showToast('服务器错误,稍后重试！', 'none');
          }
        },
      });
    },
    fail: function (res) {
      Taro.hideLoading({
        success: () => {
          showToast('上传失败,稍后重试！', 'none');
        }
      });
    }
  });
};

/**
 * 预览封面
 */
const previewAvatar = () => {
  const imageToPreview = familyAvatar.value || defaultFamilyCover.value;
  previewImages.value = [{ src: imageToPreview }];
  previewIndex.value = 0;
  previewVisible.value = true;
};

/**
 * 删除封面
 */
const deleteAvatar = () => {
  familyAvatar.value = '';
  showToast('封面已删除', 'success');
};

/**
 * 关闭预览
 */
const closePreview = () => {
  previewVisible.value = false;
};

/**
 * 验证家庭名称字数
 */
const validateFamilyName = () => {
  familyNameError.value = '';
  if (familyName.value.length > 10) {
    familyNameError.value = '家庭名称不能超过10个字';
  }
};

/**
 * 验证家庭介绍字数
 */
const validateFamilyIntro = () => {
  familyIntroError.value = '';
  if (familyIntro.value.length > 100) {
    familyIntroError.value = '家庭介绍不能超过100个字';
  }
};

/**
 * 表单验证
 */
const validateForm = () => {
  // 先验证字数
  validateFamilyName();
  validateFamilyIntro();

  if (!familyName.value.trim()) {
    showToast('请输入家庭名称', 'none');
    return false;
  }

  if (familyName.value.length > 10) {
    Taro.showModal({
      title: '提示',
      content: '家庭名称不能超过10个字，请重新输入',
      showCancel: false
    });
    return false;
  }

  if (!familyIntro.value.trim()) {
    showToast('请输入家庭介绍', 'none');
    return false;
  }

  if (familyIntro.value.length > 100) {
    Taro.showModal({
      title: '提示',
      content: '家庭介绍不能超过100个字，请重新输入',
      showCancel: false
    });
    return false;
  }

  if (!selectedDistrict.value) {
    showToast('请选择区域战队', 'none');
    return false;
  }

  // 检查家训口令是否完整填写
  const mottoComplete = familyMotto.value.every(char => char.trim() !== '');
  if (!mottoComplete) {
    showToast('请完整填写家训口令', 'none');
    return false;
  }

  return true;
};

/**
 * 保存家庭信息
 */
const handleSaveFamily = async () => {
  if (!validateForm()) {
    return;
  }

  // 调用API保存家庭信息
  const { code } = await editFamilyAPI({
    id: familyId.value,
    name: familyName.value,
    note: familyIntro.value,
    county: selectedDistrict.value,
    passphrase: familyMotto.value.join(''),
    avatar_url: familyAvatar.value,
    qiniu_audit: familyAvatarAudit.value,
  });
  if (code) {
    showToast('保存成功', 'success');

    setTimeout(() => {
      Taro.navigateBack();
    }, 1500);
  }
};
</script>