<template>
    <PagingTable v-if="isAdminAndOperator" url="/ocrChannel" :query="query" ref="table">
        <template #filter>
            <ElInput class="!w-52" placeholder="请输入" v-if="isAdmin" clearable v-model="query.id" @keyup.enter="table.refresh(true)">
                <template #append>
                    <ElButton :icon="Search" @click="table.refresh(true)" />
                </template>
            </ElInput>
            <ElButton :icon="Plus" v-if="isAdmin" @click="onEdit()">添加</ElButton>
            <ElButton :icon="Refresh" v-if="isAdmin" @click="onUpdateStatistics()">更新统计数据</ElButton>
        </template>
        <ElTableColumn prop="id" v-if="isAdmin" label="#" width="80" />
        <ElTableColumn prop="name" label="渠道名" align="center" />
        <ElTableColumn prop="deviceNum" v-if="isAdmin" label="设备安装数量" align="center" />
        <ElTableColumn prop="recordNum" v-if="isAdmin" label="返回记录数量" align="center" />
        <ElTableColumn prop="scanNum" v-if="isAdmin" label="扫描图片数量" align="center" />
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" align="center" />
        <ElTableColumn v-if="isAdmin" label="操作" align="center" width="120">
            <template #default="{ row }">
                <ElButton @click="onEdit(row)">编辑</ElButton>
            </template>
        </ElTableColumn>
    </PagingTable>

    <ElTable v-if="isApi" :data="tableData">
        <ElTableColumn prop="name" label="渠道名" align="center" />
        <ElTableColumn prop="deviceNum" label="设备安装数量" align="center" />
        <ElTableColumn prop="recordNum" label="返回记录数量" align="center" />
        <ElTableColumn prop="scanNum" label="扫描图片数量" align="center" />
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" align="center" />
    </ElTable>

    <EditDialog
        v-if="isAdmin"
        v-model="showEditDialog"
        :model="model"
        :rules="rules"
        :on-submit="submit"
        @success="table.refresh()"
    >
        <ElForm label-width="100px" label-position="right">
            <ElFormItem prop="name" label="渠道名">
                <ElInput v-model="model.name" placeholder="请输入渠道名" />
            </ElFormItem>
            <ElFormItem prop="deviceNum" label="设备安装数量">
                <ElInputNumber v-model="model.deviceNum" />
            </ElFormItem>
            <ElFormItem prop="recordNum" label="返回记录数量">
                <ElInputNumber v-model="model.recordNum" />
            </ElFormItem>
            <ElFormItem prop="scanNum" label="扫描图片数量">
                <ElInputNumber v-model="model.scanNum" />
            </ElFormItem>
        </ElForm>
    </EditDialog>
</template>
<script setup>
import { inject, onMounted, ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Plus, Refresh, Search } from '@vicons/tabler'
import EditDialog from '@/components/EditDialog.vue'
import { setupEditDialog } from '@/utils/editDialog'
import { http } from '@/plugins/http'
import { ElMessage } from 'element-plus'

const query = ref({})
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const { showEditDialog } = setupEditDialog(model)
const rules = {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
}
const isAdmin = inject('isAdmin')
const isAdminAndOperator = inject('isAdminAndOperator')
const isApi = inject('isApi')
const tableData = ref([])

onMounted(() => {
    if (isApi) {
        getTableData()
    }
})

async function onEdit(row) {
    model.value = row ? await http.get(`/ocrChannel/${row.id}`) : {}
    showEditDialog.value = true
}

async function submit() {
    model.value.id
        ? await http.put(`/ocrChannel/${model.value.id}`, model.value)
        : await http.post('/ocrChannel', model.value)
    ElMessage.success('保存成功')
}

async function getTableData() {
    const res = await http.post('/ocrChannel/findApiChannel')
    tableData.value = [res]
}

async function onUpdateStatistics() {
    try {
        await http.post('/ocrChannel/updateStatistics')
    } catch (e) {
        console.log(e)
        ElMessage.error('更新失败:' + e)
    }
    ElMessage.success('更新成功')
}
</script>
