<script setup name="SystemLogManage">
import { onMounted, ref, reactive } from 'vue'
import { ElMessage } from "element-plus";
import { query, save, querylog, download } from '@/api/systemConfig/systemLogManage.js'

const monthOptions = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) // 保留月份
const keepMonth = ref('') // 月份值
const queryData = reactive({
  count: '',
  date: ''
}) // 查询条件
const resultStr = ref('') // 日志值
const loading = ref(false)

// 查询月份
const handelQuery = async () => {
  const { flag, data, msg } = await query({})
  if (flag) {
    keepMonth.value = data !== '0' ? data : ''
  } else {
    ElMessage.error(msg)
  }
}

// 保存月份
const handelSave = async () => {
  if (!keepMonth.value) {
    ElMessage.warning('保留月份不能为空！')
    return false
  }
  const { flag, msg } = await save({ reservemonth: keepMonth.value })
  if (flag) {
    ElMessage.success('保存成功')
  } else {
    ElMessage.error(msg)
  }
}

// 查询日志
const querylogFunc = async () => {
  if (!queryData.date) {
    ElMessage.warning('请选择日志日期！')
    return false
  }
  if (!queryData.count) {
    ElMessage.warning('请填写查询条数！')
    return false
  }
  const dataObj = {
    count: Number(queryData.count),
    date: queryData.date
  }
  const { flag, data, msg } = await querylog(dataObj)
  if (flag) {
    resultStr.value = data
    ElMessage.success('查询成功')
  } else {
    ElMessage.error(msg)
  }
}

// 下载日志
const downloadFunc = async () => {
  if (!queryData.date) {
    ElMessage.warning('请选择日志日期！')
    return false
  }
  const response = await download({ date: queryData.date })
  const blob = new Blob([response]);
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `系统日志${queryData.date}.log`
  link.click()
  URL.revokeObjectURL(link.href)
  ElMessage.success('成功')
}


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

<template>
  <div class="app-container scroller">
    <PageTitle>
      <template #title>系统控制台</template>
    </PageTitle>
    <div class="app-container__body">
      <div class="formBox">
        <el-form-item label="保留月份:" prop="">
          <div style="display: flex;">
            <el-select v-model="keepMonth" placeholder="请选择">
              <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <el-button type="primary" style="width: 120px; margin-left: 10px;" @click="handelSave()">保存</el-button>
          </div>
        </el-form-item>
        <el-form-item label="日志日期:" prop="">
          <div style="width: 100%;justify-content: space-between;display: flex;">
            <div style="display: flex;">
              <el-date-picker v-model="queryData.date" type="date" placeholder="请选择日志日期"
                value-format="YYYY-MM-DD"></el-date-picker>
              <div style="display: flex;align-items: center;margin-left: 30px;">
                <span>近</span>
                <el-input v-model="queryData.count" style="width: 80px;margin: 0px 6px;"></el-input>
                <span>条</span>
              </div>
            </div>
            <div>
              <el-button type="primary" @click="querylogFunc()">查询</el-button>
              <el-button type="primary" style="margin-left: 10px;" @click="downloadFunc()">下载</el-button>
            </div>
          </div>
        </el-form-item>
        <el-input type="textarea" v-model="resultStr" rows="20" placeholder="" readonly></el-input>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {
  :deep(.el-form-item__label){
    font-weight: 400;
  }
  :deep(.el-input__wrapper) {
    background: #f3f5fa;
  }
  :deep(.el-select__wrapper) {
    background: #f3f5fa;
  }
  :deep(.el-textarea__inner) {
    background: #f3f5fa;
  }
  .formBox {
    width: 800px;
    margin: 0px auto;
  }
}
</style>