<template>
    <!-- 人员动态弹框内 taps栏第一个巡检次数 -->
    <div class="taps-one-container">
        <n-form inline ref="formRef" size="small" label-placement="left">
            <n-form-item>
                <n-date-picker
                    clearable
                    type="daterange"
                    style="width: 240px"
                    v-model:formatted-value="dateRange"
                    formatted-value="['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss']"
                />
            </n-form-item>

            <n-form-item>
                <n-button type="info" @click="getImagePageList"> 查询 </n-button>
                <n-button color="#6E90A9" style="margin-left: 10px" @click="onHandleReset">
                    重置
                </n-button>
            </n-form-item>
        </n-form>

        <!-- 内容区域 -->
        <n-data-table :columns="columns" :data="tableData" :style="{ height: `75%` }" flex-height />
        <div style="margin-top: 10px; display: flex; justify-content: flex-end">
            <n-pagination
                show-size-picker
                :item-count="total"
                :page-sizes="[10, 20, 30, 40]"
                @update:page="onChangePage"
                @update:page-size="onChangePageSize"
                v-model:page="queryParams.pageNum"
                v-model:page-size="queryParams.pageSize"
            />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { NImage } from 'naive-ui'
import { getImagePageListApi } from '@/api/home'

const total = ref(0)
const dateRange = ref(null)
const imgPreviewUrl = ref('http://192.168.0.38:21999/robot')

const columns = ref([
    {
        title: '序号',
        key: 'index',
        align: 'center',
        width: 60,
        render(row, index) {
            return index + 1
        },
    },
    {
        title: '巡检日期',
        key: 'taskTime',
        align: 'center',
        render(row) {
            return row.taskTime || '-'
        },
    },
    {
        title: '点位名称',
        key: 'pointName',
        align: 'center',
        render(row) {
            return row.pointName || '-'
        },
    },

    {
        title: '巡检图片',
        key: 'image',
        align: 'center',
        render(row) {
            return h(NImage, {
                width: '48px',
                height: '48px',
                src: imgPreviewUrl.value + row.image,
                fit: 'cover',
            })
        },
    },
])
const tableData = ref([])

const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    startDay: '',
    endDay: '',
})

// 获取巡检次数数据
const getImagePageList = async () => {
    const [startDay, endDay] = dateRange?.value || []
    queryParams.value.startDay = startDay || ''
    queryParams.value.endDay = endDay || ''
    const { data: res } = await getImagePageListApi(queryParams.value)
    tableData.value = res?.rows
    total.value = res?.total
}

const onChangePage = (page) => {
    queryParams.value.pageNum = page
    getImagePageList()
}

const onChangePageSize = (pageSize) => {
    queryParams.value.pageSize = pageSize
    getImagePageList()
}

const onHandleReset = () => {
    dateRange.value = null
    queryParams.value.pageNum = 1
    queryParams.value.pageSize = 10
    getImagePageList()
}
getImagePageList()
</script>

<style lang="scss" scoped>
.taps-one-container {
    width: 100%;
    height: 100%;
}
</style>
