<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">
      <div style="padding: 15px; background: #fff; margin-top: -15px">
        <el-row gutter="24" :gutter="24" type="flex" style="flex-wrap: wrap;margin-left: -5px;">
          <el-input style="width: 220px;margin-left: 10px;" placeholder="请输入登陆地址" v-model="queryParams.ipaddr"></el-input>
          <el-input style="width: 220px;" placeholder="请输入用户名称" v-model="queryParams.userName"></el-input>
          <el-select clearable placeholder="请选择状态" v-model="queryParams.status" style="width: 220px;">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-row gutter="24" justify="end" type="flex" style="margin-top: 5px;margin-right:20px">
            <div class="search-btn" v-if="searchShow" :span="6" justify="end" style="display: flex; margin-top: 2px"
              type="flex">
              <div class="search_btn" style="margin-left: 10px;position: relative;top: -5px;" @click="handleQuery">
                查询
              </div>
              <div class="reset_btn" style="margin-left: 10px;position: relative;top: -5px;" @click="reset">
                重置
              </div>
              <el-button v-if="searchShow == false" type="text" icon="el-icon-arrow-up"
                style="color: #2766dd !important; margin-left: 10px" @click="searchShow = true">收起</el-button>
              <el-button v-if="searchShow == true" type="text"
                style="color: #2766dd; margin-left: 10px;position: relative;top: -5px;" icon="el-icon-arrow-down"
                @click="searchShow = false">展开</el-button>
            </div>
          </el-row>
        </el-row>
        <el-row :gutter="24" type="flex" style="flex-wrap: wrap;margin-left: -5px;">
          <el-col :span="6" v-if="searchShow == false">
            <el-date-picker style="width: 458px;position: relative;top: 8px;left: -2px; " v-model="dateRange"
              end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" clearable
              value-format="yyyy-MM-dd HH:mm:ss" type="daterange" :clearable="true">
            </el-date-picker>
          </el-col>
          <el-col :span="7" />
          <el-col v-if="searchShow == false" :span="6" justify="end" type="flex" style="display: flex">
            <div class="search_btn" style="margin-left: 20px;position: relative;top: 8px;" @click="handleQuery">
              查询
            </div>
            <div class="reset_btn" style="margin-left: 10px;position: relative;top: 8px;" @click="reset">
              重置
            </div>
            <el-button v-if="searchShow == false" type="text" icon="el-icon-arrow-up"
              style="color: #2766dd !important; margin-left: 10px;" @click="searchShow = true">收起</el-button>
            <el-button v-if="searchShow == true" type="text" style="color: #2766dd; margin-left: 10px"
              icon="el-icon-arrow-down" @click="searchShow = false">展开</el-button>
          </el-col>
        </el-row>       
      </div>
    </div> -->


    <div class="dashboard-text">
      <div style="margin-top:-15px;background:#fff;padding:15px">
        <el-row :gutter="24" style="display:flex">
          <el-input style="width: 220px;margin-left: 10px;" placeholder="请输入登陆地址" v-model="queryParams.ipaddr"></el-input>
          <el-input style="width: 220px;" placeholder="请输入用户名称" v-model="queryParams.userName"></el-input>
          <el-select clearable placeholder="请选择状态" v-model="queryParams.status" style="width: 220px;">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <div v-if="searchShow == true" :span="6" style="display:flex;margin-top:2px">
            <!-- <div class="search-btn"> -->
            <div class="searchBtn" style="margin-left:0px" @click="handleQuery">搜索</div>
            <div class="resetBtn" style="margin-left:10px" @click="reset">重置</div>
            <el-button v-if="searchShow == false" type="text" style="color: #2766dd !important;margin-left:10px"
              icon="el-icon-arrow-up" @click="searchShow = true">收起</el-button>
            <el-button v-if="searchShow == true" type="text" style="color:#2766DD;margin-left:10px"
              icon="el-icon-arrow-down" @click="searchShow = false">展开</el-button>
            <!-- </div> -->
          </div>
        </el-row>
        <el-row :gutter="24" style="display:flex">
          <div v-if="searchShow == false" :span="6">
            <el-date-picker style="width: 458px;position: relative;top: 8px;left: 10px; " v-model="dateRange"
              end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" clearable
              value-format="yyyy-MM-dd HH:mm:ss" type="daterange" :clearable="true">
            </el-date-picker>
          </div>
          <el-col style="width:260px"></el-col>
          <div v-if="searchShow == false" :span="6">
            <div class="search-btn" style="display: flex;">              
              <div class="searchBtn" style="margin-top: 10px;margin-left: 15px;" @click="handleQuery">搜索</div>
              <div class="resetBtn" style="margin-left:10px;margin-top: 10px;" @click="reset">重置</div>
              <el-button v-if="searchShow == false" type="text" icon="el-icon-arrow-up"
                style="color: #2766dd !important;margin-left:10px;margin-top: 10px;"
                @click="searchShow = true">收起</el-button>
              <el-button v-if="searchShow == true" type="text" icon="el-icon-arrow-down"
                @click="searchShow = false">展开</el-button>
            </div>
          </div>
        </el-row>
      </div>
    </div>

    <div style="padding: 20px; background: #fff; margin-top: 15px">
      <div class="cardHeadr">
        <div style="font-size: 18px; float: left;">
          <div style="float: left;margin-right: 20px;" class="addBtn" @click="addDepartMenDict">
            <span class="icon font_family">&#xe607;</span>
            批量删除
          </div>
          <!-- <div style="float: left;" class="addBtn" @click="uploadOut">
            <span class="icon font_family">&#xe605;</span>
            导出
          </div> -->
        </div>
      </div>



      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="infoId" label="访问编号" align="center" width="150" />
        <el-table-column prop="userName" label="用户名称" align="center" width="210" />
        <el-table-column prop="ipaddr" label="登录地址" align="center" width="210" />
        <el-table-column prop="loginLocation" label="登陆地点" align="center" width="150" />
        <el-table-column prop="msg" label="操作信息" align="center" />
        <el-table-column prop="status" label="登录状态" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? '成功' : '失败' }}
          </template>
        </el-table-column>
        <el-table-column prop="loginTime" label="登录日期" align="center" width="210" />
        <!-- <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="operateBtn">
                <div>详细</div>
              </div>
            </template>
          </el-table-column> -->
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px">
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]"
            :page-size="searchData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-row>

    </div>


  </div>
</template>

<script>
import { getLogList, getDeleteList, getloafOut } from '@/api/loginLog'
import { mapGetters } from 'vuex'

export default {
  name: 'home',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      searchShow: true,
      value1: '',
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        ipaddr: '',
        userName: '',
        status: ''
      },
      form: {
        dicrName: '',
        dictType: '',
        status: '',
        remark: ''
      },
      statusOptions: [
        {
          label: '成功',
          value: '1'
        },
        {
          label: '失败',
          value: '2'
        }
      ],
      searchData: {},
      tableData: [],
      dateRange: [],
      ids: [],
      total: 0,
      title: '新增部门字典',
      dialogFormVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    reset() {
      this.queryParams = {}
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    addDepartMenDict() {
      if (this.ids.length == 0) {
        return this.$message({
          type: 'error',
          message: '请选择要删除的日志!'
        });
      }
      this.$confirm('确定要删除吗?', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          getDeleteList(this.ids).then((res) => {
            if (res.code == 200) {
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.infoId)
    },
    uploadOut() {
      getloafOut({}).then(res => {
        this.exportFile(res, '登录日志信息')
      })
    },
    exportFile: function (obj, name = Date.now(), suffix = 'xlsx') {
      const url = window.URL.createObjectURL(
        new Blob([obj], { type: 'application/vnd.ms-excel' })
      )
      const aDOM = document.createElement('a')
      aDOM.style.display = 'none'
      aDOM.href = url
      const fileName = name + '.' + suffix
      aDOM.setAttribute('download', fileName)
      document.body.appendChild(aDOM)
      aDOM.click()
      document.body.removeChild(aDOM)
    },
    getList() {
      if (this.dateRange) {
        this.queryParams.satrtTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      } else {
        this.queryParams.satrtTime = ''
        this.queryParams.endTime = ''
      }
      getLogList(this.queryParams).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 45px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-text {
  .el-input {
    margin-right: 20px;
  }

  .el-select {
    margin-right: 20px;
  }
}

.cardHeadr {
  margin-top: -20px;
  // display: flex;
  // justify-content: space-between;
}

.search_btn {
  cursor: pointer;
  background-color: #2766dd;
  color: #f7f8fb;
  font-size: 14px;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.search_btna {
  cursor: pointer;
  background-color: #2766dd !important;
  color: #f7f8fb;
  font-size: 14px;
  width: 80px;
  height: 40px;
  text-align: center;
}

.search_btna,
.search_btn:hover {
  background-color: #4d85f4;
}

.reset_btn {
  cursor: pointer;
  color: #565656;
  font-size: 14px;
  border: 1px solid #d7d7d7;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.reset_btn:hover {
  color: #1f9fff;
  border: 1px solid #1f9fff;
  background: none;
}

.addBtn {
  margin: 15px 20px 15px 0;
  cursor: pointer;
  float: left;
  text-align: center;
  width: 98px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid #ABC7FD;
  line-height: 34px;
  font-weight: 400;
  font-size: 14px;
  color: #2250C8;
  background-color: #E7EEFF;
}

.addBtn:hover {
  color: #FFFFFF;
  background-color: #2250C8;
  border: 1px solid #2250C8;
}

.addBtn:active {
  color: #FFFFFF;
  background-color: #194DA4;
  border: 1px solid #194DA4;
}

.operateBtn {
  display: flex;
  justify-content: center;
  color: #2866dd;

  div {
    font-size: 14px;
    margin: 0 5px;
    cursor: pointer;
  }
}

.el-tooltip__popper {
  max-width: 30%;
  padding-bottom: 5px !important;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
}

.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}

.xzmba {
  color: #2766dd;
  text-decoration: underline;
  cursor: pointer;
}

.hxj {
  width: 100%;
  text-align: center;
  padding: 0 !important;
}

::v-deep .el-dialog__header {
  padding: 0 20px 10px !important;
}

::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .el-upload__tip {
  margin-top: -17px;
}

::v-deep .el-upload-dragger .el-upload__text {
  margin-top: -10px;
}

.dialog-footer {
  text-align: center;
}

.detailDia {
  div {
    padding-left: 100px;
  }
}

::v-deep .el-input__inner,
.el-input--suffix .el-input__inner {
  padding-right: 0 !important;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #606266;
}

::v-deep .el-textarea .el-input__count {
  bottom: -40px;
}

::v-deep .el-input__icon {
  // line-height: 47px;
}
// ::v-deep .el-icon-date{
//   position: relative;
//   top: -7px;
// }
.searchBtn {
  cursor: pointer;
  background-color: #2766dd;
  color: #f7f8fb;
  font-size: 14px;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.searchBtn:hover {
  background-color: #4d85f4;
}

.resetBtn {
  cursor: pointer;
  color: #565656;
  font-size: 14px;
  border: 1px solid #d7d7d7;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.resetBtn:hover {
  color: #1f9fff;
  border: 1px solid #1f9fff;
  background: none;
}
</style>
