<!-- 状态测试组件 -->
<template>
  <div style="padding: 20px;">
    <h3>状态测试</h3>
    <div style="margin-bottom: 16px;">
      <label>当前状态值: {{ currentStatus }}</label>
    </div>
    <div style="margin-bottom: 16px;">
      <a-switch
        checked-children="正常"
        un-checked-children="冻结"
        :checked="currentStatus === 0"
        @change="handleStatusChange"
      />
    </div>
    <div style="margin-bottom: 16px;">
      <a-button type="primary" @click="testSave">测试保存</a-button>
    </div>
    <div>
      <h4>调试信息:</h4>
      <pre>{{ debugInfo }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';

const currentStatus = ref(0); // 0=正常, 1=冻结
const debugInfo = reactive({
  originalStatus: 0,
  currentStatus: 0,
  switchChecked: true,
  lastChange: null
});

const handleStatusChange = (checked: boolean) => {
  const newStatus = checked ? 0 : 1;
  console.log('状态变化:', { checked, newStatus, oldStatus: currentStatus.value });
  
  currentStatus.value = newStatus;
  debugInfo.currentStatus = newStatus;
  debugInfo.switchChecked = checked;
  debugInfo.lastChange = new Date().toLocaleTimeString();
  
  message.info(`状态已变更为: ${checked ? '正常' : '冻结'} (${newStatus})`);
};

const testSave = () => {
  const testData = {
    userId: 123,
    status: currentStatus.value,
    realName: '测试用户'
  };
  
  console.log('测试保存数据:', testData);
  message.success(`保存成功！状态: ${currentStatus.value === 0 ? '正常' : '冻结'}`);
};

// 初始化调试信息
debugInfo.originalStatus = currentStatus.value;
debugInfo.currentStatus = currentStatus.value;
debugInfo.switchChecked = currentStatus.value === 0;
</script>
