<template>
  <div ref="containerRef" class="app-container" style="display:flex;">
    <div class="tree-panel">
      <el-tree ref="treeRef" :data="treeData" :props="treeProps" node-key="deptId" highlight-current @node-click="handleNodeClick" style="flex:1;overflow:auto" />
    </div>
    <div class="table-panel">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="单位名称" prop="orgName">
        <el-input v-model="queryParams.orgName" placeholder="请输入" clearable style="width: 160px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="单位性质" prop="wiunProp">
        <el-select v-model="queryParams.wiunProp" placeholder="请选择" clearable style="width: 150px">
          <el-option label="施工单位" value="7" />
          <el-option label="参建单位" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期" prop="collTime">
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" style="width: 250px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="table-wrapper">
    <el-table :height="tableHeight" v-loading="loading" :data="list" border style="width:100%" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="所属单位" align="center" prop="orgName" min-width="160" :show-overflow-tooltip="true" />
      <el-table-column label="危险品名称" align="center" prop="hachName" min-width="140" :show-overflow-tooltip="true" />
      <el-table-column label="危规号" align="center" prop="dangNum" width="120" />
      <el-table-column label="当前储量" align="center" prop="currRese" width="100" />
      <el-table-column label="操作" align="center" width="80" fixed="right">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>

    <el-dialog title="危险物品详情" v-model="detailOpen" width="650px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="所属单位">{{ detailRow.orgName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="危险物品名称">{{ detailRow.hachName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="化学名">{{ detailRow.chemName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="俗名">{{ detailRow.locName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="危规号">{{ detailRow.dangNum || '--' }}</el-descriptions-item>
        <el-descriptions-item label="当前储量">{{ detailRow.currRese || '--' }}</el-descriptions-item>
        <el-descriptions-item label="存储包装方式">{{ detailRow.storPack || '--' }}</el-descriptions-item>
        <el-descriptions-item label="过期处理方式">{{ detailRow.ovduProcMode || '--' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detailRow.note || '--' }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailOpen = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ObjHach">
import { listObjHach } from "@/api/slaj/hazard"
import { listDept } from "@/api/system/dept"

const { proxy } = getCurrentInstance()

const tableHeight = 'calc(100vh - 190px)'

const list = ref([]); const loading = ref(false); const total = ref(0)
const showSearch = ref(true)
const dateRange = ref([])
const detailOpen = ref(false); const detailRow = ref({})

const queryParams = reactive({
  pageNum: 1, pageSize: 10,
  orgName: undefined, wiunProp: undefined
})

const treeData = ref([])
const treeProps = { children: 'children', label: 'deptName' }
const treeRef = ref(null)

function buildTree(list, parentId) {
  return list.filter(item => parentId ? item.parentId === parentId : (item.parentId === 0 || !item.parentId))
    .map(item => ({ ...item, children: buildTree(list, item.deptId) }))
}

function fetchTree() {
  listDept({}).then(res => {
    treeData.value = buildTree(res.data || [], null)
  })
}

function handleNodeClick(data) {
  queryParams.orgName = data.deptName
  queryParams.pageNum = 1
  getList()
}

function getList() {
  loading.value = true
  const params = { ...queryParams }
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginCollTime = dateRange.value[0]
    params.endCollTime = dateRange.value[1]
  }
  listObjHach(params).then(res => {
    list.value = res.rows || []
    total.value = res.total || 0
    loading.value = false
  }).catch(() => { loading.value = false })
}

function handleQuery() { queryParams.pageNum = 1; getList() }
function handleExport() {
  const params = { ...queryParams }
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginCollTime = dateRange.value[0]
    params.endCollTime = dateRange.value[1]
  }
  proxy.download("hazard/objhach/export", params, `危险物品_${new Date().getTime()}.xlsx`)
}
function handleDetail(row) {
  detailRow.value = row
  detailOpen.value = true
}

onMounted(() => { fetchTree(); getList() })
</script>

<style scoped>
.tree-panel { width: 220px; min-width: 220px; margin-right: 10px; display:flex; flex-direction:column; padding: 8px 0; background: #fff; }
.table-panel { flex: 1; min-width: 0; }
</style>
