@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 :value="search.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy年MM月d日" @change="changeSearchTime">
          </el-date-picker>
        </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>
        <div class="search-filter-search-condition">
          <el-button @click="getDetails">搜索</el-button>
          <el-button @click="exportData">导出</el-button>
        </div>
      </li>
    </ul>
  </section>
  <section class="block">
    <div class="block-title">
      页面URL
    </div>
    <el-table class="block-content" :data="detailInfo" style="width: 100%">
      <el-table-column label="信息">
        <template slot-scope="scope">
          <div class="detail-info-view">
            <el-image :src="scope.row.thumb" class="detail-info-image" v-if="scope.row.is_page_type"></el-image>
            <div class="detail-info">
              <span v-if="scope.row.is_page_type">[[ scope.row.title ]]</span>
              <span v-else-if="scope.row.url">[[ scope.row.url ]]</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="120">
        <template slot-scope="scope">
          <el-button icon="el-icon-document-copy" size="mini" title="复制链接" @click="copyLink(scope.row.url)"></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="page_type" label="页面类型" width="250">
      </el-table-column>
    </el-table>
  </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="visit-member block">
    <el-table :data="detailMemberList" style="width: 100%">
      <el-table-column prop="access_time" label="访问时间" width="200">
      </el-table-column>
      <el-table-column prop="cookie_type" label="新老访客">
      </el-table-column>
      <el-table-column label="访问会员">
        <template slot-scope="scope">
          <div class="member-info">
            <el-image :src="scope.row.avatar_image" :alt="scope.row.avatar_image" class="member-avatar"></el-image>
            <a class="member-nickname" v-if="scope.row.name" :href="`{!! yzWebFullUrl('member.member.detail') !!}&id=${scope.row.uid}`">[[ scope.row.name ]]</a>
            <div class="member-nickname" v-else>访客</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="port_name" label="端口" width="300">
      </el-table-column>
{{--      <el-table-column prop="ip_name" label="访问区域" width="250">--}}
{{--      </el-table-column>--}}
    </el-table>
    <div class="data-pagination">
      <el-row>
        <el-col align="right">
          <el-pagination layout="prev, pager, next,jumper" :total="detailPagination.total" :page-size="detailPagination.per_page" :current-page="detailPagination.page" background @current-change="getDetails"></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 exportUrl = "{!! yzWebFullUrl('plugin.browse-footprint.admin.index.export') !!}";
  const pageType = "{{$page_type}}";
  const pageTypeId = "{{$page_type_id}}";
  const timeType="{{ $time_type }}";
  const pagePort="{{ $port_type }}";
  const startTime="{{ $s_div_time }}";
  const endTime="{{ $e_div_time }}";
</script>
<script src="{{ plugin_assets('browse-footprint', 'assets/js/browse_footprint.js') }}"></script>
@endsection