<template>
  <div class="app-container">
    <div v-if="summarize.length > 0" class="tags-sms">
      <span class="tags-sms-span">意向标签：</span>
      <el-tag v-for="(sum, sumIndex) in summarize" :key="sumIndex" effect="dark" style="font-size: 15px; margin: 0 2px">
        {{ sum.value }}
      </el-tag>
    </div>
    <!-- 顶部操作区域 -->
    <div class="filter-container" style="margin-top: 10px">
      <!-- 关键词列表 -->
      <el-table v-loading="isLoading" :data="list" border>
        <el-table-column prop="pagePath" label="页面路径" align="center" width="300">
          <template slot-scope="{ row }">
            <a v-if="row.accessClient === '0'" style="color: #2fa4e7" target="_blank" :href="row.pagePath">{{
              row.pagePath
            }}</a>
            <span v-else> {{ row.pagePath }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="accessSource" label="访问来源" align="center" width="100">
          <template slot-scope="{ row }">
            {{ row.accessSource | accessSourceFilters }}
          </template>
        </el-table-column>
        <el-table-column prop="pageTypes" label="页面类型" align="center">
          <template slot-scope="{ row }">
            {{ row.pageTypes ? row.pageTypes : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="pageLabel" label="页面标签" align="center">
          <template slot-scope="{ row }">
            {{ row.pageLabel ? row.pageLabel : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="pagePath" label="商品图片" align="center" width="100">
          <template v-if="row.productId" slot-scope="{ row }">
            <el-popover placement="top-start" title="" width="180" trigger="hover">
              <img :src="row.productImage" alt="" style="width: 150px; height: 150px" />
              <img slot="reference" :src="row.productImage" alt="" style="width: 80px; height: 80px" />
            </el-popover>
          </template>
          <template v-else>
            <span>---</span>
          </template>
        </el-table-column>
        <el-table-column label="商品ID" align="center" width="100">
          <template slot-scope="{ row }">
            {{ row.productId ? row.productId : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" align="center">
          <template slot-scope="{ row }">
            {{ row.productName ? row.productName : '---' }}
          </template>
        </el-table-column>
        <el-table-column label="关联供应商" align="center">
          <template slot-scope="{ row }">
            <p v-for="item in handleRelevanceShop(row.relevanceShop)" :key="item">
              {{ item ? item : '---' }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="accessTime" label="访问时间" align="center" />
        <el-table-column prop="accessDuration" label="访问时长" align="center" />
      </el-table>
      <!-- 页码 -->
      <pagination
        :total="total"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="100"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="fetchBehaviorList"
      />
    </div>
  </div>
</template>

<script>
import { fetchBehaviorList } from '@/api/user/record/record'

export default {
  name: 'RecordDtails',
  filters: {
    accessSourceFilters(value) {
      // 公司类型
      const map = {
        0: '直接访问',
        1: '百度搜索',
        2: '360搜索',
        3: '谷歌搜索',
        4: '神马搜索',
        5: '头条搜索',
        6: '搜狗搜索',
        7: '直接访问'
      }
      return map[value]
    }
  },
  data() {
    return {
      isLoading: true,
      summarize: [],
      listQuery: {
        ip: '',
        accessDate: '',
        userId: 0,
        pageNum: 1,
        pageSize: 100
      },
      list: [],
      total: 0
    }
  },
  computed: {},
  created() {
    this.listQuery = { ...this.listQuery, ...this.$route.query }
    console.log('listQuery', this.listQuery)
    this.getList()
  },
  methods: {
    // 获取详情列表
    getList() {
      this.listQuery.pageNum = 1
      this.fetchBehaviorList()
    },
    // 获取关键词列表
    async fetchBehaviorList() {
      try {
        this.isLoading = true
        const res = await fetchBehaviorList(this.listQuery)
        const data = res.data
        this.summarize = data.label
        this.list = data.page.results
        this.total = data.page.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    handleRelevanceShop(value) {
      console.log('va', value.split(','))
      return value.split(',')
    }
  }
}
</script>

<style>
.tags-sms {
  width: 100%;
  height: auto;
  font-size: 14px;
  color: #666666;
  line-height: 40px;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #e1e1e1;
}
.tags-sms .tags-sms-span {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}
</style>
