<template>
  <div
    class="inspect-item-page grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
    <DeptTreeSelect
      :top-id="rootDeptId"
      :deptId="deptId"
      v-model="queryParams.deptId"
      :init-select="false"
      :show-title="false"
      request-api="getSimpleDeptList"
      class="inspect-item-tree row-span-2"
      @node-click="handleDeptNodeClick" />

    <el-form
      ref="queryFormRef"
      :model="queryParams"
      size="default"
      label-width="88px"
      class="inspect-item-query bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-6 py-3 min-w-0">
      <div class="query-row">
        <el-form-item :label="t('deviceForm.category')" prop="deviceClassify">
          <el-tree-select
            v-model="queryParams.deviceClassify"
            :data="productClassifyList"
            :props="defaultProps"
            check-strictly
            node-key="id"
            :placeholder="t('deviceForm.categoryHolder')"
            filterable
            clearable
            class="query-control" />
        </el-form-item>
        <el-form-item :label="t('inspect.InspectionItems')" prop="item">
          <el-input
            v-model="queryParams.item"
            :placeholder="t('inspect.itemHolder')"
            clearable
            class="query-control"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item :label="t('common.createTime')" prop="createTime" label-width="100px">
          <el-date-picker
            v-model="queryParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            :start-placeholder="t('operationFill.start')"
            :end-placeholder="t('operationFill.end')"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="query-control query-control--date" />
        </el-form-item>
      </div>

      <el-form-item class="query-actions">
        <el-button type="primary" @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" />{{ t('operationFill.search') }}
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" />{{ t('operationFill.reset') }}
        </el-button>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['rq:iot-inspect-item:create']">
          <Icon icon="ep:plus" class="mr-5px" />{{ t('operationFill.add') }}
        </el-button>
        <el-button
          type="success"
          plain
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['rq:iot-inspect-item:export']">
          <Icon icon="ep:download" class="mr-5px" />导出
        </el-button>
      </el-form-item>
    </el-form>

    <div
      class="table-panel bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-w-0 min-h-0">
      <div class="flex-1 relative min-h-0">
        <el-auto-resizer class="absolute">
          <template #default="{ width, height }">
            <ZmTable
              :loading="loading"
              :data="list"
              :width="width"
              :height="height"
              :max-height="height"
              show-border
              settings-cache-key="pms-inspect-item-list">
              <ZmTableColumn
                type="index"
                :label="t('iotDevice.serial')"
                :width="70"
                fixed="left"
                hide-in-column-settings />
              <ZmTableColumn :label="t('monitor.category')" prop="deviceClassifyName" />
              <ZmTableColumn :label="t('iotDevice.brand')" prop="brandName" />
              <ZmTableColumn :label="t('iotDevice.code')" prop="deviceCode" />
              <ZmTableColumn :label="t('monitor.deviceName')" prop="deviceName" />
              <ZmTableColumn :label="t('inspect.InspectionItems')" prop="item" />
              <ZmTableColumn :label="t('inspect.InspectionStandards')" prop="standard" />
              <ZmTableColumn :label="t('inspect.createName')" prop="createName" />
              <ZmTableColumn
                :label="t('common.createTime')"
                prop="createTime"
                :formatter="dateFormatter" />
              <ZmTableColumn
                :label="t('operationFill.operation')"
                :width="120"
                action
                fixed="right">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    @click="openForm('update', scope.row.id)"
                    v-hasPermi="['rq:iot-inspect-item:update']">
                    {{ t('fault.edit') }}
                  </el-button>
                  <el-button
                    link
                    type="danger"
                    @click="handleDelete(scope.row.id)"
                    v-hasPermi="['rq:iot-inspect-item:delete']">
                    {{ t('fault.del') }}
                  </el-button>
                </template>
              </ZmTableColumn>
            </ZmTable>
          </template>
        </el-auto-resizer>
      </div>

      <div class="h-8 mt-2 flex items-center justify-end">
        <el-pagination
          v-show="total > 0"
          size="default"
          :current-page="queryParams.pageNo"
          :page-size="queryParams.pageSize"
          :background="true"
          :page-sizes="[10, 20, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <IotInspectItemForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { IotInspectItemApi, IotInspectItemVO } from '@/api/pms/inspect/item'
import IotInspectItemForm from './IotInspectItemForm.vue'
import { defaultProps, handleTree } from '@/utils/tree'
import * as ProductClassifyApi from '@/api/pms/productclassify'
import { useUserStore } from '@/store/modules/user'

import { useTableComponents } from '@/components/ZmTable/useTableComponents'
const { ZmTable, ZmTableColumn } = useTableComponents<IotInspectItemVO>()

/** 巡检项 列表 */
defineOptions({ name: 'IotInspectItem' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const rootDeptId = 156
const deptId = useUserStore().getUser.deptId || rootDeptId
const loading = ref(true) // 列表的加载中
const list = ref<IotInspectItemVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  item: undefined,
  deviceClassify: undefined,
  standard: undefined,
  sort: undefined,
  remark: undefined,
  createTime: [],
  deptId: undefined
})
const productClassifyList = ref<Tree[]>([]) // 树形结构
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const handleDeptNodeClick = async (row: Tree) => {
  queryParams.deptId = row.id
  queryParams.pageNo = 1
  await getList()
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await IotInspectItemApi.getIotInspectItemPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

const handleSizeChange = (pageSize: number) => {
  queryParams.pageSize = pageSize
  handleQuery()
}

const handleCurrentChange = (pageNo: number) => {
  queryParams.pageNo = pageNo
  getList()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await IotInspectItemApi.deleteIotInspectItem(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await IotInspectItemApi.exportIotInspectItem(queryParams)
    download.excel(data, '巡检项.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(async () => {
  productClassifyList.value = handleTree(
    await ProductClassifyApi.IotProductClassifyApi.getSimpleProductClassifyList()
  )
  await getList()
})
</script>

<style scoped>
.inspect-item-query {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.query-row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 12px 24px;
}

.query-actions {
  flex: 0 0 auto;
}

.query-actions :deep(.el-form-item__content) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.query-actions :deep(.el-button) {
  margin-left: 0;
}

.query-control {
  width: 190px;
}

.query-control--date {
  width: 230px;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-form-item__label) {
  white-space: nowrap;
}

@media (width >= 1800px) {
  .inspect-item-query,
  .query-row {
    flex-wrap: nowrap;
  }
}

@media (width <= 1500px) {
  .inspect-item-query,
  .query-row {
    gap: 12px 18px;
  }

  .query-control {
    width: 175px;
  }

  .query-control--date {
    width: 220px;
  }
}

@media (width <= 1200px) {
  .inspect-item-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(480px, 1fr);
    height: auto;
    min-height: calc(
      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
    );
  }

  :deep(.inspect-item-tree) {
    grid-row: auto !important;
    width: 100% !important;
    height: 320px !important;
    min-width: 0 !important;
  }

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

@media (width <= 768px) {
  .inspect-item-query,
  .table-panel {
    padding: 12px;
  }

  .query-row,
  .query-row :deep(.el-form-item),
  .query-actions,
  .query-control,
  .query-control--date {
    width: 100%;
  }

  .query-actions :deep(.el-form-item__content) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .query-actions :deep(.el-button) {
    width: 100%;
  }
}
</style>
