<template>
  <Dialog v-model="visible" :title="title" width="920px">
    <div class="formula-library-read-content">
      <el-alert
        v-if="hasExistingRecords"
        type="warning"
        :closable="false"
        :title="t('RecipeManagement.RecipeLibrary.readDialogOverwriteTip')"
        show-icon
        class="mb-15px"
      />
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id">
        <!-- <el-table-column type="index" :label="t('RecipeManagement.RecipeLibrary.tableIndexColumn')" align="center" width="70" /> -->
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.readDialogNameColumn')"
          align="center"
          prop="name"
          min-width="160"
        />
        <!-- <el-table-column :label="t('RecipeManagement.RecipeLibrary.readDialogReferColumn')" align="center" prop="refer" min-width="160" /> -->
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.readDialogDataTypeColumn')"
          align="center"
          prop="dataType"
          width="140"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.readDialogDataUnitColumn')"
          align="center"
          prop="dataUnit"
          width="140"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.readDialogMaxColumn')"
          align="center"
          prop="max"
          width="140"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.readDialogMinColumn')"
          align="center"
          prop="min"
          width="140"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.readDialogRemarkColumn')"
          align="center"
          prop="remark"
          min-width="180"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.readDialogReferColumn')"
          align="center"
          min-width="160"
          fixed="right"
          prop="refer"
        >
          <template #default="{ row }">
            <el-input
              v-model="row.refer"
              :placeholder="t('RecipeManagement.RecipeLibrary.readDialogReferPlaceholder')"
            />
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-show="total > 0"
        class="mt-15px flex justify-end"
        v-model:current-page="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :background="true"
        :page-sizes="[10, 20, 30, 50, 100]"
        :pager-count="7"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <template #footer>
      <el-button @click="submitForm" type="primary">
        {{ t('RecipeManagement.RecipeLibrary.readDialogSubmitButtonText') }}
      </el-button>
      <el-button @click="visible = false">
        {{ t('RecipeManagement.RecipeLibrary.readDialogCancelButton') }}
      </el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { RecipePointApi, RecipePointVO } from '@/api/iot/recipePoint'
import { RecipeDeviceRecordApi} from '@/api/iot/recipeDeviceRecord'
import { RecipePointRecordApi,RecipePointRecordVO} from '@/api/iot/recipepointrecord'

defineOptions({ name: 'FormulaLibraryReadDialog' })

type PageResult<T> = { list: T[]; total: number }

const visible = ref(false)
const title = ref('')
const loading = ref(false)
const hasExistingRecords = ref(false)

const recipeId = ref<string | number | undefined>(undefined)
const list = ref<RecipePointVO[]>([])
const total = ref(0)

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

const collectedValueMap = reactive<Record<string, string>>({})

const setPageData = (data: PageResult<RecipePointVO>) => {
  list.value = data.list ?? []
  total.value = data.total ?? 0
  for (const row of list.value) {
    const key = String(row.id ?? '')
    if (!key) continue
    if (collectedValueMap[key] === undefined) collectedValueMap[key] = ''
  }
}

const getList = async () => {
  if (!recipeId.value) return
  loading.value = true
  try {
    const data = await RecipePointApi.getRecipePointList(Number(recipeId.value))
    setPageData(data)
  } finally {
    loading.value = false
  }
}

const handleSizeChange = () => {
  queryParams.pageNo = 1
  getList()
}

const handleCurrentChange = () => {
  getList()
}

const formulaLibraryId = ref()
const open = async (options: {
  recipeId: string | number
  recipeName?: string
  data?: Array<RecipePointVO>
  id: number | undefined
  hasExistingRecords?: boolean
}) => {
  visible.value = true
  formulaLibraryId.value = options.id
  recipeId.value = options.recipeId
  hasExistingRecords.value = !!options.hasExistingRecords
  const baseTitle = t('RecipeManagement.RecipeLibrary.readDialogTitle')
  title.value = options.recipeName ? `${baseTitle}-${options.recipeName}` : baseTitle
  queryParams.pageNo = 1
  list.value = options.data ?? []
  // if (options.initialData) {
  //   // setPageData(options.initialData)
  //   return
  // }
  //await getList()
}
defineExpose({ open })


const submitForm = async() => {
  console.log(list.value)
  await RecipePointRecordApi.createRecipePointRecordBatch(list.value as unknown as RecipePointRecordVO[])
  await RecipeDeviceRecordApi.createRecipeDeviceRecordBatch(formulaLibraryId.value)
  visible.value = false
  message.success(t('common.createSuccess'))
}


</script>

<style scoped>
.formula-library-read-content {
  padding-bottom: 12px;
}
</style>
