<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { EquPrinterApi } from '/@/api/admin/EquPrinterApi'
import type { EquPrinterAddInput } from '/@/api/admin/data-contracts'
import PrinterForm from './components/printer-form.vue'

// 查询参数
const queryParams = reactive({
  keyWord: '',
  pageNum: 1,
  pageSize: 10,
  stDate: '',
  edDate: ''
})

// 加载状态
const loading = ref(false)

// 打印机列表
const printerList = ref<any[]>([])

// 总条数
const total = ref(0)

// 对话框显示状态
const dialogVisible = ref(false)

// 对话框标题
const dialogTitle = ref('')

// 表单数据
const formData = ref<Partial<EquPrinterAddInput>>({})

// 获取打印机列表
const getList = async () => {
  loading.value = true
  try {
    const res = await new EquPrinterApi().getPage({
      keyWord: queryParams.keyWord,
      stDate: queryParams.stDate,
      edDate: queryParams.edDate,
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize
    })
    if (res.success) {
      printerList.value = res.data?.list || []
      total.value = res.data?.total || 0
    }
  } catch (error) {
    console.error('获取打印机列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 查询
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.keyWord = ''
  queryParams.stDate = ''
  queryParams.edDate = ''
  handleQuery()
}

// 新增
const handleAdd = () => {
  dialogTitle.value = '新增打印机'
  formData.value = {}
  dialogVisible.value = true
}

// 修改
const handleUpdate = (row: any) => {
  dialogTitle.value = '修改打印机'
  formData.value = { ...row }
  dialogVisible.value = true
}

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确认要删除该打印机吗？', '警告', {
    type: 'warning'
  }).then(async () => {
    try {
      const res = await new EquPrinterApi().softDelete({ id: row.id })
      if (res.success) {
        ElMessage.success('删除成功')
        getList()
      }
    } catch (error) {
      console.error('删除打印机失败:', error)
    }
  })
}

// 分页大小改变
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  getList()
}

// 页码改变
const handleCurrentChange = (val: number) => {
  queryParams.pageNum = val
  getList()
}

// 初始化
onMounted(() => {
  getList()
})
</script>

<template>
  <my-layout>
    <el-card class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
      <el-form :inline="true" @submit.stop.prevent>
        <el-form-item label="关键词">
          <el-input v-model="queryParams.keyWord" placeholder="请输入关键词" clearable />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="queryParams.stDate"
            type="datetime"
            placeholder="选择开始时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="queryParams.edDate"
            type="datetime"
            placeholder="选择结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
          <el-button type="primary" icon="ele-Plus" @click="handleAdd"> 新增 </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="my-fill mt8" shadow="never">
      <el-table v-loading="loading" :data="printerList" style="width: 100%" border>
        <el-table-column label="设备编号" prop="deviceNo" min-width="120" show-overflow-tooltip />
        <el-table-column label="资产编号" prop="assetNo" min-width="120" show-overflow-tooltip />
        <el-table-column label="IP地址" prop="ip" min-width="120" show-overflow-tooltip />
        <el-table-column label="端口号" prop="port" width="100" show-overflow-tooltip />
        <el-table-column label="操作" width="180" fixed="right" header-align="center" align="center">
          <template #default="{ row }">
            <el-button icon="ele-EditPen" size="small" text type="primary" @click="handleUpdate(row)">编辑</el-button>
            <el-button icon="ele-Delete" size="small" text type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="my-flex my-flex-end" style="margin-top: 10px">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          size="small"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加或修改对话框 -->
    <printer-form
      v-model="dialogVisible"
      :title="dialogTitle"
      :form-data="formData"
      @success="getList"
    />
  </my-layout>
</template>

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