<template>
  <div>
    <!-- 头部导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>小工具</el-breadcrumb-item>
      <el-breadcrumb-item>登录白名单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div class="addWhiteList">
        <el-input v-model="whiteListParam.key" placeholder="请输入设备id或手机号"></el-input>
        <el-select v-model="whiteListParam.keyType" placeholder="请选择白名单类型">
          <el-option v-for="item in whiteListType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="addToWhiteList">添加到登录白名单</el-button>
      </div>

      <div class="loginInfo">
        <!-- 登录信息列表 -->
        <el-table :data="loginInfoList" border style="width: 100%">
          <el-table-column prop="id" label="编号" width="80px"></el-table-column>
          <el-table-column prop="phoneNo" label="手机号" width="150px"></el-table-column>
          <el-table-column prop="deviceId" label="设备id" width="350px"></el-table-column>
          <el-table-column prop="ip" label="ip地址" width="120px"></el-table-column>
          <el-table-column label="登录结果" width="100px">
            <slot slot-scope="scope">
              <el-tag v-if="scope.row.isPass === 1" type="success">登录成功</el-tag>
              <el-tag v-else-if="scope.row.isPass === 0" type="danger">登录失败</el-tag>
            </slot>
          </el-table-column>
          <el-table-column prop="loginFailMsg" label="登录失败信息" width="150px"></el-table-column>
          <el-table-column prop="createdAt" label="登录时间"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="loginInfoQueryParam.pageNum" :page-size="loginInfoQueryParam.pageSize"
          layout="total, prev, pager, next" :total="totalNum"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { addWhiteList, getLoginInfoList } from '@/api/effect'
export default {
  data() {
    return {
      whiteListParam: {
        namespace: window.sessionStorage.getItem('env'),
        key: '',
        keyType: ''
      },
      loginInfoQueryParam: {
        namespace: window.sessionStorage.getItem('env'),
        pageNum: 1,
        pageSize: 10
      },
      loginInfoList: [],
      totalNum: '',
      whiteListType: [
        {
          label: '设备维度',
          value: 1
        },
        {
          label: '手机号维度',
          value: 0
        }
      ]
    }
  },
  methods: {
    // 添加登录白名单
    addToWhiteList() {
      if (this.whiteListParam.key === '') {
        return this.$message.error('设备或手机号不能为空！')
      }
      if (this.whiteListParam.keyType === '') {
        return this.$message.error('请选择白名单类型！')
      }
      addWhiteList(this.whiteListParam).then((resp) => {
        if (resp.data.data === true) {
          this.$message.success('白名单添加成功！')
        } else {
          this.$message.error('已存在白名单中！')
        }
      })
    },
    // 获取登录信息列表
    getLoginInfoList() {
      getLoginInfoList(this.loginInfoQueryParam).then((resp) => {
        this.loginInfoList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    handleSizeChange(newSize) {
      this.loginInfoQueryParam.pageSize = newSize
      this.getLoginInfoList()
    },
    handleCurrentChange(newPage) {
      this.loginInfoQueryParam.pageNum = newPage
      this.getLoginInfoList()
    }
  },
  created() {
    this.getLoginInfoList()
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 400px;
  margin-right: 20px;
}
.el-select {
  margin-right: 20px;
}
.el-table {
  margin-top: 20px;
}
</style>
