<template>
  <div class="oplog pagePadding">
     <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
    <el-row :gutter="24">
      <el-col :span="24" style="padding: 0 0 18px 0">
        <el-col :span="6" style="width: 328px; padding-right: 0">
          <period-date-picker
            :start="parmValue.start_time"
            :end="parmValue.end_time"
            :type="1"
            :size="searchSize"
            @timeReturned="timeReturned($event)"
          />
        </el-col>
        <el-col :span="3" style="padding-right: 0">
          <el-input
            :size="searchSize"
            v-model="parmValue.role"
            :maxlength="40"
            placeholder="用户角色"
          />
        </el-col>
        <el-col :span="3" style="padding-right: 0">
          <el-input
            v-model="parmValue.mod"
            :maxlength="40"
            :size="searchSize"
            placeholder="模块名称"
          />
        </el-col>
        <el-col :span="3" style="padding-right: 0">
          <el-input
            v-model="parmValue.keyword"
            :maxlength="40"
            :size="searchSize"
            placeholder="操作事件"
          />
        </el-col>
        <el-col :span="3" style="width: 152px; padding-right: 0">
          <el-button
            type="primary"
            :size="searchSize"
            icon="el-icon-search"
            @click="searchList"
          />
          <el-button type="warning"  v-if="powers.some((item) => item == '024')" :size="searchSize" @click="restSearch">
            重置
          </el-button>
        </el-col>
        <el-col
          :span="3"
          style="width: 82px; float: right; padding: 0 12px 0 0"
        >
          <el-button
          v-if="powers.some((item) => item == '002')"
            :size="searchSize"
            type="primary"
            style="float: right; margin: 0"
            @click="searchList"
          >
            刷新
          </el-button>
        </el-col>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      border
      :size="size"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="ID"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="action_user"
        label="操作人"
        show-overflow-tooltip
        align="center"
      />
      <!-- <el-table-column
        prop="mod"
        label="用户等级"
        show-overflow-tooltip
        align="center"
      ></el-table-column> -->

      <el-table-column
        prop="action_role"
        label="用户角色"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="action_event"
        label="操作事件"
        show-overflow-tooltip
        align="center"
      />

      <el-table-column
        prop="action_time"
        label="操作时间"
        show-overflow-tooltip
        align="center"
      />
    </el-table>
    <div
      v-if="count > 0"
      class="Pagination"
      style="text-align: right; margin-top: 10px"
    >
      <el-pagination
        v-if="count > 0"
        :size="searchSize"
        :current-page="parmValue.page"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="parmValue.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
     </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import PeriodDatePicker from "@/components/PeriodDatePicker";
import mixinPage from "@/mixins/elPaginationHandle";
import asyncRequest from "@/apis/service/system/oplog";
import { timestampToTime } from "@/utils/validate";
import { mapGetters } from "vuex";
export default {
  name: "Oplog",
  components: {
    PeriodDatePicker,
  },
  mixins: [mixinPage],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
        powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "oplog"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      loading: true,
      parmValue: {
        role: "", // 账户
        mod: "", // 姓名
        keyword: "",
        start_time: "",
        end_time: "",
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
      count: 0, // 总条数
      tableData: [],
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    restSearch() {
      this.parmValue = {
        role: "", // 账户
        mod: "", // 姓名
        keyword: "",
        start_time: "",
        end_time: "",
        page: 1, // 页码
        size: 10, // 每页显示条数
      };
      this.searchList();
    },
    async timeReturned(e) {
      if (e.startTime !== "") {
        this.parmValue.start_time = timestampToTime(e.startTime);
      } else {
        this.parmValue.start_time = "";
      }

      if (e.endTime !== "") {
        this.parmValue.end_time = timestampToTime(e.endTime);
      } else {
        this.parmValue.end_time = "";
      }
      if (this.parmValue.start_time !== "" && this.parmValue.end_time !== "") {
        this.parmValue.page = 1;
        await this.searchList();
      }
    },
    async searchList() {
      if (
        (this.parmValue.start_time === "" && this.parmValue.end_time !== "") ||
        (this.parmValue.start_time !== "" && this.parmValue.end_time === "")
      ) {
        this.$message.warning("时间段不完整！");
      } else {
        this.loading = true;
        const res = await asyncRequest.list(this.parmValue);
        if (res.code === 0 && res.data) {
          this.tableData = res.data.list;
           this.tableData.map(v1=>{
          v1.action_time=v1.action_time.replaceAll( ".000","")
          return v1
        })
          this.count = Number(res.data.count);
        } else {
          this.tableData = [];
          this.count = 0;
        }
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.oplog {
}
</style>
