<script setup name="Index">
import { onMounted, ref, reactive } from 'vue'
import { ElMessage } from "element-plus";
import { changeRoute } from '@/utils/switchRoute'
import QueryForm from './QueryForm.vue'
import { queryDesensitizationStrategyLog, checkEnc, getdesensitizationStrategyLog } from "@/api/itemLogSet/desensitizationItemLog.js";
import returnLogo from '@/assets/images/return.png'
import pageIcon from '@/assets/images/rizhi.png'
const queryParams = ref({
  page: 1,
  rows: 10,
  projectId: sessionStorage.getItem('projectId'),
  range: "3",
  user: "",
  module: "",
})
const logList = ref([])
const total = ref(0)
const loading = ref(false)

// 筛选查询
const onQuery = () => {
  getList()
}
// 查询组件事件重置
const onReset = (formQuery) => {
  formQuery.resetFields()
  getList()
}

// 获取列表数据
const getList = async () => {
  try {
    loading.value = true
    const { data } = await queryDesensitizationStrategyLog(queryParams.value)
    logList.value = data.list
    total.value = data.total
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

// 导出
const download = async () => {
  try {
    const response = await getdesensitizationStrategyLog(queryParams.value)
    const blob = new Blob([response], { type: 'application/vnd.ms-excel,charset=utf-8' });
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '脱敏策略日志'
    link.click()
    URL.revokeObjectURL(link.href)
    ElMessage.success('导出成功')
  } catch (error) {
  }
}

// 数据校验
const dataValidation = async () => {
  try {
    const { flag } = await checkEnc(queryParams.value)
    if (flag) {
      ElMessage.success('校验成功！')
    } else {
      ElMessage.error('校验失败！')
    }
  } catch (error) {
  }
}

// 返回主页面
const pageProjectManage = () => {
  changeRoute()
}

onMounted(() => {
  getList()
})
</script>
<template>
  <div class="app-container scroller">
    <PageTitle  @back="pageProjectManage">
      <template #title>
        
        <div style="display: flex;align-items: center;">
          <img class="title-icon" :src="pageIcon" alt="">
          <span style="margin-left: 8px;">脱敏策略日志</span>
        </div>
      </template>
      <template #buttons>
        <el-button type="primary" icon="Download" @click="download">导出</el-button>
        <el-button type="primary" @click="dataValidation">数据完成性校验</el-button>

        <el-button  color="rgba(11, 136, 251, 1)" plain  @click="pageProjectManage"><img class="return-logo" :src="returnLogo" alt="">返回项目管理</el-button>
      </template>
    </PageTitle>
    <div class="app-container__body">
      <query-form ref="QueryFormRef" v-model="queryParams" @query="onQuery" @reset="onReset" />
     <div style="flex:1;">
       <el-table v-loading="loading" :data="logList" stripe
          height="100%" style="width: 100%">
        <el-table-column prop="createuser" label="用户" align="center" width="200" />
        <el-table-column prop="createtime" label="时间" align="center" width="180" />
        <el-table-column prop="code" label="操作代码" align="center" width="180" />
        <el-table-column prop="operationMassage" label="操作信息" align="center" show-overflow-tooltip />
      </el-table>
     </div>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
        @pagination="getList" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.return-logo {
  width: 16px;
  height: 12.25px;
}
</style>