<template>
  <div class="right-list-toobar">
    <el-toolbar>
      <el-button @click="refresh"><i class="fa fa-refresh"></i>刷新</el-button>
      <el-col>当前报表：最近访问记录</el-col>
    </el-toolbar>
    <div>
      <el-table :data="lastVisit" resizable tooltip-effect="dark" ref="dataTable1" data-read-url="/ui/stats/lastvisit" :page-size="20">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="z-table-expand">
              <el-form-item label="操作系统：">
                <span>{{ props.row.OS }}</span>
              </el-form-item>
              <el-form-item label="浏览器：">
                <span>{{ props.row.browser }}</span>
              </el-form-item>
              <el-form-item label="屏幕分辨率：">
                <span>{{ props.row.screen }}</span>
              </el-form-item>
              <el-form-item label="语言：">
                <span>{{ props.row.language }}</span>
              </el-form-item>
              <el-form-item label="flash版本：">
                <span>{{ props.row.flashVersion }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="访问页面" min-width="20%" show-overflow-tooltip>
          <template slot-scope="scope">
             <a href="javascript:void(0);" @click="linkto(scope.row.URL)">{{scope.row.URL}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="referer" label="来源URL" min-width="20%" show-overflow-tooltip></el-table-column>
        <el-table-column prop="addTime" label="访问时间" min-width="12%" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastVisit: []
    }
  },
  methods: {
    refresh() {
      this.$refs.dataTable1.getData()
    },
    linkto(url) {
      window.open(url)
    }
  },
  created() {
  }
}

</script>

<style scoped>
  .page-wrap {
    margin-top: 20px;
    margin-right: 20px;
  }

  .page-wrap .page {
    float: right;
  }

  .z-table-expand {
    font-size: 0;
  }

  .z-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .z-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
