
<template>
  <div class="log">
    <div class="app-top">
      <div class="app-titel" style="margin-top: 5px">
        <div class="div-lab">
          <div class="label">登录时间：</div>
          <el-date-picker
            v-model="time"
            type="daterange"
            class="div-inp"
            range-separator="-"
            start-placeholder="开始日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
            @change="timeChange"
          >
          </el-date-picker>
        </div>

        <div class="div-lab">
          <el-input
            v-model="value"
            @change="valueChange"
            clearable
            placeholder="请输入"
            maxlength="15"
            style="width: 363px"
          >
            <el-select
              v-model="searchForm.flag"
              @change="selChange"
              slot="prepend"
              class="input-with-select"
              style="width: 115px"

              placeholder="请选择"
            >
              <el-option label="用户名称" value="1"></el-option>
              <!-- <el-option label="登陆手机" value="2"></el-option> -->
              <el-option label="登陆ip" value="3"></el-option>
            </el-select>
          </el-input>
        </div>
        <div class="div-lab">
             <div class="label">标题：</div>
              <el-input
            v-model="searchForm.title"
            placeholder="请输入"
            maxlength="15"
            style="width: 180px"
          > </el-input>
        </div>
        <!-- <div class="div-lab">
          <div class="label">设备状态</div>
          <el-select
            class="div-inp"
            multiple
            clearable
            collapse-tags
            v-model="searchForm.acceptanceStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in equipmentStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
      </div>
      <div class="app-titel" style="margin-top: 15px">
        <!-- <div class="label" style="color: #ffffff">筛选相关：</div> -->
        <div style="margin-left: 20px">
          <el-button type="primary" @click="screen"
            >筛选</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <el-button @click="reset">清空筛选条件</el-button>
        </div>
        <div style="margin-left: auto;margin-right:10px;" v-if="admin_log_downLoad">
          <el-button @click="downLoad">导出</el-button>
        </div>
      </div>
    </div>
    <basic-container>
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :permission="permissionList"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-del="handleDel"
      />
    </basic-container>
  </div>
</template>

<script>
import { delObj, fetchList1 } from "@/api/admin/log";
import { tableOption } from "@/const/crud/admin/log";
import { mapGetters } from "vuex";
import { exportMethodPost} from "@/util/util";

export default {
  name: "Log",
  data() {
    return {
      tableData: [],
      time: [],
      value: "",
      searchForm: {
        startDate: "",
        endDate: "",
        remoteAddr: "",
        flag: "1",
        name: "",
        params: "",
        title:''
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        delBtn: this.vaildData(this.permissions.sys_log_del, false),
      };
    },
  },
    created() {
    this.admin_log_downLoad = this.permissions["admin_log_downLoad"];
  },
  methods: {
          downLoad(){
        let obj=Object.assign(
          {
            descs: "create_time",
            orgType: localStorage.getItem("orgType"),
            orgCode: localStorage.getItem("orgCode"),
            agentId: localStorage.getItem("agentId"),
            houseId: localStorage.getItem("houseId"),
          },
          this.searchForm)
      // exportMethodPost()
      exportMethodPost('/admin/log/operateLogPageExport','操作日志',obj)
    },
    selChange(e) {
      this.value = "";
      this.searchForm.name = "";
      this.searchForm.params = "";
      this.searchForm.remoteAddr = "";
    },
    valueChange(e) {
      if (e) {
        if (this.searchForm.flag == 1) {
          // 用户名称
          this.searchForm.name = this.value;
          // this.value = "";
          this.searchForm.params = "";
          this.searchForm.remoteAddr = "";
        } else if (this.searchForm.flag == 2) {
          // 登陆手机
          this.searchForm.params = this.value;
          // this.value = "";
          this.searchForm.name = "";
          this.searchForm.remoteAddr = "";
        } else {
          // 登陆Ip
          this.searchForm.remoteAddr = this.value;
          // this.value = "";
          this.searchForm.params = "";
          this.searchForm.name = "";
        }
      }
    },
    screen() {
      this.getList(this.page);
    },
    reset() {
      this.searchForm = {
        startDate: "",
        endDate: "",
        flag: "1",
        remoteAddr: "",
        name: "",
        params: "",
        title:''
      };
      this.value = "";
      this.time=[]
      this.getList(this.page);
    },
    timeChange(e) {
      this.searchForm.startDate = e[0];
      this.searchForm.endDate = e[1];
    },
    getList(page, params) {
      this.tableLoading = true;
      fetchList1(
        Object.assign(
          {
            descs: "create_time",
            current: page.currentPage,
            size: page.pageSize,
            orgType: localStorage.getItem("orgType"),
            orgCode: localStorage.getItem("orgCode"),
            agentId: localStorage.getItem("agentId"),
            houseId: localStorage.getItem("houseId"),
          },
          params,
          this.searchForm
        )
      ).then((response) => {
        this.tableData = response.data.records;
        this.page.total = response.data.total;
        this.tableLoading = false;
      });
    },
    handleDel: function (row) {
      this.$confirm('是否确认删除ID为"' + row.id + '"的日志?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.id);
        })
        .then(() => {
          this.getList(this.page);
          this.$message.success("删除成功");
        });
    },
    searchChange(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    refreshChange() {
      this.getList(this.page);
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 32px;
      margin-left: 15px;
      // min-width: 100px;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
    }
    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 250px;
}
</style>
