<template>
  <div class="koi-flex">
    <KoiCard>
      <el-form ref="queryFormRef" :inline="true" :model="queryParams">
        <el-form-item label="操作模块" prop="operateModule">
          <el-select v-model="queryParams.operateModule" clearable filterable placeholder="请选择操作模块">
            <el-option
              v-for="dict in koiDicts.batch_operate_module"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
              style="width: 200px"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作类型" prop="operateType">
          <el-select v-model="queryParams.operateType" clearable filterable placeholder="请选择操作类型">
            <el-option
              v-for="dict in koiDicts.batch_operate_type"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
              style="width: 200px"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="完成状态" prop="operateStatus">
          <el-select v-model="queryParams.operateStatus" clearable filterable placeholder="请选择完成状态">
            <el-option
              v-for="dict in koiDicts.batch_operate_status"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
              style="width: 200px"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-throttle="getList" icon="search" plain type="primary">搜索</el-button>
          <el-button v-throttle="resetQuery" icon="refresh" plain type="danger">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-auth="['system:batchOperationResult:remove']"
            :disabled="multiple"
            icon="Delete"
            type="primary"
            @click="handleDelete('')"
          >删除
          </el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="batchOperationResultList" border @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" label="任务ID" prop="recordId"/>
        <el-table-column align="center" label="操作模块" prop="operateModule">
          <template #default="scope">
            <KoiTag :tag-options="koiDicts.batch_operate_module" :value="scope.row.operateModule"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作类型" prop="operateType">
          <template #default="scope">
            <KoiTag :tag-options="koiDicts.batch_operate_type" :value="scope.row.operateType"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="完成状态" prop="operateStatus">
          <template #default="scope">
            <KoiTag :tag-options="koiDicts.batch_operate_status" :value="scope.row.operateStatus"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="成功数量" prop="operateSuccessSum"/>
        <el-table-column align="center" label="失败数量" prop="operateFailSum"/>
        <el-table-column align="center" label="操作时间" prop="createTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作人" prop="operator"/>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template #default="{ row }">
            <el-tooltip content="下载文件" placement="top">
              <el-button
                circle
                icon="Download"
                plain
                type="primary"
                @click="handleDownLoadRes(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                v-auth="['system:user:remove']"
                circle
                icon="Delete"
                plain
                type="danger"
                @click="handleDelete(row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="h-20px"></div>
      <!-- 分页 -->
      <Pagination :queryParams="queryParams" :total="total" :getList="getList" />

    </KoiCard>
  </div>
</template>

<script name="batchOperationResult" setup>
import {onMounted, reactive, ref} from 'vue'
import {useKoiDict} from "@/hooks/dicts/index.ts";
import {
  batchDelResultIds,
  listBatchOperationResult,
} from "@/api/tool/batchOperationResult/index.js"
import {parseTime} from "@/utils/ruoyi.ts"
import {koiMsgBox} from "@/utils/koi.js";

// 字典
const {koiDicts} = useKoiDict([
  'batch_operate_type',
  'batch_operate_module',
  'batch_operate_status',
  'sys_notice_type'
])

// 查询表单ref
const queryFormRef = ref()
// 表单ref
const formRef = ref()

// 遮罩层
const loading = ref(true)
// 选中数组
const ids = ref([])
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 批量操作结果表格数据
const batchOperationResultList = ref([])
// 是否显示弹出层
const open = ref(false)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  operateType: null,
  operateModule: null,
  operateStatus: null,
})

// 表单参数
const form = reactive({})

/** 查询批量操作结果列表 */
const getList = async () => {
  loading.value = true
  try {
    const res = await listBatchOperationResult(queryParams)
    batchOperationResultList.value = res.data.records
    total.value = res.data.total
  } finally {
    loading.value = false
  }
}

// 取消按钮
const cancel = () => {
  open.value = false
  reset()
}

// 表单重置
const reset = () => {
  form.value = {
    recordId: null,
    operateType: null,
    operateModule: null,
    operateStatus: "0",
    operateMsg: null,
    operateFilePath: null,
    successCount: null,
    failCount: null,
    remark: null,
    updateTime: null,
    updateBy: null
  }
  formRef.value?.resetFields()
}

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

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

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.recordId)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

const handleDownLoadRes = (row) => {
  let url = import.meta.env.VITE_SERVER + row.operateFilePath
  const newUrl = url.replace("/xin-api//home/project/xin", "");
  window.open(newUrl)
}

/** 删除按钮操作 */
const handleDelete = async (row) => {
  const batchOperateResultIds = row.recordId || ids.value
  let data = []
  if (row) {
    data.push({
      id: row.recordId,
      name: row.operateFilePath
    })
  } else {
    let filterList = ids.value.flatMap(id =>
      batchOperationResultList.value.filter(v => v.recordId === id)
    )
    filterList.map(v => {
      data.push({
        id: v.recordId,
        name: v.operateFilePath
      })
    })
  }
  koiMsgBox("是否确认删除批量操作结果编号为" + batchOperateResultIds + "的数据项？")
    .then(async () => {
      await batchDelResultIds({delList: data})
    }).then(() => {
      getList()
  })
    .catch(() => {

    });
}

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

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.mb8 {
  margin-bottom: 8px;
}

.dialog-footer {
  padding: 20px;
  text-align: right;
}
</style>

