<template>
  <div class="device-files-form">
    <el-form
      ref="formRef"
      :model="tableData"
      :rules="formRules"
      label-width="0px"
      :inline-message="true"
    >
      <el-table :data="tableData" row-key="id" style="width: 100%">
        <el-table-column label="序号" type="index" width="100" />
        <el-table-column prop="model" label="资料分类" width="180">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.model`" :rules="formRules.model" class="mb-0px!">
              <el-select v-model="row.model" placeholder="请选择资料分类" style="width: 100%">
                <el-option
                  v-for="dict in getIntDictOptions(DICT_TYPE.DEVICE_FILES_MODEL)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="资料名称" min-width="150">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.fileName`" :rules="formRules.fileName" class="mb-0px!">
              <el-input v-model="row.fileName" placeholder="请输入资料名称" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="fileUrl" label="资料路径" min-width="180">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.fileUrl`" :rules="formRules.fileUrl" class="mb-0px!">
              <UploadFile v-model="row.fileUrl" :limit="1" :file-size="100" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="显示顺序" min-width="120">
          <template #default="{ row, $index }">
            <el-form-item :prop="`${$index}.sort`" :rules="formRules.sort" class="mb-0px!">
              <el-input v-model="row.sort" placeholder="请输入显示顺序" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template #default="{ $index }">
            <el-button type="danger" link @click="handleDelete($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-row justify="center" class="mt-3">
      <el-button @click="handleAdd" round>+ 添加设备资料</el-button>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { FilesVO, FilesApi } from '@/api/device/files'

const props = defineProps({
  deviceId: {
    type: Number,
    default: undefined
  }
})

// 添加表单引用和规则
const formRef = ref()
const formRules = reactive({
  model: [{ required: true, message: '资料分类不能为空', trigger: 'blur' }],
  fileName: [{ required: true, message: '资料名称不能为空', trigger: 'blur' }],
  // fileUrl: [{ required: true, message: '资料路径不能为空', trigger: 'blur' }]
})

const tableData = ref<FilesVO[]>([])

/** 表单校验 */
const validate = () => {
  // 可以添加校验逻辑
  if (formRef.value) {
    return formRef.value.validate()
  }
  return Promise.resolve(true)
}

/** 获取数据 */
const getData = () => {
  return tableData.value
}

/** 添加行 */
const handleAdd = () => {
  tableData.value.push({
    id: undefined,
    // deviceId: undefined,
    model: undefined,
    fileName: undefined,
    fileUrl: undefined,
    sort: undefined,
  })
}

/** 删除行 */
const handleDelete = (index: number) => {
  tableData.value.splice(index, 1)
}

// 初始化数据
const init = async () => {
  if (props.deviceId) {
    const res = await FilesApi.listByDeviceId(props.deviceId)
    tableData.value = res || []
  } else {
    tableData.value = []
  }
}

// 监听设备ID变化
watch(() => props.deviceId, () => {
  init()
}, { immediate: true })

defineExpose({
  validate,
  getData
})
</script>

<style scoped>
.device-files-form {
  padding: 10px;
}
</style>
