<!-- 地点管理列表 -->
<script lang="ts" setup name="PlaceList">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { IList, IListQuery } from './place-interface'
import addDialog from './addDialog.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { exportFile } from '@/utils/exportUtils'
import { deleteLocation, exportLocationList, getLocationList } from '@/api/laboratory/place'
import useUserStore from '@/store/modules/user'
const user = useUserStore() // 用户信息
const $router = useRouter()
const loadingTable = ref(false)
// 查询条件
const listQuery: Ref<IListQuery> = ref({
  locationName: '', // 地点名称
  locationNo: '', // 地点编号
  labName: user.lab, // 所属实验室
  limit: 20,
  offset: 1,
})
// 表头
const columns = ref<TableColumn[]>([
  { text: '地点名称', value: 'locationName', align: 'center', width: '160' },
  { text: '地点编号', value: 'locationNo', align: 'center' },
  { text: '地点位置', value: 'locationPosition', align: 'center' },
  { text: '所属实验室', value: 'locationLab', align: 'center' },
  { text: '创建人', value: 'createUser', align: 'center' },
  { text: '创建时间', value: 'createTime', align: 'center', width: '180' },
])
const list = ref<IList[]>([]) // 列表
const total = ref(0) // 数据总条数
const checkoutList = ref<string[]>([]) // 选中的内容
const addDialogRef = ref() // 新增、编辑字典组件ref
// ------------------------------------------------------------------------------------------------------

// 多选发生改变时
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
  }
  getLocationList(listQuery.value).then((response) => {
    list.value = response.data.rows
    total.value = parseInt(response.data.total)
    loadingTable.value = false
  })
}
// 清除条件
const clearList = () => {
  listQuery.value = {
    locationName: '', // 地点名称
    locationNo: '', // 地点编号
    labName: user.lab, // 所属实验室
    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: IList, val: string) => {
  switch (val) {
    case 'delete':
      ElMessageBox.confirm(
        '确认删除吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(() => {
          loadingTable.value = true
          deleteLocation({ id: row.id }).then((res) => {
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            fetchData(true)
          })
        })
      break
    case 'edit': // 编辑
      addDialogRef.value.initDialog('edit', row)
      break
    default:
      break
  }
}
// -------------------------------------------表格右上角几个图标方法-----------------------------------------------

// 导出
const exportAll = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '下载中请稍后',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  if (list.value.length > 0) {
    const params = {
      locationName: listQuery.value.locationName, // 地点名称
      locationNo: listQuery.value.locationNo, // 地点编号
      labName: listQuery.value.labName, // 所属实验室
      offset: 1,
      limit: 20,
      ids: checkoutList.value,
    }
    exportLocationList(params).then((res) => {
      const blob = new Blob([res.data])
      loading.close()
      exportFile(blob, '地点管理.xlsx')
    })
  }
  else {
    loading.close()
    ElMessage.warning('无数据可导出数据')
  }
}

// 点击新建
const add = () => {
  console.log('点击新建')

  addDialogRef.value.initDialog('add')
}

// ---------------------------------------钩子----------------------------------------------
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.locationNo" placeholder="地点编号" class="short-input" clearable />
      </search-item>
      <search-item>
        <el-input v-model.trim="listQuery.locationName" placeholder="地点名称" class="short-input" clearable />
      </search-item>
    </search-area>
    <table-container>
      <template #btns-right>
        <icon-button icon="icon-add" title="新建" type="primary" @click="add" />
        <icon-button icon="icon-export" title="导出" type="primary" @click="exportAll" />
      </template>
      <normal-table
        :data="list" :total="total" :columns="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="110"
          >
            <template #default="{ row }">
              <el-button
                size="small"
                link
                type="primary"
                @click="handleEdit(row, 'edit')"
              >
                编辑
              </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>
  <add-dialog ref="addDialogRef" @refresh="fetchData()" />
</template>