<template>
  <div class="dimension-edit-modal">
    <el-form ref="formRef" :model="form" :rules="rules" :label-width="formLabelWidth">
      <el-form-item :label="t('dataReport.dimensionName')" prop="name">
        <el-input v-model="form.name" :placeholder="t('dataReport.enterDimensionName')" />
      </el-form-item>
      <el-form-item :label="t('dataReport.dimensionCode')" prop="code">
        <el-input v-model="form.code" :placeholder="t('dataReport.enterDimensionCode')" />
      </el-form-item>
      <el-form-item :label="t('dataReport.dimensionDescription')" prop="memo">
        <el-input v-model="form.memo" type="textarea" :rows="3"
          :placeholder="t('dataReport.enterDimensionDescription')" />
      </el-form-item>
      <el-form-item :label="t('dataReport.unitType')" prop="unitType">
        <el-select v-model="form.unitType" :placeholder="t('dataReport.selectUnitType')" style="width: 100%">
          <el-option :label="t('dataReport.quantity')" :value="0" />
          <el-option :label="t('dataReport.amount')" :value="1" />
          <el-option :label="t('dataReport.percentage')" :value="2" />
          <el-option :label="t('dataReport.time')" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('dataReport.viewType')" prop="viewType">
        <el-select v-model="form.viewType" :placeholder="t('dataReport.selectViewType')" style="width: 100%">
          <el-option :label="t('dataReport.lineChart')" value="line" />
          <el-option :label="t('dataReport.barChart')" value="bar" />
          <el-option :label="t('dataReport.pieChart')" value="pie" />
          <el-option :label="t('dataReport.table')" value="table" />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('common.status')" prop="status">
        <el-switch v-model="form.status" :active-value="1" :inactive-value="0" :active-text="t('common.enabled')"
          :inactive-text="t('common.disabled')" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useFormConfig } from '@/hooks/useFormConfig'

// 使用国际化
const { t } = useI18n();

// 使用表单配置hooks
const { formLabelWidth } = useFormConfig({ enWidth: '160px', zhWidth: '120px' });

const props = defineProps({
  title: {
    type: String,
    default: () => t('dataReport.editDimension')
  },
  type: {
    type: String,
    default: 'add'
  },
  dimensionData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['confirm'])

const formRef = ref()
const form = reactive({
  id: null,
  name: '',
  code: '',
  memo: '',
  unitType: 0,
  viewType: '',
  status: 1
})

const rules = {
  name: [
    { required: true, message: t('dataReport.enterDimensionName'), trigger: 'blur' },
    { min: 2, max: 50, message: t('dataReport.dimensionNameLength'), trigger: 'blur' }
  ],
  code: [
    { required: true, message: t('dataReport.enterDimensionCode'), trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: t('dataReport.dimensionCodeFormat'), trigger: 'blur' }
  ],
  memo: [
    { required: true, message: t('dataReport.enterDimensionDescription'), trigger: 'blur' }
  ],
  unitType: [
    { required: true, message: t('dataReport.selectUnitType'), trigger: 'change' }
  ],
  viewType: [
    { required: true, message: t('dataReport.selectViewType'), trigger: 'change' }
  ]
}

// 监听props变化，初始化表单数据
watch(() => props.dimensionData, (newData) => {
  if (newData && Object.keys(newData).length > 0) {
    Object.assign(form, newData)
  }
}, { immediate: true, deep: true })

// 表单验证和提交
const handleConfirm = async () => {
  try {
    await formRef.value.validate()
    emit('confirm', { ...form })
    return true
  } catch (error) {
    ElMessage.error(t('dataReport.completeFormInfo'))
    return false
  }
}

// 暴露给父组件的方法
defineExpose({
  handleConfirm
})
</script>

<style scoped>
.dimension-edit-modal {
  padding: 20px;
}

.el-form {
  max-width: 600px;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>