<template>
    <PagingTable url="/ocrDevice" :query="query" ref="table">
        <template #filter>
            <ElSelect
                class="!w-52 ml-2"
                v-model="query.channel"
                placeholder="请选择渠道"
                clearable
                @change="table.refresh(true)"
            >
                <ElOption label="全部渠道" value="" />
                <ElOption v-for="item in channelStore.channelOptions" :key="item" :label="item" :value="item" />
            </ElSelect>
            <ElInput
                class="!w-52"
                placeholder="请输入设备号"
                clearable
                v-model="query.id"
                @keyup.enter="table.refresh(true)"
            >
                <template #append>
                    <ElButton :icon="Search" @click="table.refresh(true)" />
                </template>
            </ElInput>
        </template>
        <ElTableColumn prop="id" label="设备号" align="center" />
        <ElTableColumn prop="platform" label="平台" align="center" />
        <ElTableColumn label="设备信息" align="center">
            <template #default="{ row }">
                <div v-html="formatRecord(row.deviceInfo)"></div>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="channel" label="渠道" align="center" />
        <ElTableColumn prop="ipAddress" label="ip地址" align="center" />
        <ElTableColumn prop="scanned" label="扫描数量" align="center" />
        <ElTableColumn prop="total" label="相册图片总数" align="center" />
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" align="center" />
    </PagingTable>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Plus, Search } from '@vicons/tabler'
import { http } from '@/plugins/http'
import { useChannelStore } from '@/stores/channel'

const query = ref({})
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const channelStore = useChannelStore()

onMounted(async () => {
    await channelStore.fetchChannelOptions()
})

function formatRecord(deviceInfo) {
    return deviceInfo
        .split('\n')
        .filter(Boolean)
        .join('<br>')
}
</script>
