<template>
  <div style="background-color:#F2F3F5">
    <div class="history">
      <div style="background-color:#Fff;padding:20px 20px 0 20px">
        <div style="font-size:14px;">收货地统计</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"

                   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   @click="search"  style="background-color: #3F9B6A;color: #fff;">查询</el-button>
                <el-button  @click="clear" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" >重置</el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
      <!-- <div style="display: flex;margin-bottom: 20px;background-color: #fff;">
        <div style="border: #EBEEF5 1px solid; margin-right: 20px; width: 45%;" >
          <div style="border-bottom: #EBEEF5 1px solid;background-color: #F7F7F7;padding: 10px 15px;">收货地地域分布图</div>
            <div ref="container" style="width: 600px; height: 400px;"></div>
        </div>
        <div style="border: #EBEEF5 1px solid; width: 45%;">
          <div style="border-bottom: #EBEEF5 1px solid;background-color: #F7F7F7;padding: 10px 15px;">收货地占比图</div>
          <div ref="container1" style="width: 600px; height: 400px;"></div>
        </div>
      </div> -->
        <!-- 表格 -->
        <div class="content_table" style="padding: 15px 10px 10px 20px;background-color:#fff">
             <div style="padding: 10px;margin-bottom: 20px;">
          <div class="table">
            <el-table
               show-summary
              :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
               :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
              style="width: 100%"
            >
              <el-table-column prop="address" label="收货地" />
              <el-table-column label="下单数量" prop="num">
                <template slot-scope="scope">
                  {{scope.row.refundOder.length + scope.row.transactionOrder.length}}
                  </template>

              </el-table-column>
              <el-table-column prop="refundOder" label="退单数">
                  <template slot-scope="scope">
                    {{scope.row.refundOder.length}}
                    </template>
              </el-table-column>
              <el-table-column prop="transactionOrder" label="成交数" >
                <template slot-scope="scope">
                      {{scope.row.transactionOrder.length}}
                      </template>
                </el-table-column>
              <el-table-column prop="refundAmount" label="退单金额"  :show-overflow-tooltip="true"/>
              <el-table-column prop="transactionAmount" label="成交金额" :show-overflow-tooltip="true" />
            </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 * as echarts from 'echarts';
  import {orderGetAll,deliveryAddressStatistics} 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: {
     async getAll(){
     const res =  await orderGetAll(this.formInline)
     const Orderlist = await deliveryAddressStatistics(res.data.list)
     this.tableData = Orderlist.data
     this.total = this.tableData.length
     },
async search(){
    this.formInline.dates  =  this.formParams.dates

  const res =  await orderGetAll(this.formInline)
  const Orderlist = await deliveryAddressStatistics(res.data.list)
  this.tableData = Orderlist.data
},
  clear(){
     this.formInline.dates = []
     this.formParams.dates = []
     this.getAll()
  },
     echar1(diameter) {
       this.chart1 = echarts.init(diameter);
       // 指定图表的配置项和数据
      const option1 = {

         series: [
           {
             name: 'Funnel',
             type: 'funnel',
             left: '10%',
             top: 60,
             bottom: 60,
             width: '80%',
             min: 0,
             max: 100,
             minSize: '0%',
             maxSize: '100%',
             sort: 'descending',
             gap: 2,
             label: {
               show: true,
               position: 'inside'
             },
             labelLine: {
               length: 10,
               lineStyle: {
                 width: 1,
                 type: 'solid'
               }
             },
             itemStyle: {
               borderColor: '#fff',
               borderWidth: 1
             },
             emphasis: {
               label: {
                 fontSize: 20
               }
             },
             data: [
               { value: 60, name: 'Visit' },
               { value: 40, name: 'Inquiry' },
               { value: 20, name: 'Order' },
               { value: 80, name: 'Click' },
               { value: 100, name: 'Show' }
             ]
           }
         ]
       };

       // 使用刚指定的配置项和数据显示图表。
       this.chart1.setOption(option1)
     },
   }
}
</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>
