// 1. Vue/Vuex related
import { Component } from 'vue-property-decorator'

// 2. Third-party libraries
import { isObject } from '@tdio/utils'

// 3. Project utility functions
import { getRule } from '@/utils/validator'

// 4. Type definitions
import type { IDataModel } from '../types'

// 5. Components/Views
import AbsWorkbenchView from '../AbsView'

// 1. Decorators
@Component({ ... })
export default class ComponentName extends BaseView {
  // 2. Props
  @Prop() value!: Kv
  
  // 3. Refs
  @Ref() formRef!: ElForm
  
  // 4. Data properties
  model: Kv = {}
  
  // 5. Computed properties
  get computedValue () {
    return this.model.value
  }
  
  // 6. Methods
  validate () {
    // ...
  }
  
  // 7. Lifecycle hooks
  mounted () {
    // ...
  }
}

// ✅ GOOD - Explain complex logic
// Verify the uniqueness of the model name, requires asynchronous API call
async ruleValRepeatVerify (rule, value: string, callback) {
  // ...
}

// ❌ BAD - Meaningless comment
// Set value
setValue (key, value) {
  this.$set(this.value, key, value)
}

// ✅ GOOD - Add comments for complex functions
/**
 * Generate required validation rules
 * @param message Error prompt message
 * @param trigger Trigger timing, default is 'change'
 * @returns Validation rule object
 */
export const genRequired = (message?: string, trigger?: string): IValidateRuleItem => {
  // ...
}

// ✅ GOOD - Clear error handling
try {
  await this.saveData(this.model!)
} catch (error) {
  console.error('Save failed:', error)
  this.$message.error('Save failed, please try again')
  throw error
}

// ❌ BAD - Ignore errors
try {
  await this.saveData(this.model!)
} catch (e) {}