<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>统计时间:</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" @click="getList"> 查询 </el-button>
      </div>
    </div>
    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="600">
      <el-table-column prop="keyword" fixed label="搜索词" align="center" width="300" />
      <el-table-column prop="link" label="搜索链接" align="center">
        <template v-if="row.link" slot-scope="{ row }">
          <a style="color: #2fa4e7" target="_blank" :href="row.link">
            {{ row.link ? row.link : '---' }}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="accessNumber" label="访问次数" align="center" width="200">
        <template slot-scope="{ row }">
          {{ row.accessNumber }}
        </template>
      </el-table-column>
      <el-table-column prop="average" label="平均访问时长" align="center" width="200">
        <template slot-scope="{ row }">
          {{ row.average }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <pagination
      :total="total"
      :page-sizes="[20]"
      :page-size="20"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getPageShopKeyword"
    />
  </div>
</template>

<script>
import { getPageShopKeyword } from '@/api/user/customer/customer'

export default {
  name: 'Search',
  filters: {},
  data() {
    const pickerOptions = {
      shortcuts: [
        {
          text: '近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近半年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近1月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近1周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }
      ]
    }
    return {
      pickerOptions,
      time: '',
      listQuery: {
        shopId: this.$route.query.shopId, // 供应商Id
        startTime: '', // 统计开始时间
        endTime: '', // 统计结束时间
        pageNum: 1,
        pageSize: 20
      },
      isLoading: true,
      list: [],
      total: 0
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  methods: {
    // 商品列表
    async getList() {
      this.listQuery.pageNum = 1
      this.list = []
      if (this.time && this.time.length > 0) {
        this.listQuery.startTime = this.time[0]
        this.listQuery.endTime = this.time[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
      this.getPageShopKeyword()
    },
    // 供应商搜索词统计列表
    async getPageShopKeyword() {
      try {
        this.isLoading = true
        const res = await getPageShopKeyword(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
