<template>
  <el-form ref="formRef" :model="form" :rules="rules">
    <el-collapse v-model="activePanels">
      <!-- 注意：data-panel-name 的值必須和 name 一致 -->
      <el-collapse-item 
        title="基本信息" 
        name="basic"
        data-panel-name="basic"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item 
        title="聯(lián)系方式" 
        name="contact"
        data-panel-name="contact"
      >
        <el-form-item label="郵箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </el-form>
</template>

export default {
  data() {
    return {
      activePanels: ['basic'], // 初始展開的面板
      form: { name: '', email: '' },
      rules: {
        name: [{ required: true, message: '請輸入姓名' }],
        email: [{ required: true, message: '請輸入郵箱', type: 'email' }]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate((valid, invalidFields) => {
        if (!valid) {
          this.$nextTick(() => {
            const firstErrorItem = this.$el.querySelector('.el-form-item.is-error');
            if (!firstErrorItem) return;
            // 向上查找所屬面板
            let panelName = null;
            let parent = firstErrorItem.parentElement;
            while (parent && parent !== document.body) {
              const nameAttr = parent.getAttribute?.('data-panel-name');
              if (nameAttr) {
                panelName = nameAttr;
                break;
              }
              parent = parent.parentElement;
            }
            // 如果面板未展開，則展開它
            if (panelName && !this.activePanels.includes(panelName)) {
              this.activePanels = [...this.activePanels, panelName];
              // 等待面板展開完成后再滾動
              this.$nextTick(() => {
                this.scrollToErrorField(firstErrorItem);
              });
            } else {
              // 面板已展開，直接滾動
              this.scrollToErrorField(firstErrorItem);
            }
          });
        } else {
          console.log('? 提交成功');
        }
      });
    },
    scrollToErrorField(el) {
      if (!el) return;
      // 平滑滾動到視圖中央
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
      // 自動聚焦到輸入框（兼容 el-select 等組件）
      const input = el.querySelector(
        'input:not([type="hidden"]), textarea, .el-select__input'
      );
      input?.focus();
    }
  }
};