<template>
  <div id="RealTime">
    <div class="formBox">
      <el-input v-model="username" placeholder="请输入账号"></el-input>
      <el-select v-model="TypeNo" filterable placeholder="请选择">
        <el-option
          v-for="item in SiteOptions"
          :key="item.index"
          :label="item.name"
          :value="item.platformCode"
        ></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <!--<span id="search" @click="search" v-if="power == 'admin'">
				删除
      </span>-->
    </div>
    <div class="tableBox">
      <table>
        <tr class="thead">
          <th>账号</th>
          <th>IP</th>
          <th>时间</th>
          <th>操作描述</th>
        </tr>
        <tr class="tbody" v-for="(item,index) in list" :key="index">
          <td>{{item.userNo}}</td>
          <td>{{item.logIp}}</td>
          <td>{{item.createTime}}</td>
          <td>{{item.logRemark}}</td>
        </tr>
      </table>
    </div>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "RealTime",
  data: function() {
    return {
      // power: localStorage.getItem("userName"),
      username: "",
      list: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      TypeNo: "0",
      SiteOptions: [
        {
          name: "全部",
          platformCode: "0"
        },
        {
          name: "开设备",
          platformCode: "5"
        },
        {
          name: "关设备",
          platformCode: "6"
        },
        {
          name: "开水泵",
          platformCode: "7"
        },
        {
          name: "关水泵",
          platformCode: "8"
        },
        {
          name: "开阀门",
          platformCode: "9"
        },
        {
          name: "关阀门",
          platformCode: "10"
        }
      ] //渲染下拉框的数据
    };
  },
  methods: {
    getData() {
      let url = this.nozzle.syslogGetLogList;
      let params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage,
        condition: this.username,  
        type: this.TypeNo
      };
      this.$http.post(url, params).then(res => {
        this.list = res.data.data;
        this.total = res.data.total;
      });
    },
    search() {
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    }
  },
  mounted: function() {
    this.getData();
  }
};
</script>

<style scoped>
#RealTime {
  width: 100%;
  height: 100%;
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
  position: relative;
}

.formBox {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
}

.formBox .el-input {
  width: 200px;
  margin: 0 10px;
}
.tableBox {
  height: calc(100% - 80px);
  /*border: #17F6C3 1px solid;*/
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.thead {
  color: white;
  font-size: 15px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
}

.tbody {
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid #0d2027;
}
.footer {
  position: fixed;
  left: 20;
  right: 20;
  bottom: 0;
  height: 35px;
}
</style>