<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 ref="dataTable1" resizable tooltip-effect="dark" style="width: 100%" data-read-url="/ui/stats/adslasthitreport" :page-size="10">
        <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>
          </template>
        </el-table-column>
        <el-table-column prop="ADID" label="广告ID" min-width="20%"></el-table-column>
        <el-table-column prop="IP" label="IP" min-width="25%"></el-table-column>
        <el-table-column prop="addTime" label="访问时间" min-width="30%"></el-table-column>
        <el-table-column label="来源URL">
           <template slot-scope="scope">
            <a href="javascript:void(0);" @click="linkto(scope.row.URL)">{{scope.row.URL}}</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

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

</script>

<style scoped>
  .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>
