<!-- 数据列表 -->
<script lang="ts" setup name="LaboratoryDataList">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type {
  IElectricQuantityList,
  IListQuery,
  IOxygenList,
  ISmokeList,
  ITemperatureHumidityList,
  IUPSList,
} from './list-interface'
import addTemperatureHumidity from './addTemperatureHumidity.vue'
import addElectricQuantity from './addElectricQuantity.vue'
import addOxygenSmoke from './addOxygenSmoke.vue'
import {
  deleteConfig,
  exportConfigList,
  getConfigList,
} from '@/api/laboratory/equipment/config'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { exportFile } from '@/utils/exportUtils'
import useTemplateDownload from '@/utils/useTemplateDownload'
const $router = useRouter()
const loadingTable = ref(false)
const listMap = {
  temperatureHumidityList: ref<ITemperatureHumidityList[]>([]), // 温湿度网络传感器
  electricQuantityList: ref<IElectricQuantityList[]>([]), // 智能电量仪
  oxygenList: ref<IOxygenList[]>([]), // 氧气传感器
  smokeList: ref<ISmokeList[]>([]), // 烟雾传感器
  upsList: ref<IUPSList[]>([]), // 烟雾传感器
}
const menu = ref([ // 菜单
  {
    id: 'temperatureHumidity',
    name: '温湿度网络传感器',
    columns: ref<TableColumn[]>([
      { text: '设备编号', value: 'deviceNo', align: 'center', width: '160' },
      { text: '设备名称', value: 'deviceName', align: 'center' },
      { text: '负责部门', value: 'deptName', align: 'center' },
      { text: '负责人', value: 'userName', align: 'center' },
      { text: '安装地点', value: 'locationName', align: 'center' },
      { text: '温度（℃）', value: 'temperature', align: 'center' },
      { text: '湿度（%）', value: 'humidity', align: 'center' },
      { text: '上传时间', value: 'uploadTime', align: 'center', width: '180' },
    ]),
    list: listMap.temperatureHumidityList,
  },
  {
    id: 'electricQuantity',
    name: '智能电量仪',
    columns: ref<TableColumn[]>([
      { text: '设备编号', value: 'deviceNo', align: 'center', width: '160' },
      { text: '设备名称', value: 'deviceName', align: 'center' },
      { text: '负责部门', value: 'deptName', align: 'center' },
      { text: '负责人', value: 'userName', align: 'center' },
      { text: 'A相电压', value: 'voltageA', align: 'center' },
      { text: 'B相电压', value: 'voltageB', align: 'center' },
      { text: 'C相电压', value: 'voltageC', align: 'center' },
      { text: 'A相电流', value: 'currentA', align: 'center' },
      { text: 'B相电流', value: 'currentB', align: 'center' },
      { text: 'C相电流', value: 'currentC', align: 'center' },
      { text: '电量（%）', value: 'electricQuantity', align: 'center' },
      { text: '上传时间', value: 'uploadTime', align: 'center' },
    ]),
    list: listMap.electricQuantityList,
  },
  {
    id: 'oxygen',
    name: '氧气传感器',
    columns: ref<TableColumn[]>([
      { text: '设备编号', value: 'deviceNo', align: 'center', width: '160' },
      { text: '设备名称', value: 'deviceName', align: 'center' },
      { text: '负责部门', value: 'deptName', align: 'center' },
      { text: '负责人', value: 'userName', align: 'center' },
      { text: '安装地点', value: 'locationName', align: 'center' },
      { text: '氧气浓度（ppm）', value: 'oxygenDensity', align: 'center' },
      { text: '电量（%）', value: 'electricQuantity', align: 'center' },
      { text: '上传时间', value: 'uploadTime', align: 'center' },
    ]),
    list: listMap.oxygenList,
  },
  {
    id: 'smoke',
    name: '烟雾报警器',
    columns: ref<TableColumn[]>([
      { text: '设备编号', value: 'deviceNo', align: 'center', width: '160' },
      { text: '设备名称', value: 'deviceName', align: 'center' },
      { text: '负责部门', value: 'deptName', align: 'center' },
      { text: '负责人', value: 'userName', align: 'center' },
      { text: '安装地点', value: 'locationName', align: 'center' },
      { text: '状态', value: 'deviceStatusName', align: 'center' },
      { text: '烟雾值', value: 'smokeValue', align: 'center' },
      { text: '电量（%）', value: 'electricQuantity', align: 'center' },
      { text: '上传时间', value: 'uploadTime', align: 'center' },
    ]),
    list: listMap.smokeList,
  },
  {
    id: 'ups',
    name: 'UPS电源',
    columns: ref<TableColumn[]>([
      { text: '设备编号', value: 'deviceNo', align: 'center', width: '160' },
      { text: '设备名称', value: 'deviceName', align: 'center' },
      { text: '负责部门', value: 'deptName', align: 'center' },
      { text: '负责人', value: 'userName', align: 'center' },
      { text: '安装地点', value: 'locationName', align: 'center' },
      { text: '状态', value: 'deviceStatusName', align: 'center' },
      { text: '上传时间', value: 'uploadTime', align: 'center' },
    ]),
    list: listMap.upsList,
  },
])
const currentMenu = ref('temperatureHumidity') // 当前选中的菜单
const currentIndex = ref(0) // 当前选中的菜单索引
const buttonBoxActive = 'labEquipmentConfigList' // 存储在sessionstorage里面的字段名，用于记录右上角buttonbox点击状态

// 查询条件
const listQuery: Ref<IListQuery> = ref({
  deptId: '', // 负责部门id（西昌组织下拉选择)
  deviceName: '', // 设备名称
  deviceNo: '', // 设备编号
  uploadEndTime: '', // 上传结束时间
  uploadStartTime: '', // 上传开始时间
  userId: '', // 负责人id（西昌组织下人员下拉选择）
  limit: 20,
  offset: 1,
})

const total = ref(0) // 数据总条数
const checkoutList = ref<string[]>([]) // 选中的内容
// -----------------------------------------切换tab--------------------------------------------------------------
// 切换tab状态
const changeCurrentButton = (val: string) => {
  currentMenu.value = val // 当前
  currentIndex.value = menu.value.findIndex(item => item.id === val)
  console.log('当前选中的菜单', val, '当前选中菜单的索引', currentIndex.value)
  window.sessionStorage.setItem(buttonBoxActive, val)
  checkoutList.value = []
  clearList()
}
// ------------------------------------------------------------------------------------------------------

// 多选发生改变时
function handleSelectionChange(e: any) {
  checkoutList.value = e.map((item: { id: string }) => item.id)
}

// 数据查询
function fetchData(isNowPage = false) {
  loadingTable.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.offset = 1
  }
  getConfigList(listQuery.value, currentMenu.value).then((response) => {
    menu.value[currentIndex.value].list = response.data.rows.map((item: { minTemperature: number; maxTemperature: number; minHumidity: number; maxHumidity: number }) => {
      return {
        ...item,
        temperature: `${item.minTemperature} ~ ${item.maxTemperature}`, // 温度区间
        humidity: `${item.minHumidity} ~ ${item.maxHumidity}`, // 湿度区间
      }
    })
    total.value = parseInt(response.data.total)
    loadingTable.value = false
  })
}
// 清除条件
function clearList() {
  listQuery.value = {
    deptId: '', // 负责部门id（西昌组织下拉选择)
    deviceName: '', // 设备名称
    deviceNo: '', // 设备编号
    uploadEndTime: '', // 上传结束时间
    uploadStartTime: '', // 上传开始时间
    userId: '', // 负责人id（西昌组织下人员下拉选择）
    limit: 20,
    offset: 1,
  }
  fetchData()
}
// 搜索
const searchList = () => {
  fetchData(true)
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData(true)
}

// 操作
const handleEdit = (row: any, val: string) => {
  switch (val) {
    case 'delete':
      ElMessageBox.confirm(
        '确认删除吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(() => {
          loadingTable.value = true
          deleteConfig({ id: row.id }, currentMenu.value).then((res) => {
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            fetchData(true)
          })
        })
      break
    default:
      break
  }
}

// 导出
const exportAll = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '下载中请稍后',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  if (menu.value[currentIndex.value].list.length > 0) {
    const params = {
      deptId: listQuery.value.deptId, // 负责部门id（西昌组织下拉选择)
      deviceName: listQuery.value.deviceName, // 设备名称
      deviceNo: listQuery.value.deviceNo, // 设备编号
      uploadEndTime: listQuery.value.uploadEndTime, // 上传结束时间
      uploadStartTime: listQuery.value.uploadStartTime, // 上传开始时间
      userId: listQuery.value.userId, // 负责人id（西昌组织下人员下拉选择）
      offset: 1,
      limit: 20,
      ids: checkoutList.value,
    }
    exportConfigList(params, currentMenu.value).then((res) => {
      const blob = new Blob([res.data])
      loading.close()
      exportFile(blob, `${menu.value[currentIndex.value].name}配置.xlsx`)
    })
  }
  else {
    loading.close()
    ElMessage.warning('无数据可导出数据')
  }
}

// ---------------------------------------钩子----------------------------------------------
onMounted(async () => {
  fetchData(false)
})
</script>

<template>
  <!-- 布局 -->
  <app-container>
    <search-area :need-clear="true" @search="searchList" @clear="clearList">
      <search-item>
        <el-input v-model.trim="listQuery.deviceNo" placeholder="设备编号" class="short-input" clearable />
      </search-item>
      <search-item>
        <el-input v-model.trim="listQuery.deviceName" placeholder="设备名称" class="short-input" clearable />
      </search-item>
    </search-area>
    <table-container>
      <template #btns-right>
        <icon-button icon="icon-add" title="新建" type="primary" @click="openDialog('add', null)" />
        <icon-button icon="icon-import" title="批量导入" type="primary" @click="handleBatchImport" />
        <icon-button icon="icon-template" title="模板下载" type="primary" @click="useTemplateDownload('设备信息管理模块')" />
        <icon-button icon="icon-export" title="导出" type="primary" @click="exportAll" />
      </template>
      <input v-show="false" ref="fileRef" type="file" accept="*" @change="onFileChange">
      <normal-table
        :data="menu[currentIndex].list" :total="total" :columns="menu[currentIndex].columns" :query="listQuery" :list-loading="loadingTable"
        is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
      >
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <template #columns>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="180"
          >
            <template #default="{ row }">
              <el-button
                size="small"
                link
                type="primary"
                @click="openDialog('edit', row)"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="primary"
                link
                @click="openDialog('detail', row)"
              >
                详情
              </el-button>
              <el-button
                size="small"
                type="danger"
                link
                @click="handleEdit(row, 'delete')"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
  </app-container>
  <!-- 右上角按钮集合 -->
  <button-box :active="currentMenu" :menu="menu" @change-current-button="changeCurrentButton" />
  <!-- 编辑温湿度网络传感器组件 -->
  <add-temperature-humidity ref="temperatureHumidityRef" @refresh="fetchData()" />
  <!-- 智能电量仪  -->
  <add-electric-quantity ref="electricQuantityRef" @refresh="fetchData()" />
  <!-- 氧气传感器、烟雾报警器 -->
  <add-oxygen-smoke ref="oxygenSmokeRef" @refresh="fetchData()" />
</template>