<template>
  <div style="margin-top: -50px">
    <el-divider />
    <el-form :model="queryParams" ref="productSelectTemplateRef" inline>
      <el-form-item :label="t('product.product-select-template318012-0')" prop="templateName">
        <el-input
          v-model="queryParams.templateName"
          :placeholder="t('product.product-select-template318012-1')"
          clearable
          size="default"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="t('product.product-select-template.318012-2')" prop="type">
        <el-select
          v-model="queryParams.type"
          :placeholder="t('product.product-select-template318012-3')"
          clearable
          size="default"
        >
          <el-option
            v-for="dict in dict.type.iot_things_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" size="default" @click="handleQuery">
          {{ t('product.product-select-template318012-4') }}
        </el-button>
        <el-button :icon="Refresh" size="default" @click="resetQuery">
          {{ t('product.product-select-template318012-5') }}
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      :border="false"
      v-loading="loading"
      :data="templateList"
      @selection-change="handleSelectionChange"
      ref="selectTemplateTableRef"
      size="default"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        :label="t('product.product-select-template318012-0')"
        align="center"
        prop="templateName"
      />
      <el-table-column
        :label="t('product.product-select-template318012-6')"
        align="center"
        prop="identifier"
      />
      <el-table-column
        :label="t('product.product-select-template318012-7')"
        align="center"
        prop="type"
      >
        <template #default="scope">
          <dict-tag :options="dict.type.iot_things_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column
        :label="t('product.product-things-model142341-12')"
        align="center"
        prop="isChart"
        width="75"
      >
        <template #default="scope">
          <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isChart" />
        </template>
      </el-table-column>
      <el-table-column
        :label="t('product.product-select-template318012-9')"
        align="center"
        prop="isMonitor"
        width="75"
      >
        <template #default="scope">
          <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isMonitor" />
        </template>
      </el-table-column>
      <el-table-column
        :label="t('product.product-select-template318012-10')"
        align="center"
        prop="isReadonly"
        width="75"
      >
        <template #default="scope">
          <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isReadonly" />
        </template>
      </el-table-column>
      <el-table-column
        :label="t('product.product-select-template318012-11')"
        align="center"
        prop="isHistory"
        width="75"
      >
        <template #default="scope">
          <dict-tag :options="dict.type.iot_yes_no" :value="scope.row.isHistory" />
        </template>
      </el-table-column>
      <el-table-column
        :label="t('product.product-select-template318012-12')"
        align="center"
        prop="datatype"
      >
        <template #default="scope">
          <dict-tag :options="dict.type.iot_data_type" :value="scope.row.datatype" />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { listTemplate } from '@/api/pms/video/template'

// 使用 i18n
const { t } = useI18n()

// 定义组件名称
defineOptions({
  name: 'product-select-template'
})

// 定义 emits
const emit = defineEmits(['idsToParentEvent'])

// 引用模板
const productSelectTemplateRef = ref()
const selectTemplateTableRef = ref()

// 字典属性（需要从父组件或store获取）
const dict = defineProps({
  type: {
    iot_things_type: Array,
    iot_data_type: Array,
    iot_yes_no: Array
  }
})

// 数据状态
const loading = ref(false)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const templateList = ref([])

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  templateName: null,
  type: null
})

// 获取列表数据
const getList = () => {
  loading.value = true
  listTemplate(queryParams).then((response) => {
    templateList.value = response.list
    total.value = response.total
    loading.value = false
  })
}

// 搜索操作
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置操作
const resetQuery = () => {
  if (productSelectTemplateRef.value) {
    productSelectTemplateRef.value.resetFields()
  }
  handleQuery()
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.templateId)
  single.value = selection.length !== 1
  multiple.value = !selection.length
  // 向父组件传递ID数组
  emit('idsToParentEvent', ids.value)
}

// 组件挂载时获取数据
onMounted(() => {
  getList()
  ids.value = []
})

defineExpose({
  selectTemplateTableRef
})
</script>
