<!--  -->
<template>
  <div class="pending">
    <div class="tab_show">
      <div style="display: flex;margin: 15px 0;">
        <el-form ref="formParams" :inline="true" :model="formParams">
          <el-form-item label="日期">
            <el-date-picker v-model="formParams.tongjiTime" type="daterange" range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" />
          </el-form-item>

          <el-form-item label-width="0">
            <el-button plain @click="search(1)" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
            <el-button plain @click="clear(1)" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="padding:10px 40px 20px 20px;border:1px solid #EBEEF5;margin-bottom: 20px;">
        <div class="titleTj">
          销售额统计
        </div>

        <div class="">
          <el-descriptions class="margin-top" title="" :column="1" border :labelStyle="labelStyle"
            :contentStyle="contentStyle">
            <el-descriptions-item>
              <template slot="label">

                销售总额
              </template>
              ￥{{tongji.transactionsCompleted + tongji.invalidOrderAmount}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">

                有效订单数
              </template>
              {{tongji.validOrders}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                有效订单总额
              </template>
              ￥{{tongji.transactionsCompleted}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                无效订单总数（关闭或取消）
              </template>
              {{tongji.invalidOrder}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                无效订单总额
              </template>
              ￥{{tongji.invalidOrderAmount}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                已成交订单总数
              </template>
              {{tongji.alreadyTransacted}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                已成交订单总额
              </template>
              ￥{{tongji.transactionsCompleted}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div style="padding:10px 40px 20px 20px;border:1px solid #EBEEF5;margin-bottom: 20px;">
        <div class="titleTj">
          销售毛利润/率统计
        </div>
        <!-- <div style="display: flex;margin: 15px 0;">
           <el-form ref="formParams" :inline="true" :model="formParams">
             <el-form-item label="日期">
               <el-date-picker v-model="formParams.maoliTime" type="daterange"  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(2)"
                 style="background-color: #3F9B6A;color: #fff;">查询</el-button>
               <el-button plain @click="clear(2)"
                 style="background-color: #fff;color: #000;">重置</el-button>
             </el-form-item>
           </el-form>
          </div> -->
        <div class="">
          <el-descriptions class="margin-top" title="" :column="1" border :labelStyle="labelStyle"
            :contentStyle="contentStyle">
            <el-descriptions-item>
              <template slot="label">

                销售总额
              </template>
              ￥{{tongji.transactionsCompleted + tongji.invalidOrderAmount}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">

                订单毛利润（总）
              </template>
              ￥{{maoli.subtract}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                订单毛利率（总）
              </template>
              毛利率：{{maoli.divide}}%
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                有效订单总数
              </template>
              {{tongji.validOrders}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                有效订单总额
              </template>
              ￥{{tongji.transactionsCompleted}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                无效订单总数（关闭或取消）
              </template>
              {{tongji.invalidOrder}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                无效订单总额
              </template>
              ￥{{tongji.invalidOrderAmount}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                已成交订单总数
              </template>
              {{tongji.alreadyTransacted}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                已成交订单总额
              </template>
              ￥{{tongji.transactionsCompleted}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                毛利率排行
              </template>

            </el-descriptions-item>
            <el-descriptions-item v-for="item in maoli.salesRanking" :key="item.id">
              <template slot="label">
                <span v-for="(value, key) in item" :key="key">{{ key }}</span>
              </template>
              <span v-for="(value, key) in item" :key="key">毛利率：{{ value }}%</span>
            </el-descriptions-item>
            <!-- <el-descriptions-item>
                  <template slot="label">
                     商品2
                  </template>
                  毛利率：21.01%
                </el-descriptions-item> -->
          </el-descriptions>
        </div>
      </div>
      <!-- 搜索 -->
      <!--       <div class="filter-container">
         <div style="display:flex;justify-content: space-between;background-color: #f5f5f5;padding:10px">
          <div style="line-height:200%">筛选查询</div>
          <div>
            <button @click="toggleFilter">收起筛选</button>
            <el-button  plain @click="search"  style="background-color: #3F9B6A;color: #fff;">查询</el-button>
            <el-button plain @click="resetting"  style="color: #000;border-color:#d5d5d5;">重置</el-button>
          </div>
         </div>
         <div :class="fut?'formSearch':'collapsed'" ref="formSearch">
            <el-form :inline="true" :model="formInline" label-width="auto">
              <el-form-item label="订单状态">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号"  style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="下单用户">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号"  style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="下单时间">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号"  style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              </el-form>
              </div>
        </div> -->
      <!-- 表格 -->
      <div class="tableBox">
        <el-table :data="tableData"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
          <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="商品名称" width="300">
            <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="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 class="fenye">
          <div>共{{ total }}条</div>
          <el-pagination :current-page="currentPage" :page-size="10" layout="prev, pager, next" :total="total"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    salesStatistics,
    orderGetAll,
    calculateGrossProfit
  } from '@/api/dataSta'
  import {
    salesRanking,
  } from '@/api/psRanking'
  import {
    async
  } from 'q';
  export default {
    data() {
      // 这里存放数据
      return {
        formParams: {
          maoliTime: '',
          tongjiTime: ''
        },
        currentPage: 1,
        formInline: {
          searchType: '1',
          search: '', // 搜索字段
          state: '4',
          // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
          dates: [], // 下单时间数组
          page: 1,
          shopName: '',
          pageSize: 10
        },
        fut: true,
        total: 1,
        tableData: [],
        tableLoading: false,
        dialogVisible: false,
        tongji: {},
        maoli: {},
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        labelStyle: {
          width: '35%',
          textAlign: 'center',
          color: '#000',
          backgroundColor: '#F9FAFC',
        },
        contentStyle: {
          textAlign: 'center',
        }

      }

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getAll()
    },
    // 方法集合
    methods: {
      sortMethod(before, after) {
        return Number(after.multiply) - Number(before.multiply)
      },
      toggleFilter() {
        this.fut = !this.fut
      },
      handleSizeChange(val) {
        this.formInline.pageSize = val
        // this.getAll(this.formInline)
      },
      handleCurrentChange(val) {
        this.formInline.page = val
        // this.getAll(this.formInline)
      },
      //重置
      clear(val) {
        this.formInline = {
          searchType: '1',
          search: '', // 搜索字段
          state: '',
          // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
          dates: [], // 下单时间数组
          page: 1,
          shopName: '',
          pageSize: 10
        }
        this.formParams.tongjiTime = ''
        this.getAll()
        // if(val == 1){
        //  this.formParams.tongjiTime = ''
        //   this.getAll()
        // }else{
        //   this.formParams.maoliTime = ''
        //   this.getAll()
        // }
      },
      //  查询
      search(val) {
        this.formInline.dates = this.formParams.tongjiTime || []
        this.getAll()
        // if(val ==1){
        //   this.formInline.dates = this.formParams.tongjiTime
        //   this.getAll()
        // }else{
        //   this.formInline.dates = this.formParams.maoliTime
        //   this.getAll()
        // }
        // console.log(this.formParams.tongjiTime)
        // console.log(this.formParams.maoliTime)
      },
      // 初始化查询所有数据
      async getAll() {
        const res = await orderGetAll(this.formInline)
        const Orderlist = await calculateGrossProfit(res.data.list)
        const tablelist = await salesStatistics(res.data.list)
        this.maoli = Orderlist.data
        this.tongji = tablelist.data
        // this.loading = false;


        const list = await salesRanking(res.data.list)
        this.tableData = list.data
        // console.log(list.data)
        this.total = list.data.length

      },


    }
  }
</script>
<style lang='scss' scoped>
  .pending {
    padding-left: 15px;
  }

  .tab_show {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #fff;
  }

  .filter-container {
    font-size: 12px;
    border: 1px solid #EBEEF5;
    margin-bottom: 20px;

  }

  .formSearch {
    padding: 0 20px;
    height: 60px;
    /* 或者你想要的任何高度 */
    /* 过渡效果 */
    transition: height 0.3s ease-in-out;
    /* 动画的持续时间、类型 */
    overflow: hidden;
    /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */

  }

  .collapsed {
    padding: 0 10px;
    margin-top: 0px;
    height: 0;
    transition: height 0.3s ease-in-out;
    /* 动画的持续时间、类型 */
    overflow: hidden;
    /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */
  }

  ::v-deep .collapsed {
    .el-form--inline .el-form-item {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 0px;
    }

    .el-form-item__label {
      font-size: 12px;
    }
  }

  ::v-deep .formSearch {
    .el-form--inline .el-form-item {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 0px;
    }

    .el-form-item__label {
      font-size: 12px;
    }
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }

  .titleTj {
    width: 100%;
    color: #9C9C9C;
    position: relative;
    margin-bottom: 15px;
  }

  .titleTj::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 4px;
    height: 100%;
    background-color: #14BA99;
  }
</style>
