<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane :label="t('RecipeManagement.RecipeLibrary.detailTabDeviceDataLabel')" name="detail">
      <el-table :data="detailList" :stripe="true" :show-overflow-tooltip="true" row-key="key">
        <!-- <el-table-column type="index" :label="t('RecipeManagement.RecipeLibrary.detailIndexColumn')" align="center" width="70" /> -->
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.detailDevicePointNameColumn')"
          align="center"
          prop="attributeName"
          min-width="180"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.detailDeviceDataTypeColumn')"
          align="center"
          prop="dataType"
          min-width="180"
        />
        <!-- <el-table-column :label="t('RecipeManagement.RecipeLibrary.detailDeviceAddressColumn')" align="center" prop="address" min-width="180" /> -->
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.detailDeviceDataUnitColumn')"
          align="center"
          prop="dataUnit"
          width="120"
        >
          <template #default="scope">
            {{ getUnitLabel(scope.row?.dataUnit) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.detailDeviceValueColumn')"
          align="center"
          prop="value"
          min-width="180"
        />
      </el-table>
      <Pagination
        :total="to"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-tab-pane>
    <el-tab-pane :label="t('RecipeManagement.RecipeLibrary.detailTabManualLabel')" name="manual">
      <!-- <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="参考值" prop="refer">
          <el-input
            v-model="queryParams.refer"
            placeholder="请输入参考值"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="单位" prop="dataUnit">
          <el-input
            v-model="queryParams.dataUnit"
            placeholder="请输入单位"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="queryParams.remark"
            placeholder="请输入备注"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" /> 查询
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" /> 重置
          </el-button>
        </el-form-item>
      </el-form> -->
      <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.detailIndexColumn')" align="center" width="70" /> -->
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.manualTableNameColumn')"
          align="center"
          prop="name"
          min-width="140"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.manualTableDataTypeColumn')"
          align="center"
          prop="dataType"
          width="140"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.manualTableDataUnitColumn')"
          align="center"
          prop="dataUnit"
          width="140"
        >
          <template #default="scope">
            {{ getUnitLabel(scope.row?.dataUnit) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.manualTableReferColumn')"
          align="center"
          prop="refer"
          min-width="160"
        />
        <el-table-column
          :label="t('RecipeManagement.RecipeLibrary.manualTableRemarkColumn')"
          align="center"
          prop="remark"
          min-width="180"
        />
      </el-table>
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { RecipePointRecordApi } from '@/api/iot/recipepointrecord'
import { RecipeDeviceRecordApi } from '@/api/iot/recipeDeviceRecord'
import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'

defineOptions({ name: 'FormulaLibraryDetailTabs' })

const { t } = useI18n()

const props = defineProps({
  recipeId: {
    type: [String, Number],
    default: undefined
  }
})

const activeTab = ref<'detail' | 'manual'>('detail')

const detailList = ref<{ key: string; pointName: string; value: string; unit: string }[]>([])

const loading = ref(false)
const list = ref<RecipePointVO[]>([])
const total = ref(0)
const to = ref(0)

const unitList = ref<ProductUnitVO[]>([])

const ensureUnitList = async () => {
  if (unitList.value.length > 0) return
  unitList.value = await ProductUnitApi.getProductUnitSimpleList()
}

const getUnitLabel = (dataUnit: unknown) => {
  const id = String(dataUnit ?? '').trim()
  if (!id) return '-'
  const unit = unitList.value.find((u) => String(u.id) === id)
  return unit?.name ?? id
}

const queryFormRef = ref()
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '' as string,
  refer: '' as string,
  dataUnit: '' as string,
  remark: '' as string
})

const buildQueryParams = () => {
  const name = queryParams.name?.trim()
  const refer = queryParams.refer?.trim()
  const dataUnit = queryParams.dataUnit?.trim()
  const remark = queryParams.remark?.trim()
  return {
    pageNo: queryParams.pageNo,
    pageSize: queryParams.pageSize,
    recipeId: props.recipeId !== undefined && props.recipeId !== null ? String(props.recipeId) : undefined,
    name: name ? name : undefined,
    refer: refer ? refer : undefined,
    dataUnit: dataUnit ? dataUnit : undefined,
    remark: remark ? remark : undefined
  }
}

const getList = async () => {
  if (!props.recipeId) {
    list.value = []
    total.value = 0
    detailList.value = []
    to.value = 0
    return
  }
  loading.value = true
  try {
    await ensureUnitList()
    if (activeTab.value === 'manual') {
      const data = await RecipePointRecordApi.getRecipePointRecordPage(buildQueryParams())
      list.value = data.list
      total.value = data.total
    } else {
      const d = await RecipeDeviceRecordApi.getRecipeDeviceRecordPage(buildQueryParams())
      detailList.value = d.list
      to.value = d.total
    }
  } finally {
    loading.value = false
  }
}

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

const resetQuery = () => {
  queryFormRef.value?.resetFields?.()
  handleQuery()
}

watch(
  () => props.recipeId,
  () => {
    queryParams.pageNo = 1
    getList()
  },
  { immediate: true }
)

watch(
  () => activeTab.value,
  (tab) => {
    queryParams.pageNo = 1
    getList()
  }
)
</script>
