<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-08-06 12:03:17
 * @FilePath: /jgdl/src/pages/collectionSettings/index.vue
 * @Description: 收款设置
-->
<template>
  <view class="collection-settings">

    <!-- 设置列表 -->
    <view class="settings-list">
      <!-- 收款账号 -->
      <view class="setting-item" @click="openAccountModal">
        <view class="setting-left">
          <text class="setting-label">收款账号</text>
        </view>
        <view class="setting-right">
          <text class="setting-status" :class="{ 'status-set': accountInfo.bankName }">
            {{ accountInfo.bankName ? '已设置' : '未设置' }}
          </text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 身份信息 -->
      <view class="setting-item" @click="openIdentityModal">
        <view class="setting-left">
          <text class="setting-label">身份信息</text>
        </view>
        <view class="setting-right">
          <text class="setting-status" :class="{ 'status-set': identityInfo.userName }">
            {{ identityInfo.userName ? '已设置' : '未设置' }}
          </text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 收款账号弹窗 -->
    <nut-popup
      v-model:visible="showAccountModal"
      position="bottom"
      :style="{ width: '100%', height: '85%' }"
      :catch-move="true"
      closeable
      close-icon-position="top-right"
      @close="closeAccountModal"
    >
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">收款账号设置</text>
        </view>

        <view class="form-content">
          <view class="form-item">
            <text class="form-label">银行名称</text>
            <view class="bank-selector" @click="showBankPicker">
              <text class="bank-text" :class="{ 'bank-selected': tempAccountInfo.bankName }">
                {{ tempAccountInfo.bankName || '请选择银行' }}
              </text>
              <text class="arrow-down">></text>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">银行账号</text>
            <input
              v-model="tempAccountInfo.bankAccount"
              placeholder="请输入银行账号"
              class="form-input custom-input native-input"
              type="number"
              :cursor-spacing="50"
            />
          </view>
        </view>

        <view class="modal-footer">
          <nut-button
            type="default"
            @click="closeAccountModal"
            class="footer-btn footer-btn-cancel"
          >
            关闭
          </nut-button>
          <nut-button
            type="primary"
            @click="saveAccountInfo"
            color="#ffa500"
            :disabled="!tempAccountInfo.bankName || !tempAccountInfo.bankAccount"
            class="footer-btn footer-btn-save"
          >
            保存
          </nut-button>
        </view>
      </view>
    </nut-popup>

    <!-- 银行选择器弹窗 -->
    <nut-popup
      v-model:visible="showBankModal"
      position="bottom"
    >
      <nut-picker
        v-model="bankPickerValue"
        :columns="bankOptions"
        title="选择银行"
        @confirm="onBankConfirm"
        @cancel="showBankModal = false"
      ></nut-picker>
    </nut-popup>

    <!-- 身份信息弹窗 -->
    <nut-popup
      v-model:visible="showIdentityModal"
      position="bottom"
      :style="{ width: '100%', height: '85%' }"
      :catch-move="true"
      closeable
      close-icon-position="top-right"
      @close="closeIdentityModal"
    >
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">身份信息设置</text>
        </view>

        <view class="form-content">
          <view class="form-item">
            <text class="form-label">用户名称</text>
            <input
              v-model="tempIdentityInfo.userName"
              placeholder="请输入真实姓名"
              class="form-input native-input"
            />
          </view>

          <view class="form-item">
            <text class="form-label">身份证号码</text>
            <input
              v-model="tempIdentityInfo.idCard"
              placeholder="请输入身份证号码"
              class="form-input native-input"
              maxlength="18"
              @blur="handleIdCardBlur"
              :cursor-spacing="50"
            />
            <text v-if="idCardError" class="error-text">{{ idCardError }}</text>
          </view>
        </view>

        <view class="modal-footer">
          <nut-button
            type="default"
            @click="closeIdentityModal"
            class="footer-btn footer-btn-cancel"
          >
            关闭
          </nut-button>
          <nut-button
            type="primary"
            @click="saveIdentityInfo"
            color="#ffa500"
            :disabled="!tempIdentityInfo.userName || !tempIdentityInfo.idCard || !!idCardError"
            class="footer-btn footer-btn-save"
          >
            保存
          </nut-button>
        </view>
      </view>
    </nut-popup>

    <!-- 固定返回按钮 - 只有当参数target=sell时才显示 -->
    <view v-if="showBackButton" class="fixed-back-btn" @click="goBack">
      <text class="back-text">返回</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import Taro from "@tarojs/taro";
import "./index.less";

// 导入接口
import { updateProfileAPI, getProfileAPI } from '@/api/index'
// 导入用户状态管理
import { useUserStore } from '@/stores/user'

// 获取页面参数
const instance = Taro.getCurrentInstance()
const { target } = instance.router?.params || {}

// 用户状态管理
const userStore = useUserStore()

/**
 * 判断是否显示返回按钮
 * 只有当参数target=sell时才显示
 */
const showBackButton = computed(() => {
  return target === 'sell'
})

/**
 * 收款账号信息
 */
const accountInfo = ref({
  bankName: '',
  bankAccount: ''
});

/**
 * 身份信息
 */
const identityInfo = ref({
  userName: '',
  idCard: ''
});

/**
 * 临时收款账号信息（用于弹窗编辑）
 */
const tempAccountInfo = ref({
  bankName: '',
  bankAccount: ''
});

/**
 * 临时身份信息（用于弹窗编辑）
 */
const tempIdentityInfo = ref({
  userName: '',
  idCard: ''
});

/**
 * 弹窗显示状态
 */
const showAccountModal = ref(false);
const showIdentityModal = ref(false);
const showBankModal = ref(false);

/**
 * 身份证号码错误信息
 */
const idCardError = ref('');

// 银行选择器当前选中的值
const bankPickerValue = ref([]);

/**
 * 银行列表数据（模拟数据，后期从接口获取）
 */
const bankOptions = ref([
  { text: '中国工商银行', value: '中国工商银行' },
  { text: '中国建设银行', value: '中国建设银行' },
  { text: '中国农业银行', value: '中国农业银行' },
  { text: '中国银行', value: '中国银行' },
  { text: '交通银行', value: '交通银行' },
  { text: '招商银行', value: '招商银行' },
  { text: '中信银行', value: '中信银行' },
  { text: '光大银行', value: '光大银行' },
  { text: '华夏银行', value: '华夏银行' },
  { text: '民生银行', value: '民生银行' },
  { text: '广发银行', value: '广发银行' },
  { text: '平安银行', value: '平安银行' },
  { text: '浦发银行', value: '浦发银行' },
  { text: '兴业银行', value: '兴业银行' },
  { text: '邮储银行', value: '邮储银行' }
]);



/**
 * 获取用户信息
 */
const getUserInfo = async () => {
  try {
    const result = await getProfileAPI();
    if (result.code && result.data) {
      const userInfo = result.data;

      // 设置收款账号信息
      if (userInfo.bank && userInfo.bank_no) {
        accountInfo.value = {
          bankName: userInfo.bank,
          bankAccount: userInfo.bank_no
        };
      }

      // 设置身份信息
      if (userInfo.name && userInfo.idcard) {
        identityInfo.value = {
          userName: userInfo.name,
          idCard: userInfo.idcard
        };
      }
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};

/**
 * 页面加载时获取用户信息
 */
onMounted(() => {
  getUserInfo();
});

/**
 * 身份证号码校验
 * @param {string} idCard - 身份证号码
 * @returns {boolean} - 是否有效
 */
const validateIdCard = (idCard) => {
  if (!idCard) {
    return { valid: false, error: '请输入身份证号码' };
  }

  // 身份证号码正则表达式
  const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

  if (!idCardRegex.test(idCard)) {
    return { valid: false, error: '身份证号码格式不正确' };
  }

  // 校验码验证
  const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
  const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];

  let sum = 0;
  for (let i = 0; i < 17; i++) {
    sum += parseInt(idCard[i]) * weights[i];
  }

  const checkCode = checkCodes[sum % 11];
  const lastChar = idCard[17].toUpperCase();

  if (checkCode !== lastChar) {
    return { valid: false, error: '身份证号码校验失败' };
  }

  return { valid: true, error: '' };
};

/**
 * 处理身份证号码失焦事件
 */
const handleIdCardBlur = () => {
  const idCard = tempIdentityInfo.value.idCard;
  if (idCard) {
    const result = validateIdCard(idCard);
    idCardError.value = result.error;
  } else {
    idCardError.value = '';
  }
};

/**
 * 显示银行选择弹窗
 */
const showBankPicker = () => {
  // 设置当前选中的值
  if (tempAccountInfo.value.bankName) {
    bankPickerValue.value = [tempAccountInfo.value.bankName];
  } else {
    bankPickerValue.value = [bankOptions.value[0].value];
  }
  showBankModal.value = true;
};



/**
 * 银行选择确认回调
 */
const onBankConfirm = ({ selectedValue }) => {
  tempAccountInfo.value.bankName = selectedValue[0];
  showBankModal.value = false;
};

/**
 * 打开收款账号弹窗
 */
const openAccountModal = () => {
  tempAccountInfo.value = { ...accountInfo.value };
  showAccountModal.value = true;
};

/**
 * 关闭收款账号弹窗
 */
const closeAccountModal = () => {
  showAccountModal.value = false;
  tempAccountInfo.value = { bankName: '', bankAccount: '' };
};

/**
 * 保存收款账号信息
 */
const saveAccountInfo = async () => {
  if (!tempAccountInfo.value.bankName || !tempAccountInfo.value.bankAccount) {
    Taro.showToast({
      title: '请填写完整信息',
      icon: 'none'
    });
    return;
  }

  try {
    // 调用API保存收款账号信息
    const result = await updateProfileAPI({
      bank: tempAccountInfo.value.bankName,
      bank_no: tempAccountInfo.value.bankAccount
    });

    if (result.code) {
      accountInfo.value = { ...tempAccountInfo.value };

      // 更新全局用户状态
      userStore.updateUserInfo({
        bank: tempAccountInfo.value.bankName,
        bank_no: tempAccountInfo.value.bankAccount
      });

      closeAccountModal();

      Taro.showToast({
        title: '保存成功',
        icon: 'success'
      });
    }
  } catch (error) {
    console.error('保存收款账号失败:', error);
    Taro.showToast({
      title: '保存失败，请重试',
      icon: 'none'
    });
  }
};

/**
 * 打开身份信息弹窗
 */
const openIdentityModal = () => {
  tempIdentityInfo.value = { ...identityInfo.value };
  idCardError.value = '';
  showIdentityModal.value = true;
};

/**
 * 关闭身份信息弹窗
 */
const closeIdentityModal = () => {
  showIdentityModal.value = false;
  tempIdentityInfo.value = { userName: '', idCard: '' };
  idCardError.value = '';
};

/**
 * 保存身份信息
 */
const saveIdentityInfo = async () => {
  if (!tempIdentityInfo.value.userName || !tempIdentityInfo.value.idCard) {
    Taro.showToast({
      title: '请填写完整信息',
      icon: 'none'
    });
    return;
  }

  const validation = validateIdCard(tempIdentityInfo.value.idCard);
  if (!validation.valid) {
    Taro.showToast({
      title: validation.error,
      icon: 'none'
    });
    return;
  }

  try {
    // 调用API保存身份信息
    const result = await updateProfileAPI({
      name: tempIdentityInfo.value.userName,
      idcard: tempIdentityInfo.value.idCard
    });

    if (result.code) {
      identityInfo.value = { ...tempIdentityInfo.value };

      // 更新全局用户状态
      userStore.updateUserInfo({
        name: tempIdentityInfo.value.userName,
        idcard: tempIdentityInfo.value.idCard
      });

      closeIdentityModal();

      Taro.showToast({
        title: '保存成功',
        icon: 'success'
      });
    } else {
      Taro.showToast({
        title: result.message || '保存失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('保存身份信息失败:', error);
    Taro.showToast({
      title: '保存失败，请重试',
      icon: 'none'
    });
  }
};

/**
 * 返回上一页
 */
const goBack = () => {
  Taro.redirectTo({
    url: '/pages/sell/index'
  });
};
</script>

<script>
export default {
  name: "collectionSettings",
};
</script>