<template>
    <div class="store-page">
        <Breadcrumb />

        <a-card title="工单列表">
            <AppQueryFilter>
            <a-row class="query-row">
                <a-col :flex="'1000px'" class="query-main">
                    <a-form class="queryForm app-query-form" :model="queryData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
                        label-align="left">
                        <a-row :gutter="16">
                            <a-col :span="8">
                                <a-form-item field="id" label="工单ID">
                                    <a-input-number v-model="queryData.id" placeholder="请输入工单ID" :step="1"
                                        :precision="0" />
                                </a-form-item>
                            </a-col>

                            <a-col :span="8">
                                <a-form-item field="state" label="状态">
                                    <a-select v-model="queryData.state" :options="state" placeholder="请选择工单状态"
                                        :default-value="-1" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-col>
                <a-divider class="query-divider" style="height: 84px" direction="vertical" />
                <a-col :flex="1" class="app-query-actions">
                    <a-space class="query-actions-space" direction="vertical" :size="18">
                        <a-button type="primary" @click="search">
                            <template #icon>
                                <icon-search />
                            </template>
                            搜索
                        </a-button>
                        <a-button @click="reset">
                            <template #icon>
                                <icon-refresh />
                            </template>
                            重置
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
            </AppQueryFilter>


            <a-table :bordered="false" :data="data" stripe hoverable column-resizable class="table" :loading="loading" :columns="columns"
                :scroll="{ x: 980 }"
                :pagination="{
                    showPageSize: true,
                    showJumper: true,
                    showTotal: true,
                    pageSize: pagination.pagesize,
                    current: pagination.current,
                    total: pagination.total
                }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
                <template #username="{ record }">
                    <a-avatar :size="30">
                        <IconUser v-if="!record.avatar" />
                        <img :alt="record.username ?? ''" :src="record.avatar" v-else />
                    </a-avatar>
                    {{ record.username }}
                </template>
                <template #create_time="{ record }">
                    {{ stramptoTime(record.create_time) }}
                </template>
                <template #update_time="{ record }">
                    {{ stramptoTime(record.update_time) }}
                </template>
                <template #state="{ record }">
                    <a-tag color="orangered" v-if="record.state === 0">
                        <template #icon>
                            <icon-schedule />
                        </template>
                        待处理
                    </a-tag>
                    <a-tag color="arcoblue" v-else-if="record.state === 1">
                        <template #icon>
                            <icon-customer-service />
                        </template>
                        已回复
                    </a-tag>
                    <a-tag color="green" v-else-if="record.state === 2">
                        <template #icon>
                            <icon-check-circle />
                        </template>
                        已关闭
                    </a-tag>
                    <a-tag color="purple" v-else-if="record.state === 3">
                        <template #icon>
                            <icon-robot />
                        </template>
                        AI回复
                    </a-tag>
                </template>
                <template #optional="{ record }">
                    <a-button @click="$router.push(`/admin/service/orderDetail/${record.id}`)">查看详情</a-button>
                </template>
            </a-table>
        </a-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { adminOrderList } from '@/api/workOrder'
import { Notification } from '@arco-design/web-vue'
import { useResponsiveTable } from '@/hooks/useResponsiveTable'

const pagination = reactive({
    total: 0,
    current: 1,
    pagesize: 20
})

const state = [
    { label: '全部', value: -1 }, { label: '待处理', value: 0 }, { label: '已回复', value: 1 }, { label: '已关闭', value: 2 }, { label: 'AI回复', value: 3 }
]
const queryData = reactive({
    id: '',
    state: -1
})

const search = () => {
    pagination.current = 1
    getOrderList()
}

const reset = () => {
    pagination.current = 1
    queryData.id = ''
    queryData.state = -1
    getOrderList()
}

const columnDefs = [
    {
        title: '工单ID',
        dataIndex: 'id',
        width: 90
    },
    {
        title: '工单标题',
        dataIndex: 'title',
        width: 180,
        ellipsis: true,
        tooltip: true
    }, {
        title: '发起人',
        slotName: 'username',
        width: 140
    },
    {
        title: '提醒邮箱',
        dataIndex: 'email',
        width: 180,
        ellipsis: true,
        tooltip: true
    }, {
        title: '创建时间',
        slotName: 'create_time',
        width: 170
    }, {
        title: '最后更新时间',
        slotName: 'update_time',
        width: 170
    }, {
        title: '状态',
        slotName: 'state',
        width: 110
    }, {
        title: '操作',
        slotName: 'optional',
        width: 120,
        fixed: 'right'
    }
]

const { useTableColumns } = useResponsiveTable()
const columns = useTableColumns(columnDefs)

const loading = ref(false)
const data = ref([])

const getOrderList = async () => {
    try {
        loading.value = true

        const reqData = {
            ...queryData,
            pagesize: pagination.pagesize,
            current: pagination.current
        }

        const res = await adminOrderList(reqData)
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取工单失败！',
                content: res?.msg ?? '请稍后再试'
            })

        data.value = res.data
        pagination.total = res.pagination.total
    } catch (error) {
        Notification.error({
            title: '获取工单失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

// 分页 - 页码变化
const handlePageChange = (page) => {
    pagination.current = page
    getOrderList()
}

// 分页 - 每页条数变化
const handlePageSizeChange = (size) => {
    pagination.pagesize = size
    pagination.current = 1 // 页大小变化后回到第一页
    getOrderList()
}

onMounted(() => {
    getOrderList()
})

const stramptoTime = (time) => {
    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })
}
</script>

<style scoped>
.query-row {
    margin-bottom: 10px;
}

.query-main {
    min-width: 0;
}

.query-actions-space {
    width: 100%;
}

.table {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .query-row {
        display: block;
    }

    .query-divider {
        display: none;
    }

    .query-actions-space {
        margin-top: 4px;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .query-actions-space :deep(.arco-btn) {
        flex: 1;
    }
}
</style>