<template>
  <div class="root_container">
    <div class="header">
      <div class="form_container">
        <el-form :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item label="查询条件">
            <el-input v-model="formData.mac" placeholder="请输入MAC" @change="onDoSearch"></el-input>

          </el-form-item>
          <!-- <el-form-item label="">
            <el-input
              @change="onDoSearch"
              v-model="formData.user_id"
              placeholder="请输入user_id"
            ></el-input>
          </el-form-item> -->
          <!-- <el-popover
            placement="bottom"
            width="400"
            trigger="click"
            v-model="popover_visiable"
          >
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane
                label="相对时间"
                name="first"
              >
                <div class="time_container">
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 1 }"
                    @click="selectTime(1,$event)"
                  >1分钟</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 2 }"
                    @click="selectTime(2,$event)"
                  >5分钟</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 3 }"
                    @click="selectTime(3,$event)"
                  >15分钟</span>
                  <span
                    :class="{ item_select_hover: this.formData.time_type == 4 }"
                    class="time_select"
                    @click="selectTime(4,$event)"
                  >1小时</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 5 }"
                    @click="selectTime(5,$event)"
                  >4小时</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 6 }"
                    @click="selectTime(6,$event)"
                  >1天</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 7 }"
                    @click="selectTime(7,$event)"
                  >今天</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 8 }"
                    @click="selectTime(8,$event)"
                  >一周</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 9 }"
                    @click="selectTime(9,$event)"
                  >本周</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 10 }"
                    @click="selectTime(10,$event)"
                  >30天</span>
                  <span
                    :class="{ item_select_hover: this.formData.time_type == 11 }"
                    class="time_select"
                    @click="selectTime(11,$event)"
                  >1月</span>
                  <span
                    class="time_select"
                    :class="{ item_select_hover: this.formData.time_type == 12 }"
                    @click="selectTime(12,$event)"
                  >本月</span>
                </div>
              </el-tab-pane>
              <el-tab-pane
                label="自定义"
                name="second"
              >
                <div style="display:flex;padding-top:20px;padding-bottom:10px">
                  <el-date-picker
                    v-model="aim_time"
                    style="flex:1"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                  >
                  </el-date-picker>
                  <el-button
                    style="margin-left:10px"
                    type="primary"
                    @click="onSelectAimTime"
                  >确定</el-button>
                </div>
              </el-tab-pane> 
            </el-tabs>
            <el-button slot="reference">{{formData.time_type_desc}} <i class="el-icon-caret-bottom el-icon--right"></i> </el-button>
          </el-popover>-->
          <el-form-item>
            <el-button style="margin-left:10px" type="primary" @click="onDoSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="pager">
        <!-- <span style="color:#999999;display:inline-block;padding-top:9px">共 {{ totalCount }} 条数据，每页 {{ pageSize }} 条</span>
        <div class="pager_item" style="display:inline-block">
          <el-pagination background :page-size="pageSize" @current-change="pageChange" layout="prev, pager, next"
            :total="totalCount" :current-page="currentPage">
          </el-pagination>
        </div> -->
      </div>
    </div>
    <div class="content_container">
      <template v-if="logList.length > 0">
        <div style="padding-left: 16px;padding-right: 16px;">
          <el-table :data="logList" :height="tableHeight" border style="width: 100%;">
            <el-table-column type="index" width="40">
            </el-table-column>
            <el-table-column prop="mac" label="MAC地址" width="120">
            </el-table-column>
            <el-table-column prop="filename" label="文件名">
            </el-table-column>
            <el-table-column prop="size" label="日志大小" width="100">
            </el-table-column>
            <el-table-column prop="time" width="180" label="上传时间">
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <div>
                  <el-button type="primary" size="small" plain @click="onDetails(scope.row.id)">查看日志</el-button>
                  <el-link target="_blank" :href="scope.row.url" :underline="false"
                    style="margin-left: 15px;">
                    <el-button  type="primary" size="small">下载日志文件</el-button>
                  </el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-else>
        <p style="color:#999999;display:block;padding-top:20%;width:100%;text-align:center">没有更多数据，请修改筛选条件</p>
      </template>
    </div>
  </div>
</template>
<script>
import { formatTimeToStr } from "./../../utils/date";
import { getLogList } from "./../../api/log/log";
import { Message } from "element-ui";
export default {
  data() {
    return {
      logList: [],

      //选择的具体时间
      aim_time: [],

      //记录时间弹窗是否显示
      popover_visiable: false,

      formData: {
        mac: "",
        user_id: "",
        time_type: 6,
        time_type_desc: "1天",
      },

      //记录高度
      tableHeight: "0px",

      activeName: "first",

      //分页数据
      totalCount: 0,
      currentPage: 1,
      pageSize: 50,
    };
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 150 + "px";

    if (this.$route.query.mac) {
      this.formData.mac = this.$route.query.mac;
    }

    //获取数据
    this.onObtainList();
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 150 + 18 + "px";
    },
  },
  methods: {
    //获取列表数据
    onObtainList() {
      this.logList = [];
      // logType, userId, timeString, timeType
      var timeString = "";
      if (this.formData.time_type == 0) {
        timeString =
          this.aim_time[0].getTime() / 1000 +
          " " +
          this.aim_time[1].getTime() / 1000;
      }
      getLogList(
        this.formData.mac,
      )
        .then((result) => {
          this.logList = result.data.data;
          this.totalCount = result.data.data.total;
          this.currentPage = result.data.data.currentPage;
        })
        .catch((err) => { });
    },
    //选择时间
    selectTime(timeType, e) {
      this.popover_visiable = false;
      this.formData.time_type = timeType;
      this.formData.time_type_desc = e.target.innerHTML;

      this.currentPage = 1;
      //拉取数据
      this.onObtainList();
    },
    onDetails(id) {
      this.$router.push({ path: "/logcat/info?id=" + id });
    },
    //选择了具体时间
    onSelectAimTime() {
      this.popover_visiable = false;
      this.formData.time_type = 0;
      this.formData.time_type_desc =
        formatTimeToStr(this.aim_time[0], "yyyy-MM-dd hh:mm:ss") +
        "~" +
        formatTimeToStr(this.aim_time[1], "yyyy-MM-dd hh:mm:ss");

      this.currentPage = 1;
      //拉取数据
      this.onObtainList();
    },
    //点击查询
    onDoSearch() {
      this.currentPage = 1;
      //拉取数据
      this.onObtainList();
    },
    //页面发生变化
    pageChange(page) {
      this.currentPage = page;

      this.onObtainList();
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}

.content_container {}

.content_container ul,
.content_container li,
.content_container p {
  padding: 0;
  margin: 0;
  list-style: none;
}

.item_time {
  margin-top: 4px;
  margin-left: 18px;
  padding-right: 5px;
  font-weight: 700;
  display: inline-block;
  color: #333;
  font-size: 12px;
  white-space: nowrap;
}

.header {
  padding-top: 18px;
  padding-left: 18px;
}

.item_index {
  display: inline-block;
  color: #333;
  height: 17px;
  font-size: 12px;
  margin-right: 5px;
  background-color: rgba(0, 86, 144, 0.1);
  border-radius: 2px;
  padding: 1px 3px !important;
  margin: 2px 0;
}

.log_list {
  overflow: auto;
}

.log_list .log_item {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.log_container {
  color: #666666;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  font-weight: 700;
}

.item_content {
  flex: 1;
}

.item_content .item_content_item {
  display: flex;
  width: 100%;
}

.item_msg {
  margin: 2px 0;
  padding: 1px 3px !important;
  display: inline-block;
  margin-left: 5px;
  flex: 1;
  margin-right: 10px;
  width: 1px;
  word-wrap: break-word;
}

.time_container {
  display: flex;
  padding-top: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.time_container .time_select {
  display: inline-block;
  flex: 25%;
  width: 100%;
  padding: 8px 0;
  cursor: pointer;
  color: #373d41;
  font-size: 12px;
  text-align: center;
}

.time_container .time_select:hover {
  background-color: #e5f2fb;
  color: #0070cc;
}

.item_select_hover {
  background-color: #e5f2fb;
  color: #0070cc;
}

.pager {
  position: absolute;
  top: 26px;
  right: 18px;
  display: flex;
}
</style>