<template>
<div>
  <el-dialog
    title="日志列表"
    :close-on-click-modal="false"
    v-if="visible"
    :visible.sync="visible"
    width="75%">
    <el-table
      :data="dataList"
      border
      v-loading="logDataListLoading"
      height="460"
      style="width: 100%;margin-top: -30px;">
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="日志ID">
      </el-table-column>
      <el-table-column
        prop="appId"
        header-align="center"
        align="center"
        label="AppID">
        <template slot-scope="scope">
<!--          style="color:blue;cursor:pointer"-->
          <div @click="detailData(scope.row.appUri)" >{{ scope.row.appId }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="timestamp"
        header-align="center"
        align="center"
        label="执行时间"
      >
        <template slot-scope="scope">
          {{scope.row.timestamp | timeFormater}}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="状态">
        <template slot-scope="scope">

          <el-tag v-if="scope.row.state === 'STARTING'" size="small">排队中</el-tag>
          <el-tag v-else-if="scope.row.state === 'FINDING'" size="small">启动中</el-tag>
          <el-tag v-else-if="scope.row.state === 'RUNNING'" size="small">进行中</el-tag>
          <el-tag v-else-if="scope.row.state === 'SUCCESS'" size="small">已完成</el-tag>
          <el-tag v-else  size="small" type="danger" style="cursor: pointer;">失败</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="sizes, prev, pager, next">
    </el-pagination>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: 'jobLog',
  data () {
    return {
      visible: true,
      dataForm: {
        id: ''
      },
      info: null,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      logDataListLoading: false
    }
  },
  filters: {
    timeFormater (value) {
      // console.log('@', value)
      var date = new Date(value)
      let years = date.getFullYear()
      let month = (date.getMonth() + 1) > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
      let day = (date.getDate() >= 10) ? date.getDate() : '0' + date.getDate()
      let hours = (date.getHours() >= 10) ? date.getHours() : '0' + date.getHours()
      let minutes = (date.getMinutes() >= 10) ? date.getMinutes() : '0' + date.getMinutes()
      let seconds = (date.getSeconds() >= 10) ? date.getSeconds() : '0' + date.getSeconds()
      if (value) {
        return years + '-' + month + '-' + day +
          ' ' + hours + ':' + minutes + ':' + seconds
      } else {
        return 'N/A'
      }
    }
  },
  methods: {
    init (info) {
      this.visible = true
      this.info = info
      this.dataList = []
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      // console.log(info.id)
      this.getJobLog()
    },
    getJobLog () {
      // console.log(id)
      this.dataList = []
      this.logDataListLoading = true
      this.$http({
        url: this.$http.snoopUrl('/v1/jobs/instances'),
        methods: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex - 1,
          'size': this.pageSize + 1,
          'jobId': this.info.id
        })
      }).then((data) => {
        if (data && data.status === 200) {
          // console.log(data.data)
          this.dataList = data.data
        }
        this.$nextTick(() => {
          this.haveNextPage()
        })
        this.logDataListLoading = false
      })
      // this.dataList = [
      //   {
      //     'id': 1727,
      //     'sessionId': 719,
      //     'state': 'STARTING',
      //     'type': 'BATCH',
      //     'appId': 'application_1642725586357_0719',
      //     'appUri': 'http://griffin:8088 /cluster/app/ application_1642725586357_0719',
      //     'predicateGroup': 'PG',
      //     'predicateName': 'demo1_job_predicate_1642734240026',
      //     'timestamp': 1642734240026,
      //     'expireTimestamp': 1643339040026
      //   },
      //   {
      //     'id': 1721,
      //     'sessionId': 713,
      //     'state': 'STARTING',
      //     'type': 'BATCH',
      //     'appId': 'application_1642725586357_0714',
      //     'appUri': 'http://griffin:8088 /cluster/app/ application_1642725586357_0714',
      //     'predicateGroup': 'PG',
      //     'predicateName': 'demo1_job_predicate_1642734180011',
      //     'timestamp': 1642734180012,
      //     'expireTimestamp': 1643338980012
      //   }]
    },
    detailData (url) {
      let newuRL = url.replace(/hadoop112/g, 'hadoop113')
      window.open(newuRL, '_blank')
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getJobLog()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getJobLog()
    },
    haveNextPage () {
      if (this.dataList.length > this.pageSize) {
        this.totalPage = (this.pageIndex - 1) * this.pageSize + this.dataList.length
        this.dataList.pop()
      }
    }

  }
}
</script>

<style scoped>

</style>
