@extends('layouts.base')
@section('title', '浏览轨迹')
@section('content')
<link rel="stylesheet" type="text/css" href="{{ plugin_assets('browse-footprint', 'assets/css/browse_footprint.css') }}" />
<div class="copy-link" style="position:absolute;z-index:-1;opacity: 0;">
  <input type="text" />
</div>
<div id="app" class="page-content">
  <div class="page-path block">
    浏览轨迹
    >
    受访页面
  </div>
  <section class="search-bar block">
    <div class="block-title">
      受访页面
      <span v-if="nowTime">
        ([[ nowTime ]])
      </span>
    </div>
    <ul class="block-content">
      <li class="search-filter_row">
        <div class="search-filter_row-title">时间:</div>
        <div class="search-filter-search-condition">
          <el-button-group>
            <el-button @click="switchSearchTime(1)" :type="search.timeType==1?'primary':''">今天</el-button>
            <el-button @click="switchSearchTime(2)" :type="search.timeType==2?'primary':''">昨天</el-button>
            <el-button @click="switchSearchTime(3)" :type="search.timeType==3?'primary':''">最近7天</el-button>
            <el-button @click="switchSearchTime(4)" :type="search.timeType==4?'primary':''">最近30天</el-button>
          </el-button-group>
        </div>
        <div class="search-filter-search-condition">
          <el-date-picker is-range v-model="search.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeSearchTime">
          </el-date-picker>
        </div>
        <div class="search-filter-search-condition">
          页面类型:
          <el-select v-model="search.pageType" placeholder="请选择">
            <el-option label="全部" value="all"> </el-option>
            <el-option v-for="typeItem in pageType" :key="typeItem.key" :label="typeItem.value" :value="typeItem.key">
            </el-option>
          </el-select>
        </div>
      </li>
      <li class="search-filter_row">
        <div class="search-filter_row-title">端口:</div>
        <div class="search-filter-search-condition">
          <el-button-group>
            <el-button @click="switchPort(0)" :type="search.portType==0?'primary':''">全部</el-button>
            <el-button v-for="typeItem in portType" :key="typeItem.key" :type="search.portType==typeItem.key?'primary':''" @click="switchPort(typeItem.key)">[[ typeItem.value ]]</el-button>
          </el-button-group>
        </div>
      </li>
      <li class="search-filter_row">
        <div class="search-filter_row-title">分享会员:</div>
        <div class="search-filter-search-condition">
          <el-input placeholder="会员ID/昵称/手机号码" v-model="search.sharer_info"></el-input>
        </div>
      </li>
      <li class="search-filter_row">
        <div class="search-filter_row-title">页面链接:</div>
        <div class="search-filter-search-condition" style="flex-grow:0.5;">
          <el-input placeholder="请输入链接地址" v-model="search.pageUrl"></el-input>
        </div>
        <div class="search-filter-search-condition">
          <el-button @click="getFootprint">搜索</el-button>
          <el-button @click="exportData">导出</el-button>
        </div>
      </li>
      <li class="search-filter_row" style="margin:-15px 0 0 0;color: #999;">
        <div class="search-filter_row-title"></div>
        <p>仅支持精准搜索</p>
      </li>
    </ul>
  </section>
  <section class="block">
    <div class="block-title">
      指标概览
    </div>
    <ul class="block-content index-list">
      <li class="index-item">
        浏览量(PV)
        <p class="index-value">[[ indexConcept.page_view ]]</p>
      </li>
      <li class="index-item">
        访客量(UV)
        <p class="index-value">[[ indexConcept.unique_visitor ]]</p>
      </li>
      <li class="index-item">
        IP数
        <p class="index-value">[[ indexConcept.ip_view ]]</p>
      </li>
      <li class="index-item">
        会员访客数
        <p class="index-value">[[ indexConcept.member_view ]]</p>
      </li>
      <li class="index-item">
        游客访客数
        <p class="index-value">[[ indexConcept.tourists_view ]]</p>
      </li>
    </ul>
  </section>
  <section class="data-list block">
    <el-table :data="footprintData" style="width: 100%">
      <el-table-column label="排序" width="150" prop="serialNumer">
      </el-table-column>
      <el-table-column prop="url" label="页面URL">
        <template slot-scope="scope">
          <div class="url-image-view">
            <el-image class="url-thumb" :src="scope.row.thumb" v-if="scope.row.is_page_type"></el-image>
            <div class="url-content">
              <span v-if="scope.row.is_page_type">[[ scope.row.title ]]</span>
              <span v-else>[[ scope.row.url ]]</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="120">
        <template slot-scope="scope">
          <el-button-group>
            <el-button icon="el-icon-document-copy" size="mini" title="复制链接" @click="copyLink(scope.row.url)"></el-button>
            <el-button icon="el-icon-document" size="mini" title="查看详细" @click="routerToDetails(scope.$index)"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
      <el-table-column prop="page_type" label="页面类型" ">
      </el-table-column>
      <el-table-column label=" 分享会员" width="100">
        <template slot-scope="scope">
          <div class="share-info" v-if="scope.row.sharer_info">
            <el-image :src="scope.row.sharer_info.avatar_image" alt="scope.row.sharer_info.username" class="share-member-avatar" ></el-image>
            <a class="share-info-nickname" :href="`{!! yzWebFullUrl('member.member.detail') !!}&id=${scope.row.sharer_info.uid}`">[[ scope.row.sharer_info.username ]]</a>
          </div>
          <div v-else>
          -
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="member_view" label="会员访客" width="150">
      </el-table-column>
      <el-table-column prop="page_view" label="浏览量" width="200">
      </el-table-column>
      <el-table-column prop="unique_visitor" label="访客量" width="200">
      </el-table-column>
      <el-table-column prop="ip_view" label="IP数" width="200">
      </el-table-column>
    </el-table>
    <div class="data-pagination">
      <el-row>
        <el-col align="right">
          <el-pagination layout="prev, pager, next,jumper" :total="footprintPagination.total" :page-size="footprintPagination.per_page" :current-page="footprintPagination.page" background @current-change="getFootprint"></el-pagination>
        </el-col>
      </el-row>
    </div>
  </section>
</div>
<script>
  const listApi = "{!! yzWebFullUrl('plugin.browse-footprint.admin.index.getIndexData') !!}";
  const detailsApi = "{!! yzWebFullUrl('plugin.browse-footprint.admin.index.getDetailData') !!}";
  const detailsUrl = "{!! yzWebFullUrl('plugin.browse-footprint.admin.index.detail') !!}";
  const exportUrl = "{!! yzWebFullUrl('plugin.browse-footprint.admin.index.export') !!}";
</script>
<script src="{{ plugin_assets('browse-footprint', 'assets/js/browse_footprint.js') }}"></script>
@endsection