<template>
  <div class="interfaceLog">
    <div class="interfaceLog_head flex">
      <div class="interfaceLog_head_time flex-wrap">
        <!-- <div class="interfaceLog_head_time_start mr10">
          <el-date-picker v-model="timeStart" size="small" type="date" placeholder="选择开始日期">
          </el-date-picker>
        </div>
        <div class="interfaceLog_head_time_end">
          <el-date-picker v-model="timeEnd" size="small" type="date" placeholder="选择结束日期">
          </el-date-picker>
        </div> -->
        <el-date-picker v-model="date" size="small" type="daterange" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange">
        </el-date-picker>
      </div>
      <div class="interfaceLog_head_btn">
        <Search @getSearchData="getSearchData" :isTitle="false" @clearSearchData="clearSearchData" />
      </div>
    </div>
    <div class="interfaceLog_content flex-wrap">
      <el-table v-el-table-infinite-scroll="load" :data="tableData" class="table" border style="width: 100%" @row-click="rowClick" :height="720">
        <el-table-column prop="logType" label="日志类型" width="100px">
        </el-table-column>
        <el-table-column prop="logObject" label="日志对象"> </el-table-column>
        <el-table-column prop="logTime" label="日志时间"> </el-table-column>
        <!-- <el-table-column prop="time" label="发生时间">
        </el-table-column> -->
        <el-table-column prop="logPositionID" label="发生位置" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="日志结果" width="100px">
          <template slot-scope="scope">
            <span :class="scope.row.resultCode == '成功' ? 'success' : 'error'">{{ scope.row.resultCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="resultDetails" label="日志详情" :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <div class="interfaceLog_content_progress">
        <el-timeline v-if="preDatas != []">
          <el-timeline-item v-for="(item, index) in preDatas" :key="index">
            <div class="list">
              <div class="list_status"></div>
              <div class="list_title">{{ item.logType }}</div>
              <div class="list_code" :class="item.resultCode == '成功' ? 'success' : 'error'">
                {{ item.resultCode }}
              </div>
              <div class="list_time">{{ item.logTime }}</div>
              <div class="list_detial">{{ item.resultDetails }}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/layout/components/Search";
import { Query } from "@/api/dataIntegration";
export default {
  name: "InterfaceLog",
  components: { Search },
  data () {
    return {
      timeStart: "",
      timeEnd: "",
      tableData: [],
      preDatas: [],
      date: "",
      keyWords: null,
      preDatas: [],
      page: 0,
      noMore: false
    };
  },
  created () {
    this.getNowTime();
  },
  methods: {
    load () {
      // console.log("分页");
      if (this.noMore) {
        return;
      }
      this.getQuery();
    },
    resetTable () {
      this.page = 0;
      this.noMore = false;
      this.tableData = [];
    },
    rowClick (row, column, event) {
      this.preDatas = [];
      if (row.logObject) {
        this.tableData.forEach((item) => {
          if (item.logObject == row.logObject) {
            this.preDatas.push(item);
          }
        });
      } else {
        this.preDatas.push(row);
      }
    },
    dateChange () {
      if (this.date != null) {
        this.resetTable();
        this.getQuery();
      }
    },
    getNowTime () {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = now.getHours(); //得到时
      var min = now.getMinutes(); //得到分
      var second = now.getSeconds(); //得到秒
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      this.date = [defaultDate, defaultDate];
      this.timeEnd = defaultDate;
      this.getQuery();
    },
    //获取表格数据
    async getQuery () {
      try {
        this.loading = true;
        const { code, returnData } = await Query({
          id: DATACONTENT_ID.sysLogTabId,
          needPage: ++this.page,
          dataContent: [this.date[0] + " 00:00:00", this.date[1] + " 23:59:59"],
        });
        if (code == 0) {
          if (returnData.listValues.length === 0) {
            this.page--;
            this.noMore = true;
            return;
          }
          // this.tableData = returnData.listValues;
          this.tableData.push(...returnData.listValues);
          console.log(returnData);
        } else {
          this.page--
          this.loading = false;
          this.$message.error("获取数据失败");
        }
      } catch (error) {
        this.page--
        this.loading = false;
        console.log(error);
      }
    },
    getSearchData (val) {
      console.log(val);
      this.keyWords = val;
      this.getQuery();
    },
    clearSearchData () { },
  },
};
</script>

<style lang="scss" scoped>
.interfaceLog {
  padding: 8px 32px 12px 8px;
  .mr10 {
    margin-right: 10px;
  }
  ::v-deep .interfaceLog_head_time {
    .el-input__prefix {
      left: 10px;
      color: #101116;
      top: 10px;
    }
    .el-input--prefix .el-input__inner {
      padding-left: 50px;
    }
  }
  .interfaceLog_head_btn {
    ::v-deep .btn {
      margin-right: 0;
    }
  }
  .interfaceLog_content {
    margin-top: 8px;
    ::v-deep .table {
      color: #101116;
      thead {
        color: #101116;
      }
      .success {
        color: #33bf47;
      }
      .error {
        color: #df4545;
      }
    }
    &_progress {
      width: 368px;
      background: #fafcff;
      margin-left: 8px;
      padding: 13px 32px;
      overflow: hidden;
      ::v-deep .el-timeline {
        padding: 0;
        .el-timeline-item {
          position: relative;
          &::after {
            position: absolute;
            content: "";
            height: 1px;
            width: calc(100% + 4px);
            background-color: #dfe3ea;
            left: 28px;
            bottom: 20px;
          }
          &:last-child {
            &::after {
              height: 0;
            }
          }
        }
        .el-timeline-item__node--normal {
          z-index: 2;
          background-color: #fff;
          width: 10px;
          height: 10px;
          left: 0px;
          top: 2px;
        }
        .el-timeline-item__tail {
          border-left: 4px solid #dfe3ea;
          left: 3px;
        }
        .el-timeline-item:last-child .el-timeline-item__tail {
          height: 1000%;
          display: block;
        }
        .list {
          &_status {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #2d67e3;
            left: -5px;
            border-radius: 50%;
            z-index: 1;
          }
          &_title,
          &_code {
            margin-bottom: 7px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #101116;
          }
          &_time {
            font-size: 12px;
            font-family: Helvetica;
            font-weight: 400;
            color: #afb4bf;
          }
          &_detial {
            font-family: Helvetica;
            word-wrap: break-word;
          }
          .success {
            color: #33bf47;
          }
          .error {
            color: #df4545;
          }
        }
      }
    }
  }
}
</style>
