<!-- 收银台订单-->
<template>
  <div class="container" >

    <div class="wgang">
      <div style="display: flex;align-items: center ">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
          <el-form-item label="">

            <el-date-picker
              v-model="beginTime"
              style="width: 140px"
              type="date"
              @change="getDays()"
              placeholder="开始日期">
            </el-date-picker>
            至
            <el-date-picker
              v-model="endTime"
              style="width: 140px"
              type="date"
              @change="getDays()"
              placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <div class="wit_box">
      <div class="box-gang">
        <div class="box">
          <el-tooltip class="item" effect="dark" content="999999/999999999999" placement="top-start">
            <div class="size-bole"  style="color: #0DC291">0</div>
          </el-tooltip>
          <div class="size-hui">
            <div class="dian" style="background: #0DC291"></div>
            <div class="nei">总加油升数</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="999999/999999999999" placement="top-start">
            <div class="size-bole" style="color:#00CAFF;">0</div>
          </el-tooltip>

          <div class="size-hui">
            <div class="dian" style="background: #00CAFF"></div>
            <div class="nei">总加油笔数（元）</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="999999/999999999999" placement="top-start">
            <div class="size-bole" style="color:#F44522;" >0</div>
          </el-tooltip>

          <div class="size-hui">
            <div class="dian" style="background: #F44522"></div>
            <div class="nei">订单总金额（元）</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="999999/999999999999" placement="top-start">
            <div class="size-bole"  style="color:#FF7E00;" >0</div>
          </el-tooltip>

          <div class="size-hui">
            <div class="dian" style="background: #FF7E00"></div>
            <div class="nei">优惠总金额（元）</div>
          </div>
        </div>

        <div class="box">
          <el-tooltip class="item" effect="dark" content="999999/999999999999" placement="top-start">
            <div class="size-bole"  style="color:#E05295;" >0</div>
          </el-tooltip>
          <div class="size-hui">
            <div class="dian" style="background: #E05295"></div>
            <div class="nei">实收总金额（元）</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="999999/999999999999" placement="top-start">
            <div class="size-bole"  style="color:#0047FF;" >0</div>
          </el-tooltip>
          <div class="size-hui">
            <div class="dian" style="background: #0047FF"></div>
            <div class="nei">退款总金额</div>
          </div>
        </div>
      </div>


      <div class="table-box">
        <el-table
          :data="orderList"
          border
          style="width: 100%;margin-top: 15px">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="content" align="center" label="油品油号"> </el-table-column>
          <el-table-column prop="content" align="center" label="加油升数（元）"> </el-table-column>
          <el-table-column prop="content" align="center" label="加油笔数"> </el-table-column>
          <el-table-column prop="content" align="center" label="订单金额（元）"> </el-table-column>
          <el-table-column prop="content" align="center" label="优惠金额（元）"> </el-table-column>
          <el-table-column prop="content" align="center" label="退款金额（元）"> </el-table-column>
          <el-table-column prop="content" align="center" label="实收金额（元）"> </el-table-column>
          <el-table-column prop="content" align="center" label="统计周期"> </el-table-column>
<!--          <div slot="empty" class="empty">-->
<!--            <el-empty description="暂无数据"></el-empty>-->
<!--          </div>-->
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination
          background
          v-show="total>0"
          layout="prev, pager, next"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @current-change="getList">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>

import {
  getInstituionListApi,
  getRunningWaterByDataApi,
  exportExcelOilDeptApi,
  getmyDataApi,
  getInstituionListApi2
} from "@/api/allOrder";

export default {
  name: "runningWater-oilDepot",
  data(){
    return{
      loading:false,
      // 员工列表
      staffList:[],
      // 日期范围
      dateRange: [],
      beginTime:"",
      endTime:"",
      // 是否为当天时间
      isSysDate:false,
      // 收银台订单列表
      orderList:[],
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        beginTime:"",
        endTime:"",
        deptType:"3",

      },
      orderStatistics:{
        numberOfStrokes:'0',
        theTotalAmountOfTheOrder:'0',
        theTotalAmountPaid:'0',
        oilDiscounts:'0',
        theTotalAmountOfOil:'0',
        theTotalAmountOfTheItem:'0',
      },
      total:0,
      timeDifference:1,
    }
  },
  async created() {
    let start = new Date();
    start.setHours(0)
    start.setMinutes(0)
    start.setSeconds(0)
    start.setMilliseconds(0)
    this.dateRange = [start,new Date()];
    this.beginTime = start
    this.endTime = new Date()

    this.timeDifferenceMilliseconds = this.endTime - this.beginTime;
    this.timeDifference = timeDifferenceMilliseconds / (1000 * 60 * 60 * 24);

    console.log("timeDifference",this.timeDifference)
    this.isSysDate = true
    await this.getDeptList();
    this.getList();

  },
  methods:{
    getDays(){

      this.timeDifferenceMilliseconds = this.endTime - this.beginTime;
      this.timeDifference = timeDifferenceMilliseconds / (1000 * 60 * 60 * 24);
      console.log("timeDifference",this.timeDifference)

    },
    exportExcelCashier() {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      exportExcelOilDeptApi(this.addDateRange(this.queryParams, dateRange)).then(res=>{
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        this.$download.saveAs(blob,'油站流水订单统计.xLsx')
      })
    },
    // 获取订单统计信息

    getOrderStatistics() {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      getRunningWaterByDataApi(this.addDateRange(this.queryParams, dateRange)).then(res=>{
        this.orderStatistics = res.data
      })
    },
    async getDeptList() {
      await getmyDataApi(this.addDateRange(this.queryParams)).then( response => {
        this.queryParams.deptId = response.data.deptId;
      })
    },

    // 获取列表信息
    getList(val){
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      getInstituionListApi2(this.addDateRange(this.queryParams,dateRange)).then( response => {
        this.orderList = response.data.records;
        this.total = response.data.total;
        this.isSysDate = false
      })
      this.getOrderStatistics()
    },

    // 搜索按钮操作
    async handleQuery() {
      this.queryParams.page = 1;
      await this.getDeptList();
      this.getList();
    },
    // 重置按钮操作

    async resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        page: 1,
        pageSize: 10,
        deptType:"3",

      }
      this.beginTime = ""
      this.endTime = ""
      await this.getDeptList()
      this.handleQuery();
    },
  }
}
</script>

<style scoped lang="scss">
.container{
  background: #f4f5f9;
  box-sizing: border-box;
  padding-bottom: 10px;
}
.app-top{
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 10px;
}
.clearfix{
  width: 100%;

}
.box-card{
  width: 100%;
  margin-bottom: 15px;
}
.card-chan{
  width: 98%;
  background: #fff;

  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
}

.box-gang{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box{
  padding: 5px;
  padding-left: 20px;
  width: 275px;
  height: 60px;
  background:#fff;
  border-radius: 10px;
  border: 1px solid #FF9655;
  margin-right: 15px;
}
.el-form--inline .el-form-item {
  margin-right: 44px;
  margin-bottom: 0px;
}
.size-hui{
  display: flex;
  align-items: center;
  //width: 200px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 13px;
  color: #888888;
  //line-height: 0px;
  text-align: left;
  font-style: normal;
  text-transform: none;

}
.size-bole{
  height: 31px;
  //font-family: YouSheBiaoTiHei;
  font-weight: 600;
  font-size: 24px;
  color: #555555;
  //line-height: 0px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.wgang{
  width: 98%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;

}
.table-box{
  width: 100%;
  height: 58vh;
  overflow: auto;
}
.wit_box{
  width: 98%;
  background: #FFFFFF;
  margin: 5px auto;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 4px;
  height: 80vh;
}
.pagination-box{
  width: 100%;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-app-sou{
  width: 20%;
}
.tk{
  text-align: center;
  color: grey;
  margin: 10px 0;
}
.icon-img{
  //margin-left: 110px;
  width: 100%;
  height: 20px;
  margin-right: 5px;
  img{
    float: right;
    //width: 100%;
    width: 20px;
    height: 100%;
  }
}
.dian{
  width: 6px;
  height: 6px;
  border-radius: 8px;
  margin-right: 5px;
}
</style>
