<!--
  Description: 台账管理-安装位置管理
  Author: 李亚光
  Date: 2025-1-15
 -->
<script lang="ts" setup name="locationManage">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { getSyncListPage, removeLocation, exportLocation, importLocation } from '@/api/home/ledger/location'
import { exportFile } from '@/utils/exportUtils'
import addDialog from './components/addDialog.vue'
import { getDictByCode } from '@/api/system/dict'
const { proxy } = getCurrentInstance() as any

const locationTypeList = ref<{ id: string; name: string; value: string }[]>([])
// 表格数据
const list = ref([])
const total = ref(0)
const loadingTable = ref(false)
// 表格初始列
const columns = ref<any>([
  { text: '安装位号', value: 'tagNumber', align: 'center' },
  { text: '位置类别', value: 'locationCategoryName', align: 'center' },
  { text: '详细位置', value: 'position', align: 'center' },
  // { text: '关联管线', value: 'pipeCode', align: 'center' },
  { text: '经度', value: 'lngGaode', align: 'center' },
  { text: '纬度', value: 'latGaode', align: 'center' },
  { text: '管理单位', value: 'deptName', align: 'center' },
  { text: '更新时间', value: 'ts', align: 'center' },
  // { text: '操作人', value: 'user', align: 'center' },
])
// 表格最终展示列
const columnsConfig = ref<any>([])
// 修改列
const editColumns = (data: any) => {
  columnsConfig.value = data
}
// 查询条件
const listQuery = ref({
  tagNumber: '', //安装位号
  position: '', //详细位置
  deptid: '', //管理单位
  type: '', // 位置类别
  offset: 1,
  limit: 20,
  locationCategory: ''
})

const fetchData = () => {
  loadingTable.value = true
  getSyncListPage(listQuery.value).then(res => {
    // console.log(res.data.rows)
    list.value = res.data.rows.map((item: any) => ({
      ...item,
      // typeName: item.type === '1' ? '其他监测点' : item.type === '3' ? '管线监测点' : '',
      locationCategoryName: item.locationCategory ? locationTypeList.value.filter((citem) => citem.value === item.locationCategory)[0]?.name || '' : '',
    }))
    total.value = res.data.total
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}

// 重置查询条件
const reset = () => {
  listQuery.value = {
    tagNumber: '', //安装位号
    position: '', //详细位置
    deptid: '', //管理单位
    type: '', // 位置类别
    offset: 1,
    limit: 20,
    locationCategory: '',
  }
  fetchData()
}
// 删除
const removeRow = (row: any) => {
  // console.log(row, '111')
  ElMessageBox.confirm(
    '该点位有可能绑定设备，确定删除？',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    removeLocation([row.id], [row.tagNumber]).then((response) => {
      if (response.code === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        fetchData()
      }
    })
  })
}
// 导出列表
const exportList = () => {
  if (!list.value.length) {
    ElMessage.warning('暂无导出数据')
    return
  }
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  exportLocation(listQuery.value).then((res) => {
    exportFile(res.data, '点位列表.xlsx')
    loading.close()
  }).catch(() => {
    loading.close()
  })
}
// 导入
const fileRef = ref()
const importList = () => {
  fileRef.value.click()
}
const onFileChange = (event: any) => {
  // 原生上传
  // console.log(event.target.files)
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('file', event.target.files[0])
    // fd.append('equipmentType', $props.equipmentType)
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    importLocation(fd).then((res) => {
      if (res.code === 200) {
        ElMessage.success('导入成功')
        fileRef.value.value = ''
        loading.close()
        fetchData()
      }
      else {
        fileRef.value.value = ''
        // ElMessage.error(res.message)
        loading.close()
      }
    }).catch(() => {
      fileRef.value.value = ''
      // ElMessage.error(err.message)
      loading.close()
    })
  }
}
// 新建或者编辑
const addRef = ref()
const editRow = (type: string, row: any) => {
  addRef.value.initDialog(type, row)
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
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()
}

// 获取字典
const fetchDict = async () => {
  const res = await getDictByCode('locationType')
  locationTypeList.value = res.data
}
onMounted(async () => {
  await fetchDict()
  fetchData()
})

</script>

<template>
  <!-- 布局 -->
  <app-container>
    <addDialog ref="addRef" @refresh="fetchData" />
    <search-area :need-clear="true" @search="fetchData" @clear="reset">
      <search-item>
        <el-input v-model="listQuery.tagNumber" placeholder="安装位号" clearable style="width: 162px;" />
      </search-item>
      <search-item>
        <el-select v-model="listQuery.locationCategory" placeholder="位置类别" clearable filterable style="width: 162px;">
          <!-- <el-option label="管线监测点" value="3" />
          <el-option label="其他监测点" value="1" /> -->
          <el-option v-for="item in locationTypeList" :key="item.id" :label="item.name" :value="item.value" />
        </el-select>
      </search-item>
      <search-item>
        <dept-select v-model="listQuery.deptid" placeholder="管理单位" :clearable="true" style="width: 162px;" />
      </search-item>
      <search-item>
        <el-input v-model.trim="listQuery.position" placeholder="详细位置" clearable style="width: 162px;" />
      </search-item>
    </search-area>
    <!-- 表头标题 -->
    <table-container :is-config="true" config-title="location-manage1" :columns="columns"
      :config-columns="columnsConfig" :edit="editColumns">
      <template #btns-right>
        <!-- 操作 -->
        <div>
          <el-button v-if="proxy.hasPerm('/ledger/location/add')" type="primary" @click="editRow('add', {})">
            新建
          </el-button>
          <el-button v-if="proxy.hasPerm('/ledger/location/import')" type="primary" @click="importList" >
            批量导入
          </el-button>
          <el-button v-if="proxy.hasPerm('/ledger/location/export')" type="primary" @click="exportList" >
            导出
          </el-button>
          <input ref="fileRef" style="display: none;" type="file" accept=".xls,.xlsx" @change="onFileChange">
        </div>
      </template>
      <normal-table :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
        @change="changePage">
        <template #preColumns>
          <el-table-column label="序号" width="80" 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" width="120">
            <template #default="scope">
              <el-button v-if="proxy.hasPerm('/ledger/location/update')" type="primary" link size="small" @click="editRow('edit', scope.row)">
                编辑
              </el-button>
              <el-button v-if="proxy.hasPerm('/ledger/location/remove')" type="danger" link size="small" @click="removeRow(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
  </app-container>
</template>