<template>
  <!-- <div style="padding: 10px;background-color:#F2F3F5"> -->
  <div style="background-color:#F2F3F5">
    <div class="history">
      <div style="background-color:#Fff;padding:20px 20px 0 20px">
        <div style="font-size:12px;font-weight:600">商品销售排行</div>
          <!-- 顶部搜索 -->
          <div class="toolbar">
            <el-form ref="formParams" :inline="true" :model="formParams">
              <el-form-item label="日期">
                <el-date-picker
                  v-model="formParams.dates"
                  type="daterange"
                   size="mini"
                   style="width:220px"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>

              <el-form-item label-width="0">
                <el-button  plain @click="search" size="mini" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
                <el-button plain @click="clear" size="mini" style="background-color: #fff;color: #000;">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
        <!-- 表格 -->
        <div class="content_table" style="padding: 15px 10px 10px 20px;background-color:#F2F3F5">
             <div style="background-color: #fff;padding: 10px;margin-bottom: 20px;">
          <div style="display: flex;background-color:#F3F3F3;padding:10px 15px;border:1px solid #F3F3F3">
            <div style="width: 100%;">数据列表</div>
          </div>
          <div class="table">
            <el-table
                          border
                          :data="tableData"
                          :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                          style="width: 100%"
                        >
                          <el-table-column prop="id" label="排名">
                             <template slot-scope="scope">
                               {{scope.$index + 1 }}
                               </template>
                          </el-table-column>
                          <el-table-column prop="shopnum" label="商品编号">
                              <template slot-scope="scope">
                                {{scope.row.products[0].productId}}
                                </template>
                          </el-table-column>
                          <el-table-column prop="shopname" label="商品名称">
            <template slot-scope="scope">
                                {{scope.row.products[0].productName}}
                                </template>
                          </el-table-column>
                          <el-table-column prop="fl" label="商品分类">
                          <template slot-scope="scope">
                                              {{scope.row.product.shopGroupName}}
                                              </template>
                                               </el-table-column>
                          <el-table-column prop="sx" label="属性" >
                            <template slot-scope="scope">
                                                {{scope.row.products[0].value}}
                                                </template>
                                                 </el-table-column>
                          <el-table-column prop="createTime" label="商品创建时间">
                          <template slot-scope="scope">
                                              {{scope.row.product.createTime}}
                                              </template>
                             </el-table-column>
                          <el-table-column prop="bigDecimal" label="销售数量" />
                          <el-table-column prop="multiply" label="销售金额"  :sortable="true" :sort-method="sortMethod"/>
                        </el-table>
          </div>
          <!-- 分页 -->
          <div class="fenye">
            <div style="line-height: 34px">显示第1到第10条记录</div>
            <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total,sizes,prev, pager,next" :total="total "
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
       </div>
        </div>
      </div>

  </div>
</template>

<script>
  import {orderGetAll,
  salesRanking,} from '@/api/psRanking'
export default {
  data() {
    return {
      total: 1,
      pageSize: 10,
      currentPage: 1,
      formParams: {
        dates:[],
        page: 1,
        pageSize: 10
      },
      formInline: {
        searchType: '1',
        search: '', // 搜索字段
        state: '',
        // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
        dates: [], // 下单时间数组
        page: 1,
        shopName: '',
        pageSize: 10
      },
       tableData: [],

    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
sortMethod(before,after){
    return  Number(after.multiply) - Number(before.multiply)
},
async getAll(){
const res =  await orderGetAll(this.formInline)
const Orderlist = await salesRanking(res.data.list)
this.tableData = Orderlist.data

},
async search(){
  this.formInline.dates = this.formParams.dates
  const res =  await orderGetAll(this.formInline)
  const Orderlist = await salesRanking(res.data.list)
  this.tableData = Orderlist.data

},
clear(){
  this.formParams.dates =[]
  this.formInline.dates = []
  this.getAll()
},
        handleCurrentChange(val) {
          this.currentPage = val
        },
        handleSizeChange(val) {
          this.pageSize = val
        },
    },
 }
</script>

<style lang='scss' scoped>
.history{
  padding: 0px;
  padding-left: 10px;
  min-height: calc(100vh - 50px - 20px);
}
 ::v-deep .el-form-item__label{
        font-weight: normal;
         font-size: 12px;

       }
       ::v-deep .btn .el-button:focus,
        .el-button:hover {
          border: 1px solid #3F9B6A;
        }
        ::v-deep .el-button {
           border: 1px solid #3F9B6A;
         }
          ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
           background-color: #3F9B6A;
         }
</style>
<style scoped>
.history /deep/ .el-table .cell.el-tooltip img {
  max-height: 100px;
}
  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }
  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

/deep/ .el-pager {
    position: absolute;
    top: 4px;
    right: 40px;
  }

  /deep/ .btn-next {
    position: absolute;
    top: 4px;
    right: 10px;
  }

 /deep/ .btn-prev {
   position: absolute;
   top: 4px;
   right: 69px;
 }
 .toolbar{
   .el-form-item{
     margin-bottom:0px;
   }
 }
</style>
<style>
.el-tooltip__popper {
  max-width: 50%;
}
</style>
