<template>
  <div class="login_log_container body_container">
    <a-row>
      <a-col :span="20">
        <a-input-search
          allowClear
          class="middle"
          v-model="pager.queryParams.F_userName_like"
          :placeholder="$t('请输入用户账号')"
          @search="querySearch"
        />

        <a-input-search
          allowClear
          class="middle"
          v-model="pager.queryParams.F_ipaddr_like"
          :placeholder="$t('请输入IP地址')"
          @search="querySearch"
        />

        <a-range-picker
          style="width: 360px"
          :locale="locale"
          :default-value="[moment().startOf('day'), moment().endOf('day')]"
          :disabled-date="disabledDate"
          :placeholder="[$t('请选择'), $t('请选择')]"
          :show-time="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss"
          :separator="$t('至')"
          :allowClear="false"
          @change="onTimeChange"
        >
          <a-icon
            slot="suffixIcon"
            type="dashboard"
          />
        </a-range-picker>
      </a-col>
      <a-col
        :span="4"
        align="right"
      >
        <a-button
          type="primary"
          icon="search"
          @click="querySearch"
          >{{ $t('查询') }}</a-button
        >
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :row-config="{ isHover: true }"
          :data="lists"
          height="auto"
        >
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="60"
            align="center"
          ></vxe-column>
          <vxe-column
            field="userName"
            :title="$t('用户账号')"
          ></vxe-column>
          <vxe-column
            field="ipaddr"
            :title="$t('登录IP地址')"
          ></vxe-column>
          <vxe-column
            field="loginLocation"
            :title="$t('登录地点')"
          ></vxe-column>
          <vxe-column
            field="browser"
            :title="$t('浏览器')"
          ></vxe-column>
          <vxe-column
            field="os"
            :title="$t('操作系统')"
          ></vxe-column>
          <vxe-column
            field="status"
            :title="$t('登录状态')"
          >
            <template #default="{ row }">
              <a-tag
                class="tag_or"
                v-if="row.status == '0'"
                >{{ $t('成功') }}</a-tag
              >
              <a-tag
                class="tag_entry"
                v-else
                >{{ $t('失败') }}</a-tag
              >
            </template>
          </vxe-column>
          <vxe-column
            field="msg"
            :title="$t('操作信息')"
            width="160"
          ></vxe-column>
          <vxe-column
            field="createTime"
            :title="$t('登录时间')"
            width="160"
          ></vxe-column>
          <vxe-column
            :title="$t('操作')"
            align="center"
            width="100"
          >
            <template #default="{ row }">
              <a-popconfirm
                :title="$t('确定要删除吗')"
                :ok-text="$t('是')"
                :cancel-text="$t('否')"
                placement="left"
                @confirm="deleteLog(row)"
              >
                <a-button
                  class="btn a_danger"
                  type="link"
                  >{{ $t('删除') }}</a-button
                >
              </a-popconfirm>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description">{{ $t('暂无数据') }}</span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
      <vxe-pager
        background
        :current-page.sync="pager.pageNum"
        :page-size.sync="pager.pageSize"
        :total="total"
        @page-change="getFlowList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
  </div>
</template>
<script>
  const $appService = require('w-vue-basis/src/api/appService');

  export default {
    data() {
      return {
        loading: false,
        total: 0,
        lists: [],
        pager: {
          pageNum: 1,
          pageSize: 15,
          queryParams: {
            F_userName_like: undefined,
            F_ipaddr_like: undefined,
            F_createTime_gt: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
            F_createTime_lt: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
          },
        },
      };
    },
    created() {
      this.getFlowList();
    },
    methods: {
      /**
       * @Author: y_zp
       * @description: 设置不可选日期
       */
      disabledDate(cur) {
        return cur && cur > moment().endOf('day');
      },
      /**
       * @Author: y_zp
       * @description: 获取列表
       */
      getFlowList() {
        this.loading = true;
        $appService
          .loginLogList(this.pager)
          .then((req) => {
            this.total = Number(req.count);
            this.lists = req.data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /**
       * @Author: y_zp
       * @description: 查询
       */
      querySearch() {
        this.pager.pageNum = 1;
        this.getFlowList();
      },
      /**
       * @Author: y_zp
       * @description: 选择时间
       */
      onTimeChange(date, dateString) {
        this.pager.queryParams.F_createTime_gt = dateString[0];
        this.pager.queryParams.F_createTime_lt = dateString[1];
        this.querySearch();
      },
      /**
       * @Author: y_zp
       * @description: 删除
       */
      deleteLog(row) {
        $appService.delLoginLog(row.infoId).then((req) => {
          this.$message.success($t('日志删除成功'));
          this.getFlowList();
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .login_log_container {
    .ant-input-search.middle {
      width: 180px;
    }
    .table_list {
      width: 100%;
      height: calc(100vh - 230px);
      display: inline-block;
      margin-top: 16px;
    }
  }
</style>
