<template>
  <div>
    <Panel title="时间轴查询">
      <template slot="buttons">
        <el-button @click='query(true)' class="blue" icon="el-icon-fa-search" v-loading='pageTable.isLoading'>查询</el-button>
      </template>

      <el-form label-position="top">
        <el-row :gutter="10">
          <el-col :lg='12' :sm='24'>
            <el-form-item label="时间范围">
              <el-date-picker v-model="pageTable.param.timeRange" type="daterange" unlink-panels range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Panel>

    <Panel title="时间轴操作列表" v-loading='pageTable.isLoading'>
      <div v-if="!data || data.length === 0">
        <p style="text-align: center; margin: 0 auto;color: #909399; font-size: 14px;">暂无数据</p>
      </div>
      <div style="height: 400px; overflow-y: auto;">
        <el-steps direction="vertical" :active="999" align-center style="height: auto;">
          <el-step v-for="(item, index) in data" :key='index' icon="el-icon-location">
            <template slot='title'>
              <span>{{simpleFormatterDate(item.optime)}}</span>
              <span class='margin-left-4'>
                            <el-tag :type="formatLogType(item.logtype)">{{formatLogContent(item.logtype)}}</el-tag>
                        </span>
            </template>
            <template slot='description'>
                        <span v-if='checkFmtDuration(index)'>
                            <el-tag type="info">在线时长:{{fmtDuration(index)}} 分钟</el-tag>
                            <el-tag class='margin-left-2' type="info" title="查看详情" style='cursor: pointer;'>
                                <i @click="showLoginHis(item)" class="el-icon-more"/>
                            </el-tag>
                        </span>
            </template>
          </el-step>
        </el-steps>

        <div style="height: 10px; margin: 0 auto; text-align: center;" v-if="haveMore">
          <el-link type="primary" @click="handlerViewMore">查看更多...</el-link>
        </div>
      </div>
    </Panel>
    <div class="timeline" :style="'max-height:'+height">

    </div>
  </div>
</template>

<script>
  import PageTable from "@/libs/PageTable";
  import UserAPI from "@/api/base/usrm/UserAPI";

  export default {
    props: {
      userUuid: {
        type: String,
        default: ""
      },
      height: {
        type: String,
        default: "400px"
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.data = [];
        this.query();
      });
    },
    data() {
      return {
        data: [],
        loading: false,
        haveMore: false,
        pageTable: new PageTable({
          doLoad: UserAPI.getTimeLine,
          param: {uuid: this.userUuid}
        })
      };
    },
    methods: {
      async query(clean = false) {
        await this.pageTable.handleLoad();
        if (clean) {
          this.data = this.pageTable.data;
        } else {
          this.data.push(...this.pageTable.data);
        }
        this.haveMore = this.pageTable.curr * this.pageTable.size < this.pageTable.total;
      },
      checkFmtDuration(index) {
        if (this.data.length - 1 === index) {
          return false;
        }
        return !(this.data[index].logtype === "1" || this.data[index + 1].logtype !== "1");
      },
      fmtDuration(index) {
        let mss = this.data[index].optime - this.data[index + 1].optime;
        return (mss / 1000 / 60).toFixed(0);
      },
      formatLogType(logType) {
        if (logType === "1" || logType === "2") {
          return "success";
        } else if (logType === "3") {
          return "warning";
        } else {
          return "error";
        }
      },
      formatLogContent(logType) {
        if (logType === "1") {
          return "登入";
        } else if (logType === "2") {
          return "登出";
        } else if (logType === "3") {
          return "超时退出";
        } else if (logType === "4") {
          return "踢出";
        } else {
          return "未知";
        }
      },
      async showLoginHis(item) {
        await this.confirm(null, '是否跳转至服务日志页面?');
        this.$emit("closeDia");
        await this.removeView("服务日志");
        await this.addView("服务日志", "/logs/LogsServ", {sesId: item.sesid});
      },
      async handlerViewMore() {
        this.pageTable.curr = this.pageTable.curr + 1;
        await this.query();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .timeline {
    overflow: auto;
    padding: 20px 20px 0 20px;
  }
</style>