<template>
  <div class="oplog pagePadding">
    <ex-table
      v-loading="loading"
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
      :table="table"
      :data="tableData"
      :columns="columns"
      :page="pageInfo"
      :size="size"
      @page-curr-change="handlePageChange"
      @page-size-change="handleSizeChange"
      @screen-reset="
        pageInfo.curr = 1;
        searchList();
      "
      @screen-submit="
        pageInfo.curr = 1;
        searchList();
      "
    >
      <template #table-header="{}">
        <div style="width: 100%">
          <el-row>
            <el-col :span="24" style="padding: 0 0 10px 0">
              <el-col :span="6" style="width: 302px; padding: 0 0 0 0px">
                <period-date-picker
                  :start="parmValue.lowtime"
                  :end="parmValue.uptime"
                  :type="1"
                  :width="'140px'"
                  :size="searchSize"
                  @timeReturned="timeReturned($event)"
                />
              </el-col>
              <el-col :span="6" style="width: 320px; padding: 0 0 0 10px">
                <el-cascader
                  clearable
                  @change="searchList()"
                  style="width: 100%"
                  :size="searchSize"
                  placeholder="请选择操作模块/功能"
                  v-model="parmValue.moudel"
                  :options="options"
                  :props="{ checkStrictly: true }"
                ></el-cascader>
              </el-col>

              <el-col
                :span="3"
                v-if="powers.some((item) => item == '008')"
                style="width: 66px; float: right; padding: 0 0 0 0"
              >
                <el-button
                  class="fr"
                  type="warning"
                  :size="searchSize"
                  @click="restSearch"
                >
                  重置
                </el-button>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" style="width: 150px">
                <el-select
                  :size="searchSize"
                  v-model="parmValue.role"
                  filterable
                  clearable
                  placeholder="角色类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="'status' + item.id"
                    :label="item.label"
                    :value="item.id"
                  />
                </el-select>
              </el-col>
              <el-col :span="6" style="width: 350px; padding: 0 0 0 10px">
                <el-input
                  :size="searchSize"
                  placeholder="请输入账户名"
                  v-model="parmValue.username"
                  class="input-with-select"
                >
                  <el-button
                    slot="append"
                    @click.native="searchList"
                    icon="el-icon-search"
                  ></el-button>
                </el-input>
              </el-col>

              <el-col
                :span="3"
                v-if="powers.some((item) => item == '002')"
                style="width: 66px; float: right; padding: 0 0 0 0"
              >
                <el-button
                  :size="searchSize"
                  type="primary"
                  style="float: right; margin: 0"
                  @click="searchList"
                >
                  刷新
                </el-button>
              </el-col>
            </el-col>
          </el-row>
        </div>
      </template>
    </ex-table>
    <no-auth v-else></no-auth>
  </div>
</template>
<script>
import ExTable from "@/components/ExTableNew.vue";
import asyncRequest from "@/apis/service/system/oplog";
import mixinPage from "@/mixins/elPaginationHandle";
import PeriodDatePicker from "@/components/PeriodDatePicker";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
export default {
  name: "oplog",
  mixins: [mixinPage, resToken],
  components: {
    ExTable,
    PeriodDatePicker,
  },
  computed: {
    //组件SIZE设置
    ...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: false,
      options: [],
      // 状态
      statusList: [
        { id: 1, label: "超级管理员" },
        { id: 2, label: "运营管理员" },
        { id: 3, label: "手机端用户" },
      ],
      parmValue: {
        role: "", // 角色
        lowtime: "", //操作开始时间
        uptime: "", //操作结束时间
        username: "", // 账户
        moudel: [],
        page: 1, // 页码
        size: 15, // 每页显示条数
      },

      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"]
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: [
        {
          prop: "id",
          label: "日志编码",
          width: "100",
        },
        {
          prop: "username",
          label: "操作账号",
          width: "100",
        },
        {
          prop: "role",
          label: "用户角色",
          width: "100",
        },
        {
          prop: "module",
          label: "模块",
          width: "140",
        },
        // {
        //   prop: "action",
        //   label: "功能",
        //   width: "100",
        // },
        {
          prop: "msg",
          label: "事件",
        },
        {
          prop: "addtime",
          label: "操作时间",
          width: "150",
          sortable: true,
        },
      ],
    };
  },
  mounted() {
    this.options = [];
    this.getmoudel();
  },
  methods: {
    restSearch() {
      // 表格 - 分页
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.parmValue = {
        role: "", // 角色
        lowtime: "", //操作开始时间
        uptime: "", //操作结束时间
        username: "", // 账户
        moudel: [],
        page: 1, // 页码
        size: 15, // 每页显示条数
      };
      this.searchList();
    },

    async timeReturned(e) {
      if (e.lowtime !== "") {
        this.parmValue.lowtime = e.lowtime;
      } else {
        this.parmValue.lowtime = "";
      }

      if (e.uptime !== "") {
        this.parmValue.uptime = e.uptime;
      } else {
        this.parmValue.uptime = "";
      }
      if (this.parmValue.lowtime !== "" && this.parmValue.uptime !== "") {
        this.parmValue.page = 1;
        await this.searchList();
      }
    },
    /**
     * 获取模块列表
     */
    async getmoudel() {
      const res = await asyncRequest.moudel({});
      if (res && res.code === 0 && res.data) {
        let list = res.data;
        list.forEach((v1) => {
          let model = Object.assign({}, v1);
          if (model.children && model.children.length === 0) {
            delete model["children"];
          }
          this.options.push(model);
        });
        this.searchList();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.options = [];
      }
    },

    // 刷新表格
    async searchList() {
      this.loading = true;
      let item = JSON.parse(JSON.stringify(this.parmValue));
      let list = item.moudel;
      item.moudel = list.length > 0 ? list[0] : "";
      item.action = list.length > 1 ? list[1] : "";
      console.log(item);
      const res = await asyncRequest.list(item);
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data.list;
        this.pageInfo.total = Number(res.data.count);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

