<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-form label-width="80px">
      <el-form-item label="搜索方式:">
        <el-radio-group v-model="searchParams.type">
          <el-radio :label="0">按开始时间到结束时间搜索</el-radio>
          <el-radio :label="1">按月搜索</el-radio>
          <el-radio :label="2">按年搜索</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="搜索时间:">
        <el-date-picker
          v-if="searchParams.type === 0"
          v-model="searchParams.time"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="left"
        />
        <el-date-picker
          v-if="searchParams.type === 1"
          v-model="searchParams.month"
          type="month"
          placeholder="选择月"
          align="left"
          value-format="yyyy-MM"
        />
        <el-date-picker
          v-if="searchParams.type === 2"
          v-model="searchParams.year"
          type="year"
          placeholder="选择年"
          align="left"
          value-format="yyyy"
        />
        <el-button
          type="primary"
          size="small"
          @click="getShop"
        >
          搜索
        </el-button>
        <el-button
          type="primary"
          size="small"
          style="margin:0 0 20px 20px;"
          :loading="downloadLoading"
          icon="el-icon-document"
          @click="exportFlowPrice"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        label="排名"
        type="index"
        align="center"
        :index="indexMethod"
        width="80"
      />
      <el-table-column
        prop="storename"
        label="店铺名"
        align="center"
      />
      <el-table-column
        prop="account"
        label="业绩"
        align="center"
      />
    </el-table>
    <pagination
      :total="tableTotal"
      :limit="searchParams.page_size"
      :page="searchParams.page_index"
      @pagination="pagination"
      @update:limit="pagination"
    />
  </div>
</template>
<script>
// api
import {
  getShop
} from '@/api/data/rank'
// 格式化时间
import {
  formatter
} from '@/filters/index'
// 导出
import {
  exportStoreRank
} from '@/api/export'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      searchParams: {
        type: 0,
        time: [formatter(Date.now() - 6 * 24 * 60 * 60 * 1000, 'yyyy-MM-dd'), formatter(Date.now(), 'yyyy-MM-dd')],
        month: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
        year: `${new Date().getFullYear()}`,
        page_size: 20,
        page_index: 1
      },
      tableTotal: 0,
      table: [],
      downloadLoading: false,
      loadingFull: false
    }
  },
  methods: {
    // 门店业绩排行
    async getShop() {
      this.loadingFull = true
      try {
        const { page_index, page_size, time, type, month, year } = this.searchParams
        let date
        if (type === 0) {
          date = time
        } else if (type === 1) {
          date = month
        } else {
          date = year
        }
        const res = await getShop({
          page_index,
          page_size,
          time: date,
          type
        })
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.table = list
          this.tableTotal = total
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      this.loadingFull = false
    },
    // 站区排名
    indexMethod(index) {
      const { page_size, page_index } = this.searchParams
      return index + (Number(page_index) - 1) * Number(page_size) + 1
    },
    // 站区分页
    pagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getShop()
    },
    // 导出
    async exportFlowPrice() {
      const { time, type, month, year } = this.searchParams
      let date
      if (type === 0) {
        date = time
      } else if (type === 1) {
        date = month
      } else {
        date = year
      }
      try {
        const res = await exportStoreRank({
          type,
          time: date
        })
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          if (data.length < 1) {
            this.$message.error('没有数据哦!!!')
            return false
          }
          this.downloadLoading = true
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['店铺名', '业绩']
            const filterVal = ['storename', 'account']
            const list = data
            const dataVal = this.formatJson(filterVal, list)
            excel.export_json_to_excel({
              header: tHeader,
              data: dataVal,
              filename: `${date}店铺业绩排行`,
              autoWidth: true,
              bookType: 'xlsx'
            })
            this.downloadLoading = false
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`导出店铺业绩排行失败: ${e}`)
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>
