<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-08 14:26:07
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-10 10:09:06
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\views\Design\LogManagement\logList.vue
 * @Description: 日志服务
-->

<template>
  <DSDialog
    v-model="show"
    width="800"
    :showFooter="false"
    @close="handleClose"
    class="logList-dialog ds-dialog"
    title="日志"
  >
    <div class="logList-container p-[24px]">
      <ul class="flex logList-sidebar mb-[12px]">
        <li
          class="flex items-center justify-center sidebar-item mr-[12px]"
          :class="{ active: activeTab.includes(v.value) }"
          @click="addSearchType(v)"
          v-for="(v, k) in logSearchTypes"
          :key="k"
        >
          <DSButton :type="activeTab.includes(v.value) ? 'primary' : ''">{{ v.label }}</DSButton>
        </li>
      </ul>
      <DSTable
        class="bg-transparent baseTable_box logList-table"
        :total="pagination.total"
        :pageSize="pagination.pageSize"
        :dataSource="listData"
        :isFixedPagination="true"
        :columns="columns"
        :page="pagination.currentPage"
        @change="handleTableChange"
      >
      </DSTable>
    </div>
  </DSDialog>
</template>

<script setup lang="ts">
import { DSButton } from '@/components/Button'
import { DSDialog } from '@/components/Dialog'
import { DSTable } from '@/components/Table'
import { getLogListApi } from '@/api/log'

interface logSearchTypeItem {
  label: string
  value: string // 可以是路由地址或者其他唯一标识
}

interface Props {
  /** 弹窗显隐 */
  value: boolean
}

interface Emits {
  (e: 'update:value', val: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  value: false
})
const emit = defineEmits<Emits>()
const logStatusEnum = {
  '1': {
    color: '#FF7D01',
    value: '1',
    label: '告警',
    isDelete: false,
    id: '1'
  },
  '2': {
    color: '#E80D0D',
    value: '2',
    label: '错误',
    isDelete: false,
    id: '2'
  },
  '3': {
    color: '#52C41A',
    value: '3',
    label: '信息',
    isDelete: true,
    id: '3'
  },
  notFound: {
    // 未获取到设备状态
    color: '#E80D0D',
    value: '4444',
    label: '未知',
    isDelete: false,
    id: '4444'
  }
}
const logSearchTypes: logSearchTypeItem[] = [
  {
    label: '全部',
    value: '0'
  },
  {
    label: '告警',
    value: '1'
  },
  {
    label: '错误',
    value: '2'
  },
  {
    label: '信息',
    value: '3'
  }
]
const columns = [
  {
    label: '时间',
    property: 'created_at'
  },
  {
    label: '类型',
    property: 'type',
    formatter: (val) => {
      console.log(val)
      const currentStatusObj = logStatusEnum[val?.type] || logStatusEnum.notFound
      return h(
        'div',
        {
          style: {
            fontSize: '14px',
            display: 'flex',
            alignItems: 'center',
            lineHeight: '20px',
            color: currentStatusObj?.color
          }
        },
        [
          h(
            'span',
            {
              fontSize: '14px'
            },
            currentStatusObj?.label
          )
        ]
      )
    }
  },
  {
    label: '事件',
    property: 'content',
    width: 340
  }
]

const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 })
const listData = ref([])
const dataLoading = ref(true)

const show = computed({
  get() {
    return props.value
  },
  set(val: boolean) {
    emit('update:value', val)
  }
})

const getList = async () => {
  const { currentPage, pageSize } = pagination.value
  const { data } = await getLogListApi({
    page: currentPage,
    pageSize
  })
  listData.value = data.data
  pagination.value = {
    ...pagination.value,
    total: data.count
  }
  dataLoading.value = false
}
function handleTableChange(record) {
  console.log('handleTableChange_record', record)
  pagination.value = {
    ...pagination.value,
    currentPage: record.page,
    pageSize: record.pageSize
  }
  getList()
}

// 处理对话框关闭事件
const handleClose = () => {
  // emits('close');
}

const activeTab = ref<string[]>(['0'])
// TODO 未实现筛选查询
const addSearchType = (v: logSearchTypeItem) => {
  if (activeTab.value.includes(v.value)) {
    activeTab.value = activeTab.value.filter((item) => item !== v.value)
  } else {
    activeTab.value.push(v.value)
  }
}
watch(
  () => show.value,
  () => {
    show.value && getList()
  },
  {
    immediate: true
  }
)
</script>
<style>
@import url('./logList.scss');
</style>
