<template>
  <a-modal
    :title="title"
    :width="width"
    v-model="modalVisible"
    centered
    :closable="true"
    :keyboard="false"
    :maskClosable="false"
    width="50%"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>

    <div class="wrap">
<!--      <p style="font-size: 13px;color: #999">展示数据为记录询盘的前后七天时间范围！</p>-->
      <a-spin :spinning="spinning" tip="正在获取访问记录数据">
        <a-empty v-if="trackData.length == 0"></a-empty>
        <a-row v-for="(item,index) in trackData" :key="index">
          <a-col :span="24" class="c1">
            <span class="time">{{ item.serverDatePrettyFirstAction }} - {{ item.serverTimePrettyFirstAction }}</span>
            <span>访问终端：{{item.deviceType}}</span>
            <span>来源媒介：{{ item.referrerTypeName }}</span>
            <span>操作系统：{{ item.operatingSystemCode }}</span>
          </a-col>
          <a-col :span="24">
            <p class="t1">{{item.actionDetails.length}}页面分析- {{item.visitDurationPretty}}<span style="float: right">停留时间</span></p>
            <a-steps direction="vertical" >
              <a-step status="finish" v-for="(child,index2) in item.actionDetails" :key="index2" v-if="child.pageTitle != null">
                <div slot="title">
                  <span>{{ child.pageTitle }}</span> <a-tag style="margin-left: 15px" v-if="filterGetMax(child.timeSpent,index) && item.actionDetails.length > 2" color="orange">停留最久</a-tag>
                </div>
                <div slot="description">
                  <a :href="child.url" target="_blank">{{ child.url }}</a>
                  <span style="float: right">{{child.timeSpentPretty}}</span>
                </div>
                <a-icon slot="icon" type="folder" />
              </a-step>
            </a-steps>
          </a-col>
          <a-divider></a-divider>
        </a-row>
      </a-spin>


    </div>

  </a-modal>
</template>

<script>
import { getAction } from '/@/api/manage/manage'

export default {
  name: 'enquiryTrack',
  data () {
    return {
      title:"访问记录",
      width:800,
      modalVisible: false,
      disableSubmit: false,
      record:{},
      trackData:[],
      maxArr:[],
      spinning:false

    }
  },

  filters:{

  },


  methods: {
    init (record) {
      this.modalVisible=true
      this.maxArr = []
      this.record = record
      this.spinning = true
      getAction('/adweb/adwebEnquiry/getMatomoWebTrackFromEnquiryId?id=' + record.id).then(res => {
        this.spinning = false
          if(res.code == 200){
            this.trackData = res.result
            this.getMAx()
          }
      })
    },

    filterGetMax(value,index) {
      for(let i in this.maxArr){
          if(value == this.maxArr[index]){
            return true
          }else{
            return false
          }
      }
    },


    handleCancel () {
      this.$emit('close');
      this.modalVisible = false;
    },

    getMAx(){
      let trankData = this.trackData
      for(let i in trankData){
        this.maxArr.push(Math.max.apply(Math,trankData[i].actionDetails.map(item => { return item.timeSpent })))
      }
    }

  }
}
</script>


<style lang="less" scoped>



.wrap{
  .c1{
    span{
      color: #333;
      &:not(:last-child){
        margin-right: 35px;
      }
      &.time{
        font-size: 20px;
      }
    }
  }
  .t1{
    font-size: 14px;
    color: #333;
    margin: 20px 0 10px;
  }
}
</style>
