<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'
import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'

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">
    <div class="app-container__body">
      <IconTitle :icon="pageIcon" title="系统日志管理" />
      <div class="box">
        <div class="line"></div>
        <div class="content">
          <el-form-item label="保留月份:" prop="">
            <div style="display: flex;width: 100%;">
              <el-select v-model="keepMonth" placeholder="请选择" style="flex: 1;">
                <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
              <el-button type="primary" style="width: 60px; margin-left: 10px;border-radius: 0;" @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;width: 100%;">
                <el-date-picker style="flex: 1;" 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>
                <el-button type="primary" style="width: 60px;border-radius: 0;margin-left: 24px;" @click="querylogFunc()">查询</el-button>
                <el-button type="primary" style="width: 60px; margin-left: 10px;border-radius: 0;background: rgba(11, 136, 251, 1);border-color: rgba(11, 136, 251, 1);" @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>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {
  .box {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: #fff;

    .line {
      width: 100%;
      height: 2px;
      border-radius: 5px 5px 0px 0px;
      background: linear-gradient(90deg,
          rgba(33, 103, 217, 1) 0%,
          rgba(17, 200, 250, 1) 34.03%,
          rgba(33, 103, 217, 1) 64.58%,
          rgba(48, 128, 255, 1) 100%);
    }

    .content {
      padding: 52px 280px;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      :deep(.el-form-item__label){
        font-weight: 400;
        font-size: 12px;
        color: rgba(148, 148, 148, 1);
      }
      :deep(.el-textarea__inner) {
        background: #f3f5fa;
      }
    }
  }
}
</style>