<!-- src/components/AccountSecurity.vue -->
<script setup lang="ts">
import { ref, reactive } from 'vue';
import {
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  CloseOutlined,
  SaveOutlined,
} from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';

// 定义安全项接口
interface SecurityItem {
  title: string;
  description: string;
  status: 'unset' | 'bound' | 'unverified' | 'verified';
  actionText: string;
  actionHandler: () => void;
}

const securityItems = ref<SecurityItem[]>([
  {
    title: '登录密码',
    description: '安全性高的密码可以使账号更安全。建议您定期更换密码，设置一个包含字母和数字且长度超过8位的密码',
    status: 'unset',
    actionText: '设置',
    actionHandler: () => openSetPasswordModal(),
  },
  {
    title: '手机绑定',
    description: '您已绑定了手机178****5075您的手机号可以直接用于登录、找回密码等',
    status: 'bound',
    actionText: '修改',
    actionHandler: () => alert('跳转到修改手机号页面'),
  },
  {
    title: '实名认证',
    description: '实名认证后可以使用AutoDL更完整的功能，如打开实例的自定义服务等',
    status: 'unverified',
    actionText: '立即认证',
    actionHandler: () => alert('跳转到实名认证页面'),
  },
  {
    title: '微信绑定',
    description: '您已绑定微信，可快速扫码登录',
    status: 'bound',
    actionText: '解绑',
    actionHandler: () => alert('确认解绑微信？'),
  },
  {
    title: '邮箱绑定',
    description: '绑定邮箱后可接收系统消息，如余额不足、实例即将到期、实例即将释放等消息',
    status: 'unset',
    actionText: '绑定',
    actionHandler: () => alert('跳转到绑定邮箱页面'),
  },
]);


const getStatusIcon = (status: SecurityItem['status']) => {
  switch (status) {
    case 'bound':
      return CheckCircleOutlined;
    case 'unverified':
    case 'unset':
      return ExclamationCircleOutlined;
    default:
      return null;
  }
};

const getStatusColor = (status: SecurityItem['status']) => {
  switch (status) {
    case 'bound':
      return 'green';
    case 'unverified':
    case 'unset':
      return 'red';
    default:
      return 'gray';
  }
};

const getActionColor = (status: SecurityItem['status']) => {
  return 'blue'; // 统一蓝色即可
};

// 弹窗控制
const setPasswordModalVisible = ref(false);

// 表单数据
const form = reactive({
  phoneNumber: '+86 178****5075', // 示例手机号
  smsCode: '',
  newPassword: '',
  confirmPassword: '',
});

// 验证码倒计时
const countdown = ref(0);
const isSending = ref(false);

// 发送验证码
const sendSmsCode = () => {
  if (isSending.value) return;
  isSending.value = true;
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      isSending.value = false;
      countdown.value = 0;
    }
  }, 1000);
  message.success('验证码已发送');
};

// 重置表单
const resetForm = () => {
  form.smsCode = '';
  form.newPassword = '';
  form.confirmPassword = '';
  countdown.value = 0;
  isSending.value = false;
};

// 打开设置密码弹窗
const openSetPasswordModal = () => {
  resetForm();
  setPasswordModalVisible.value = true;
};

// 关闭弹窗
const closeSetPasswordModal = () => {
  setPasswordModalVisible.value = false;
  resetForm();
};

// 保存密码
const savePassword = () => {
  if (!form.smsCode) {
    message.error('请输入验证码');
    return;
  }
  if (!form.newPassword) {
    message.error('请输入新密码');
    return;
  }
  if (!form.confirmPassword) {
    message.error('请确认密码');
    return;
  }
  if (form.newPassword !== form.confirmPassword) {
    message.error('两次输入的密码不一致');
    return;
  }
  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(form.newPassword)) {
    message.error('密码必须为8~16位，且包含字母和数字');
    return;
  }

  // 模拟提交成功
  message.success('密码设置成功！');
  closeSetPasswordModal();
};
</script>

<template>
  <div class="account-security">
    <h2>账号安全</h2>
    <div v-for="(item, index) in securityItems" :key="index" class="security-item">
      <div class="item-header">
        <span class="title">{{ item.title }}</span>
        <div class="status">
          <component
            :is="getStatusIcon(item.status)"
            v-if="getStatusIcon(item.status)"
            :class="['icon', `color-${getStatusColor(item.status)}`]"
          />
          <span :class="['text', `color-${getStatusColor(item.status)}`]">
            {{ item.status === 'bound' ? '已绑定' : item.status === 'unverified' ? '未认证' : '未设置' }}
          </span>
          <span class="divider">|</span>
          <button
            class="action-btn"
            :class="`color-${getActionColor(item.status)}`"
            @click="item.actionHandler"
          >
            {{ item.actionText }}
          </button>
        </div>
      </div>
      <p class="description">{{ item.description }}</p>
    </div>

    <!-- 设置密码弹窗 -->
    <a-modal
      v-model:visible="setPasswordModalVisible"
      title="设置密码"
      width="500px"
      :footer="null"
      @cancel="closeSetPasswordModal"
    >
      <div style="padding: 24px 0;">
        <div style="margin-bottom: 24px; font-size: 16px; color: #333;">
          手机号：{{ form.phoneNumber }}
        </div>

        <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
          <span style="color: red;">*</span>
          <label style="font-size: 14px; color: #333;">手机验证码：</label>
          <a-input
            v-model:value="form.smsCode"
            placeholder="请输入验证码"
            style="flex: 1;"
          />
          <a-button
            type="primary"
            :disabled="isSending || countdown > 0"
            @click="sendSmsCode"
            style="width: 120px;"
          >
            {{ isSending || countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
          </a-button>
        </div>

        <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
          <span style="color: red;">*</span>
          <label style="font-size: 14px; color: #333;">设置新密码：</label>
          <a-input
            v-model:value="form.newPassword"
            placeholder="请输入8～16位包含数字和字母的密码"
            type="password"
            style="flex: 1;"
          />
        </div>

        <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
          <span style="color: red;">*</span>
          <label style="font-size: 14px; color: #3 33;">确认新密码：</label>
          <a-input
            v-model:value="form.confirmPassword"
            placeholder="请确认密码"
            type="password"
            style="flex: 1;"
          />
        </div>
      </div>

      <div style="text-align: right; padding: 16px 24px;">
        <a-button @click="closeSetPasswordModal" style="margin-right: 8px;">取消</a-button>
        <a-button type="primary" @click="savePassword">保存</a-button>
      </div>
    </a-modal>
  </div>
</template>

<style scoped>
.account-security {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
  background-color: #f9f9f9;
}

.account-security h2 {
  margin-top: 0;
  color: #333;
  font-size: 1.4em;
}

.security-item {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.title {
  font-weight: bold;
  color: #333;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon {
  font-size: 16px;
  line-height: 1;
}

.text {
  font-size: 14px;
  font-weight: normal;
}

.divider {
  color: #ccc;
  font-size: 14px;
}

.action-btn {
  background: none;
  border: none;
  color: #0066cc;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  margin-left: 8px;
  text-decoration: underline;
}

.action-btn:hover {
  text-decoration: none;
}

.color-green {
  color: #52c41a !important;
}

.color-red {
  color: #ff4d4f !important;
}

.color-blue {
  color: #0066cc !important;
}

.description {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
</style>