<template>
    <x-search-bar class="mb-8-2">
        <template #default="{ gutter, colSpan }">
            <a-form :label-col="{ style: { width: '100px' } }" :model="searchFormData" layout="inline">
                <a-row :gutter="gutter">
                    <a-col v-bind="colSpan">
                        <a-form-item :label="'姓名'" name="name">
                            <a-input :placeholder="'请选择姓名'" v-model:value="searchFormData.name"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col v-bind="colSpan">
                        <a-form-item name="code">
                            <template #label>
                                {{ '身份证号' }}
                                <a-tooltip :title="'身份证号'">
                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
                                </a-tooltip>
                            </template>
                            <a-input :placeholder="'请输入身份证号'" v-model:value="searchFormData.idCard"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col v-bind="colSpan">
                        <a-form-item :label="'工单号'" name="name">
                            <a-input :placeholder="'请选择工单号'" v-model:value="searchFormData.orderNum"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="gutter" style="margin-top: 16px;">
                    <a-col :span="24" style="text-align: right;">
                        <a-space>
                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
                            <a-button ghost type="primary" @click="handleSearch">
                                {{ $t('button.search') }}
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>
            </a-form>
        </template>
    </x-search-bar>
    <a-card>
        <x-action-bar class="mb-8-2">
            <a-button v-action="'add'" 
                      type="primary"   
                      :disabled="selectedRowKeys.length === 0" 
                      @click="handleBatchProcess">
                 批量处理(最多40条)
            </a-button>
        </x-action-bar>
        <a-table 
              rowKey="id" 
              :loading="loading" 
              :pagination="true" 
              :columns="columns" 
              :data-source="listData"
              :row-selection="rowSelection"
              :scroll="{ x: 'max-content' }"
              >
            <template #bodyCell="{ column, record }">
                <template v-if="'menuType' === column.key">
                    <!--菜单-->
                    <a-tag v-if="menuTypeEnum.is('page', record.type)" color="processing">
                        {{ menuTypeEnum.getDesc(record.type) }}
                    </a-tag>
                    <!--按钮-->
                    <a-tag v-if="menuTypeEnum.is('button', record.type)" color="success">
                        {{ menuTypeEnum.getDesc(record.type) }}
                    </a-tag>
                </template>

                <template v-if="'createAt' === column.key">
                    {{ formatUtcDateTime(record.created_at) }}
                </template>

                <template v-if="'statusType' === column.key">
                    <!--状态-->
                    <a-tag v-if="statusTypeEnum.is('enabled', record.status)" color="processing">
                        {{ statusTypeEnum.getDesc(record.status) }}
                    </a-tag>
                    <!--状态-->
                    <a-tag v-if="statusTypeEnum.is('disabled', record.status)" color="processing">
                        {{ statusTypeEnum.getDesc(record.status) }}
                    </a-tag>
                </template>

                <template v-if="'action' === column.key">
                    <x-action-button @click="$refs.viewDialogRef.handleView(record)">
                        <a-tooltip>
                            <template #title>详情</template>
                            详情
                        </a-tooltip>
                    </x-action-button>

                    <x-action-button @click="handleSingleProcess(record)">
                        <a-tooltip>
                            <template #title>处理</template>
                            处理
                        </a-tooltip>
                    </x-action-button>
                </template>
            </template>
        </a-table>
    </a-card>

    <!-- 处理弹窗 -->
    <a-modal
        v-model:open="processModalVisible"
        title="处理异常"
        @ok="handleProcessSubmit"
        @cancel="processModalVisible = false"
        :confirm-loading="processSubmitting"
    >
        <a-form :model="processForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="处理结果" name="processStatus" required>
            <a-select v-model:value="processForm.processStatus" placeholder="请选择处理结果">
            <a-select-option value="handled">已处理</a-select-option>
            <a-select-option value="ignored">忽略</a-select-option>
            <!-- 可根据实际枚举扩展 -->
            </a-select>
        </a-form-item>

        <a-form-item label="处理原因" name="processRemark">
            <a-textarea
            v-model:value="processForm.processRemark"
            placeholder="请输入处理原因"
            :rows="4"
            allow-clear
            />
        </a-form-item>
        </a-form>
    </a-modal>

    <view-dialog @ok="onOk" ref="viewDialogRef" />
</template>

<script setup>
import { Modal, message } from 'ant-design-vue'
import { ref,reactive } from 'vue'
import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
import apis from '@/apis'
import { config } from '@/config'
import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
import { usePagination, useForm } from '@/hooks'
import { formatUtcDateTime } from '@/utils/util'
import ViewDialog from './components/viewDialog.vue'
import { useI18n } from 'vue-i18n'
import storage from '@/utils/storage'
import AreaCascader from '@/components/AreaCascader/index.vue'
import dayjs from 'dayjs'
defineOptions({
    // eslint-disable-next-line vue/no-reserved-component-names
    name: 'menu',
})
const { t } = useI18n() // 解构出t方法
const columns = ref([
    { title: '工单号', dataIndex: 'orderId', key: 'orderId', width: 180 },
    { title: '姓名', dataIndex: 'customerName', key: 'customerName', width: 120 },
    { title: '身份证号', dataIndex: 'identityNo', key: 'identityNo', width: 180 },
    { title: '异常情况', dataIndex: 'abnormalStatus', key: 'abnormalStatus', width: 120 },
    { title: '服务人员', dataIndex: 'serviceUserName', key: 'serviceUserName', width: 120 },
    { title: '服务项目', dataIndex: 'itemNames', key: 'itemNames', width: 200 },
    { title: '签入时间', dataIndex: 'realStartTime', key: 'realStartTime', width: 160 },
    { title: '签出时间', dataIndex: 'realEndTime', key: 'realEndTime', width: 160 },
    { title: '处理状态', dataIndex: 'processStatus', key: 'processStatus', width: 120 },
    { title: '处理原因', dataIndex: 'processRemark', key: 'processRemark', width: 160 },
    { title: '处理人', dataIndex: 'processUserName', key: 'processUserName', width: 120 },
    { title: '处理时间', dataIndex: 'processTime', key: 'processTime', width: 160 },
    { title: '服务地址', dataIndex: 'serviceAddress', key: 'serviceAddress', width: 200 },
    { title: '操作', key: 'action', fixed: 'right', width: 340 },
])
const { listData, loading, showLoading, hideLoading, searchFormData, paginationState, resetPagination } =
    usePagination()
const { resetForm } = useForm()
const viewDialogRef = ref()
const selectedRowKeys = ref([]) // 选中的 id 列表
const selectedRows = ref([])    // 选中的完整记录
const rowSelection = ref({
  onChange: (keys, rows) => {
    if (keys.length > 40) {
      message.warning('最多只能选择40条记录进行批量处理')
      // 保留前40条
      selectedRowKeys.value = keys.slice(0, 40)
      selectedRows.value = rows.slice(0, 40)
      return
    }
    selectedRowKeys.value = keys
    selectedRows.value = rows
  },
  selectedRowKeys: selectedRowKeys,
})



// 处理弹窗
const processModalVisible = ref(false)
const processSubmitting = ref(false)
const processForm = reactive({
  processStatus: undefined,
  processRemark: '',
})


let currentProcessRecords = [] // 当前要处理的记录（单条或批量）

// 打开批量处理
function handleBatchProcess() {
  if (selectedRowKeys.value.length === 0) return
  if (selectedRowKeys.value.length > 40) {
    message.warning('最多选择40条')
    return
  }
  currentProcessRecords = [...selectedRows.value]
  processForm.processStatus = undefined
  processForm.processRemark = ''
  processModalVisible.value = true
}

getMenuList()


/**
 * 获取菜单列表
 * @return {Promise<void>}
 */

async function getMenuList() {
    try {
        showLoading()
        const { pageSize, current } = paginationState

        const { success, data, total } = await apis.workOrder.getAbnormalWorkOrderList({
            stationId:storage.local.getItem('stationId'),
            companyId:storage.local.getItem('companyId'),
            pageSize,
            current: current,
            ...searchFormData.value,
        })

        // 字段映射
        const mappedData = data.map(item => ({
            id: item.orderNum || item.id, // 如果没有 id，可以用 orderNum 代替，或后端补充
            orderId: item.orderNum || '-', // 工单号
            customerName: item.customerName || '-', // 姓名
            identityNo: item.customerIdCard || '-', // 身份证号
            serviceUserName: item.serviceName || '-', // 服务人员
            itemNames: item.projects?.map(p => p.name).join('、') || '-', // 服务项目（多个用顿号连接）
            realStartTime: item.signInAt, // 签入时间（保持原格式，formatUtcDateTime 会处理）
            realEndTime: item.signOutAt, // 签出时间
            processStatus: item.processStatus === '1' ? '已处理' : item.processStatus === '0' ? '未处理' : '未知', // 处理状态（根据实际枚举调整）
            processRemark: item.reason || '-', // 处理原因
            processUserName: item.userName || '-', // 处理人
            processTime: dayjs(item.processAt).format('YYYY-MM-DD HH:mm:ss'), // 处理时间
            serviceAddress: item.detailAddress || '-', // 服务地址
            // 原始数据保留，便于后续操作（如提交处理时用 id）
            raw: item,
        }))

        listData.value = mappedData
        paginationState.total = total
        hideLoading()
    } catch (error) {
        console.error('获取工单列表失败:', error)
        hideLoading()
        message.error('获取数据失败')
    }
}
/**
 * 搜索
 */
function handleSearch() {
    // resetForm()
    resetPagination()
    getMenuList()
}
/**
 * 重置
 */
function handleResetSearch() {
    searchFormData.value = {}
    resetPagination()
    getMenuList()
}
/**
 * 删除
 * @param id
 */
function handleDelete({ id }) {
    Modal.confirm({
        title: t('pages.system.menu.delTip'),
        content: t('button.confirm'),
        okText: t('button.confirm'),
        onOk: () => {
            return new Promise((resolve, reject) => {
                ; (async () => {
                    try {
                        const { success } = await apis.menu.delMenu(id).catch(() => {
                            throw new Error()
                        })
                        if (config('http.code.success') === success) {
                            resolve()
                            message.success(t('component.message.success.delete'))
                            await getMenuList()
                        }
                    } catch (error) {
                        reject()
                    }
                })()
            })
        },
    })
}
/**
 * 编辑完成
 */
async function onOk() {
    await getMenuList()
}


// 打开单条处理
function handleSingleProcess(record) {
  currentProcessRecords = [record]
  processForm.processStatus = record.processStatus || undefined
  processForm.processRemark = record.processRemark || ''
  processModalVisible.value = true
}

// 提交处理
async function handleProcessSubmit() {
  const { processStatus } = processForm
  if (!processStatus ) {
    message.warning('请选择处理结果')
    return
  }

  processSubmitting.value = true
//   try {
//     // 假设你的 API 是批量处理：apis.order.batchProcess({ ids, processStatus, processRemark })
//     const ids = currentProcessRecords.map(r => r.id)
//     const { success } = await apis.order.batchProcess({
//       ids,
//       processStatus,
//       processRemark,
//     })

//     if (config('http.code.success') === success) {
//       message.success('处理成功')
//       processModalVisible.value = false
//       await getOrderList() // 刷新列表
//     }
//   } catch (error) {
//     message.error('处理失败')
//   } finally {
//     processSubmitting.value = false
//   }
}

async function handleView(record = {}) {
    showModal({
        type: 'view',
        title: '查看详情',
    })
    const { data } = await apis.menu.getMenu(record.id).catch(() => {
        throw new Error()
    })
    formData.value = cloneDeep(data)
    formData.value.properties = formData.value.properties ? JSON.parse(formData.value.properties) : ''
    formData.value.resources = formData.value.resources || (formData.value.resources = [])
    platform.value=data.platform
}

</script>

<style lang="less" scoped></style>
