<template>
  <div class="box-main">
    <MomTable
      ref="MomTable"
      :columns="tableColumns"
      :data-source="filterTableData"
      :query-param="queryForm"
      row-key="token"
      :mega-extend="{
        rowAction: {
          width: 62,
        },
      }"
      :query-param-item="queryFormItem"
      :page.sync="page"
      :total="total"
      :action-buttons="tableAction"
      @search="searchPageData"
    />
  </div>
</template>

<script>
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Icon,
  },
  data() {
    return {
      queryForm: {
        userName: "",
        employeeNo: "",
      },
      // 表格配置项
      tableColumns: [
        {
          dataIndex: "userName",
          title: () => this.$t("USER_NAME"),
          width: 100,
          sorter: false,
        },
        {
          dataIndex: "name",
          title: () => this.$t("USER_REAL_NAME"),
          width: 160,
          sorter: false,
        },
        {
          dataIndex: "employeeNo",
          title: () => this.$t("JOB_NUMBER"),
          width: 100,
          sorter: false,
        },
        {
          dataIndex: "token",
          title: () => this.$t("TOKEN"),
          width: 300,
          sorter: false,
        },
        {
          dataIndex: "freeTime",
          title: () => this.$t("IDLE_TIME"),
          width: 140,
          sorter: false,
        },
        {
          dataIndex: "expireTime",
          title: () => this.$t("FAILURE_TIME"),
          width: 200,
          sorter: false,
        },
        {
          dataIndex: "expiresIn",
          title: () => this.$t("EFFECTIVE_DURATION"),
          width: 140,
          sorter: false,
        },
        {
          dataIndex: "lastVisitTime",
          title: () => this.$t("LAST_VISIT_TIME"),
          width: 200,
          sorter: false,
        },
        {
          dataIndex: "clientId",
          title: () => this.$t("TERMINAL_ID"),
          width: 200,
          sorter: false,
        },
        {
          dataIndex: "ip",
          title: () => this.$t("IP"),
          width: 200,
          sorter: false,
        },
        {
          dataIndex: "loginTime",
          title: () => this.$t("LOGIN_TIME"),
          width: 200,
          sorter: false,
        },
      ],
      list: [],
      limit: 15,
      filterTableData: [],
      total: 0,
      page: 1,
      tableAction: [
        (h, value, a, b) =>
          this.hasAuth("ONLINE_USER:KICK_OUT") && (
            <span onClick={() => this.handleEvent(value)}>
              <Icon
                type="icon-cur-t-tichu"
                size={14}
                title={this.$t("KICK_OUT")}
              />
            </span>
          ),
      ],
    };
  },
  computed: {
    // 表格查询条件
    queryFormItem() {
      return {
        userName: {
          label: this.$t("USER_NAME"), // 用户名
        },
        employeeNo: {
          label: this.$t("JOB_NUMBER"), // 工号
        },
      };
    },
  },
  async created() {
    // this.searchPageData()
  },
  methods: {
    // 后台分页查询
    searchPageData(data) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/mdm/user/online/list`, {
          params: data,
        })
        .then((res) => {
          this.list = [];
          this.filterTableData = res.data.data.filter((item) => {
            const userName = item.userName
              ? item.userName.toLocaleLowerCase()
              : "";
            const employeeNo = item.employeeNo
              ? item.employeeNo.toLocaleLowerCase()
              : "";
            const _userName = this.queryForm.userName
              ? this.queryForm.userName.toLocaleLowerCase()
              : "";
            const _employeeNo = this.queryForm.employeeNo
              ? this.queryForm.employeeNo.toLocaleLowerCase()
              : "";
            const userNameFlag = userName.includes(_userName);
            const employeeNoFlag = employeeNo.includes(_employeeNo);
            return userNameFlag && employeeNoFlag;
          });
          this.total = this.filterTableData.length;
          // 页面数据改变重新统计数据数量和当前页
          // this.page = 1
          // this.total = this.filterTableData.length
          // 渲染表格,根据值
          // this.currentChangePage(this.filterTableData)
          // 页面初始化数据需要判断是否检索过
          // this.flag = true
        });
    },
    // 每页显示条数改变触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    // 当前页改变触发
    handleCurrentChange(val) {
      this.page = val;
      // 判断是否为搜索的数据,传入对应值
      if (!this.flag) {
        this.currentChangePage(this.list);
      } else {
        this.currentChangePage(this.filterTableData);
      }
    },
    // 根据分页，确定当前显示的数据
    currentChangePage(item) {
      let fromNum = (this.page - 1) * this.limit;
      const toNum = this.page * this.limit;
      this.list = [];
      // eslint-disable-next-line
      for (; fromNum < toNum; fromNum++) {
        if (item[fromNum]) {
          this.list.push(item[fromNum]);
        }
      }
    },
    handleEvent(row) {
      this.$confirm({
        title: this.$t("DELETE"),
        content: this.$t("KICK_INFO"),
        okType: "warning",
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        icon: "close-circle",
        onOk: () => {
          this.$axios
            .post(
              `/core/oauth2/kickOut?userName=${row.record.userName}&userId=${row.record.userId}&token=${row.record.token}`
            )
            .then((res) => {
              this.$message.success(this.$t("KICK_OUT_SUCCESS"));
              this.$refs.MomTable?.query();
            });
        },
      });
    },
  },
};
</script>
