<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="datetime" placeholder="选择开始日期时间" default-time="00:00:00">
          </el-date-picker>
        </div>
        <div class="interfaceLog_head_time_end">
          <el-date-picker v-model="timeEnd" size="small" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00">
          </el-date-picker>
        </div>
      </div>
      <div class="interfaceLog_head_btn">
        <Search @getSearchData="getSearchData" :isTitle="false" @clearSearchData="clearSearchData" />
      </div>
    </div>
    <div class="interfaceLog_content flex-wrap">
      <el-table :data="tableData" class="table" border style="width: 100%">
        <el-table-column prop="action" label="动作">
        </el-table-column>
        <el-table-column prop="dataNumber" label="数据编号">
        </el-table-column>
        <el-table-column prop="sourceDataNumber" label="源数据编号">
        </el-table-column>
        <el-table-column prop="time" label="发生时间">
        </el-table-column>
        <el-table-column label="结果">
          <template slot-scope="scope">
            <span :class="scope.row.result ? 'success' : 'error'">{{scope.row.result ? '成功' : '出错'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="details" label="详情">
        </el-table-column>
      </el-table>
      <div class="interfaceLog_content_progress">
        <el-timeline>
          <el-timeline-item v-for="(item,index) in preDatas" :key="index">
            <div class="list">
              <div class="list_status"></div>
              <div class="list_title">{{item.title}}</div>
              <div class="list_code">{{item.code}}</div>
              <div class="list_time">{{item.time}}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/layout/components/Search";
export default {
  name: 'InterfaceLog',
  components: { Search },
  data () {
    return {
      timeStart: '',
      timeEnd: '',
      tableData: [],
      preDatas: []
    }
  },
  created () {
    for (let i = 0; i < 10; i++) {
      const element = {
        action: '采集',
        dataNumber: '000120220307201211011201',
        sourceDataNumber: 'BSM',
        time: '2022-03-07 20:00:12',
        result: i % 2 == 0 ? true : false,
        details: '数据格式不正确'
      };
      const obj = {
        title: '更新 Github 模板',
        code: '989665554',
        time: '2022-4-26 15:48:55',
        id: i
      };
      this.tableData.push(element)
      this.preDatas.push(obj)
    }
    this.preDatas.splice(5, 10)
  },
  mounted () {
    document.querySelector('.interfaceLog_head_time_start .el-input__prefix i').remove()
    // document.querySelector('.interfaceLog_head_time_start .el-input__prefix').innerHTML = '开始：'
    document.querySelector('.interfaceLog_head_time_end .el-input__prefix i').remove()
    // document.querySelector('.interfaceLog_head_time_end .el-input__prefix').innerHTML = '结束：'
  },
  methods: {
    getSearchData (val) {

    },
    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;
          }
        }
      }
    }
  }
}
</style>
