<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="productId" label="商品ID" align="center" width="80" />
      <el-table-column prop="mainImage" label="商品图片" align="center" width="120">
        <template v-if="row.mainImage" slot-scope="{ row }">
          <el-popover placement="top-start" title="" width="120" trigger="hover">
            <img :src="row.mainImage" alt="" style="width: 100px; height: 100px" />
            <img slot="reference" :src="row.mainImage" alt="" style="width: 50px; height: 50px" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center" />
      <el-table-column prop="validFlag" label="商品状态" align="center" width="120">
        <template slot-scope="{ row }">
          <el-tag v-if="row.validFlag === 1" type="warning" size="small">待审核</el-tag>
          <el-tag v-else-if="row.validFlag === 2" type="success" size="small">已上架</el-tag>
          <el-tag v-else type="danger" size="small">{{ row.validFlag | validFlagFilters }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="link" label="链接" align="center">
        <template 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="phoneNumber" label="访问次数" align="center" width="150">
        <template slot-scope="{ row }">
          {{ row.accessNumber }}
        </template>
      </el-table-column>
      <el-table-column prop="average" label="平均访问时长" align="center" width="150">
        <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="getPageShopProduct"
    />
  </div>
</template>

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

export default {
  name: 'Product',
  filters: {
    validFlagFilters(value) {
      // 客户来源
      const map = {
        0: '删除',
        1: '待审核',
        2: '已上架',
        3: '已下架',
        8: '审核未通过',
        9: '已隐身',
        10: '已冻结'
      }
      return map[value]
    }
  },
  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.getPageShopProduct()
    },
    // 供应商商品统计列表
    async getPageShopProduct() {
      try {
        this.isLoading = true
        const res = await getPageShopProduct(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>
