<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-checkbox v-model="isAuto" @change="autoChangeHandler">自动刷新</el-checkbox>
    </el-toolbar>
    <div>
      <el-list-view ref="dataTable1" data-read-url="/ui/contentlogs/publishTaskLogs" :pageSize="10">
        <template slot-scope="item">
          <div class="panel-card">
            <div class="card-header">
              <el-row>
                <el-col :span="24">
                  <span class="f12"><i class="fa fa-clock-o"></i>{{item.addTime | fixDateTime}}</span>
                </el-col>
              </el-row>
            </div>
            <div class="card-content">
              <el-row>
                <el-col :span="8">
                  <span>ID：<em>{{item.ID}}</em></span>
                </el-col>
                <el-col :span="8">
                  <span>subID：<em>{{item.subID}}</em></span>
                </el-col>
                <el-col :span="8">
                  <span>消息：<em>{{item.message}}</em></span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span>百分比：<em>{{item.percent}}%</em></span>
                </el-col>
                <el-col :span="8">
                  <span>服务器IP：<em>{{item.serverAddress}}</em></span>
                </el-col>
                <el-col :span="8">
                  <span>发布任务状态：<em>{{item.statusName}}</em></span>
                </el-col>
              </el-row>
              <el-row>
                <span>栏目列表：<em>{{item.catalog}}</em></span>
              </el-row>
            </div>
          </div>
        </template>
      </el-list-view>
    </div>

  </div>
</template>

<style scoped>

</style>

<script>
import util from '@src/common/util.js'
export default {
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      publishTaskLog: {
        tableLog: []
      },
      isAuto: true,
      intervalId: 0
    }
  },

  created() {
    this.autoChangeHandler()
  },

  destroyed() {
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }
  },

  methods: {
    refresh() {
      this.$refs.dataTable1.getData(1)
    },

    autoChangeHandler() {
      if (this.isAuto) {
        this.intervalId = setInterval(() => {
          this.refresh()
        }, 2000)
      } else {
        if (this.intervalId) {
          clearInterval(this.intervalId)
        }
      }
    }
  }
}
</script>

<style scoped>
  .panel-card {
    padding: 0px;
    margin: 10px auto 20px;
  }

  .panel-card .card-header{
    background-color: #fafafa;
    padding: 10px 15px;
  }

  .card-content{
    padding: 10px 15px;
  }
</style>
