<template>
  <div class="interfacel">
    <el-form
      :model="queryConfig"
      :rules="rules"
      ref="queryConfig"
      label-width="100px"
      class="demo-queryConfig"
    >
      <el-row :gutter="10">
        <el-col :span="3">
          <el-form-item :label="$t('logManage.title')" prop="name">
            <el-input
              v-model="queryConfig.title"
              :placeholder="$t('logManage.PleaseEnter') + $t('logManage.title')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item :label="$t('logManage.module')" prop="">
            <el-select
              v-model="queryConfig.module"
              :placeholder="
                $t('logManage.PleaseSelect') + $t('logManage.module')
              "
            >
              <el-option
                v-for="item in optionsModule"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item :label="$t('logManage.content')" prop="name">
            <el-input
              v-model="queryConfig.content"
              :placeholder="
                $t('logManage.PleaseEnter') + $t('logManage.content')
              "
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item :label="$t('logManage.sign')" prop="">
            <el-select
              v-model="queryConfig.flag"
              :placeholder="$t('logManage.PleaseSelect') + $t('logManage.sign')"
            >
              <el-option
                v-for="item in optionsFlag"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item :label="$t('logManage.startTime')" prop="">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              :placeholder="
                $t('logManage.PleaseSelect') + $t('logManage.startTime')
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="3.5">
          <el-form-item :label="$t('logManage.endTime')" prop="">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              :placeholder="
                $t('logManage.PleaseSelect') + $t('logManage.endTime')
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="">
            <el-button
              icon="el-icon-search"
              class="T1"
              @click="btnAction()"
              size="small"
              type="primary"
              >{{ $t("logManage.query") }}</el-button
            >
            <el-button class="T1" size="small" @click="details()">{{
              $t("logManage.queryDetails")
            }}</el-button>
            <el-button
              class="T1"
              size="small"
              icon="el-icon-download"
              @click="ExportList()"
              >{{ $t("logManage.export") }}</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="table">
      <el-table
        :data="tableData"
        border
        highlight-current-row
        :height="TableHeight"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        ref="multipleTable"
        :header-cell-style="{ color: '#000000' }"
        class="custom-table"
      >
        <el-table-column
          type="selection"
          align="center"
          width="55"
        ></el-table-column>
        <el-table-column
          prop="id"
          :label="$t('logManage.internalID')"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          :label="$t('logManage.title')"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="module" :label="$t('logManage.module')">
        </el-table-column>
        <el-table-column prop="content" :label="$t('logManage.content')">
        </el-table-column>
        <el-table-column prop="level" :label="$t('logManage.sign')">
        </el-table-column>
        <el-table-column prop="created" :label="$t('logManage.createdTime')">
        </el-table-column>
        <el-table-column prop="userCode" :label="$t('logManage.founder')">
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          style="margin-top: 15px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryConfig.currentPage"
          :page-sizes="[20, 50, 100]"
          :page-size="queryConfig.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
    <el-dialog
      :title="$t('logManage.systemLogDetails')"
      :visible.sync="dialogFormVisible"
    >
      <div class="container" v-for="(item, index) in detailsData" :key="index">
        <div class="box">
          <div class="inner-left">{{ $t("logManage.internalID") }}：</div>
          <div class="inner-right">{{ item.id }}</div>
        </div>
        <div class="box">
          <div class="inner-left">{{ $t("logManage.title") }}：</div>
          <div class="inner-right">{{ item.title }}</div>
        </div>
        <div class="box">
          <div class="inner-left">{{ $t("logManage.module") }}：</div>
          <div class="inner-right">{{ item.module }}</div>
        </div>
        <div class="box">
          <div class="inner-left">{{ $t("logManage.sign") }}：</div>
          <div class="inner-right">{{ item.level }}</div>
        </div>
        <div class="box">
          <div class="inner-left">{{ $t("logManage.createdTime") }}：</div>
          <div class="inner-right">{{ item.created }}</div>
        </div>
        <div class="box">
          <div class="inner-left">{{ $t("logManage.founder") }}：</div>
          <div class="inner-right">{{ item.userCode }}</div>
        </div>
        <div class="TextField">
          <div class="inner-left">{{ $t("logManage.content") }}：</div>
          <div class="inner-right">
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="
                $t('logManage.PleaseEnter') + $t('logManage.content')
              "
              v-model="item.content"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{
          $t("logManage.cancel")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetDictWithDetailsLangs,
  GetSysLog,
  GetSysLogById,
} from "@/api/logManage/index";
import downloadFile from "@/api/user";
export default {
  data() {
    return {
      tableData: [],
      queryConfig: {
        currentPage: 1,
        pageSize: 20,
        title: "",
        module: "",
        content: "",
        level: "",
      },
      total: 0,
      form: {
        startTime: this.$moment()
          .subtract(3, "days")
          .format("YYYY-MM-DD 00:00:00"),
        endTime: this.$moment().add(1, "days").format("YYYY-MM-DD 23:59:59"),
      },
      optionsModule: [
        {
          value: "",
          label: "全部",
        },
      ],
      optionsFlag: [
        {
          value: "",
          label: "",
        },
      ],
      dialogFormVisible: false,
      multipleSelection: [],
      detailsData: [],
      export: "api/Log/ExportSysLog",
    };
  },
  created() {
    this.optionsFlag[0].label = this.$t("taskManage.all");
    this.getFlag("LogLevelFlag");
    this.getFlag("LogModuleFlag");
    this.getTableList();
  },
  computed: {
    TableHeight() {
      return `calc(100vh - 390px )`;
    },
  },
  methods: {
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    btnAction() {
      this.getTableList();
    },
    getFlag(data) {
      let params = { Code: data };
      GetDictWithDetailsLangs(params).then((response) => {
        response.data.dictDetails.forEach((x) => {
          if (data == "LogLevelFlag") {
            this.optionsFlag.push({ value: x.code, label: x.name });
          } else if (data == "LogModuleFlag") {
            this.optionsModule.push({ value: x.code, label: x.name });
          }
        });
      });
    },
    getTableList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: {
          title: this.queryConfig.title,
          module: this.queryConfig.module,
          content: this.queryConfig.content,
          level: this.queryConfig.level,
          begin: this.form.startTime,
          end: this.form.endTime,
        },
      };
      this.listLoading = true;
      GetSysLog(params).then((response) => {
        this.total = response.data.totalCount;
        this.tableData = response.data.data;
        this.listLoading = false;
      });
    },
    //获取表格行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //   详情
    details() {
      if (this.multipleSelection.length == 0) {
        this.$alert(
          this.$t("logManage.PleaseSelectApieceOfData"),
          this.$t("logManage.systemLogDetails"),
          {
            confirmButtonText: this.$t("logManage.sure"),
          }
        );
      } else {
        this.detailsData = [];
        let params = {
          id: this.multipleSelection[0].id,
        };
        GetSysLogById(params).then((response) => {
          this.detailsData.push(response.data);
        });
        this.dialogFormVisible = true;
      }
    },
    //导出按钮
    ExportList() {
      const params = {
        pageNumber: this.queryConfig.currentPage,
        perPageCount: this.queryConfig.pageSize,
        queryConfig: {
          title: this.queryConfig.title,
          module: this.queryConfig.module,
          content: this.queryConfig.content,
          level: this.queryConfig.level,
          begin: this.form.startTime,
          end: this.form.endTime,
        },
      };
      let text = this.$t("logManage.systemLogData") + ".xlsx";
      // 调用下载函数
      downloadFile(this.export, params, text);
    },
    //获取表格行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页
    handleSizeChange(val) {
      this.queryConfig.pageSize = val;
      this.queryConfig.currentPage = 1;
      this.getTableList();
    },

    handleCurrentChange(val) {
      this.queryConfig.currentPage = val;
      this.getTableList();
    },
  },
};
</script>
<style scoped lang="scss">
.interfacel {
  width: 100%;
}
.table {
  border: 1px solid #e5e9f2;
}
.T1 {
  border: 1px solid #b3d8ff;
}
.pagination-container {
  text-align: center; /* 使分页组件靠右 */
  margin-top: 20px; /* 添加顶部间距 */
}
</style>