<!--发票-->
<template>
  <div class="app-center">
    <div class="box-center">
      <div class="box-title">交班统计</div>
      <div class="box-ge">
        <div class="input-box">
          <div>油站名称:</div>
          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.storeName : '未知油站' }}</div>
        </div>
        <div class="input-box">
          <div>收银员:</div>
<!--          <div>{{ handoverList.baseInfo.realName }}</div>-->
          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.realName : '未知姓名' }}</div>
        </div>
        <div class="input-box">
          <div>交班方式:</div>
          <div>门店统一交班</div>
        </div>
        <div class="input-box">
          <div>开始时间:</div>
<!--          <div>{{ handoverList.baseInfo.startTime }}</div>-->
          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.startTime : '/--/' }}</div>

        </div>
        <div class="input-box">
          <div>结束时间:</div>
<!--          <div>{{ handoverList.baseInfo.endTime }}</div>-->
          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.endTime : '/--/' }}</div>

        </div>
      </div>
      <div class="box-ge">
        <div class="input-box">
          <div>当前版本:</div>
          <div>V1.0.1</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">订单汇总</div>
        <div class="input-hui">
          <div>类型</div>
          <div>金额</div>
        </div>
        <div class="input-box">
          <div>油品订单(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilOrder : '0' }}</div>

        </div>
        <div class="input-box">
          <div>油品订单(退款)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilRefund : '0' }}</div>

        </div>
        <div class="input-box">
          <div>油品订单(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilPaid : '0' }}</div>

        </div>
        <div class="input-box">
          <div>油品优惠(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilDiacount : '0' }}</div>

        </div>
<!--        <div class="input-box">-->
<!--          <div>抹零总额(实收)</div>-->
<!--          <div>￥2164.55</div>-->
<!--        </div>-->

        <el-divider></el-divider>
<!--       六个一条线 -->
        <div class="input-box">
          <div>会员储值(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardOrder : '0' }}</div>

        </div>
        <div class="input-box">
          <div>会员储值(退款)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardRefund : '0' }}</div>

        </div>
        <div class="input-box">
          <div>会员储值(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardPaid : '0' }}</div>

        </div>
        <div class="input-box">
          <div>储值赠送(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftOrder : '0' }}</div>

        </div>
        <div class="input-box">
          <div>储值赠送(退款)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftRefund : '0' }}</div>

        </div>
        <div class="input-box">
          <div>储值赠送(实际)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftPaid : '0' }}</div>

        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>存油储值(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelOrder : '0' }}</div>

        </div>
        <div class="input-box">
          <div>存油储值(退款)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelRefund : '0' }}</div>

        </div>
        <div class="input-box">
          <div>存油储值(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelPaid : '0' }}</div>

        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>普通收款(订单)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsOrder : '0' }}</div>

        </div>
        <div class="input-box">
          <div>普通收款(退款)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsRefund : '0' }}</div>

        </div>
        <div class="input-box">
          <div>普通收款(实收)</div>
          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsPaid : '0' }}</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">退款汇总</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>退款金额</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥2164.55</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">实收汇总</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <div class="input-box">
          <div>现金</div>
          <div>￥2164.55</div>
        </div>
        <div class="input-box">
          <div>储值卡</div>
          <div>￥2164.55</div>
        </div>
        <div class="input-box">
          <div>加油金</div>
          <div>￥2164.55</div>
        </div>
        <div class="input-box">
          <div>银行转1</div>
          <div>￥2164.55</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥2164.55</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">油品订单</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <div class="input-box">
          <div>现金</div>
          <div>￥2164.55</div>
        </div>
        <div class="input-box">
          <div>储值卡</div>
          <div>￥2164.55</div>
        </div>
        <div class="input-box">
          <div>加油金</div>
          <div>￥2164.55</div>
        </div>
        <div class="input-box">
          <div>银行转1</div>
          <div>￥2164.55</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥2164.55</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">商品订单</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥0.00</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">普通订单</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥0.00</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">会员储值</div>
        <div class="input-hui">
          <div>支付方式</div>
          <div>金额</div>
        </div>
        <div class="input-box">
          <div>现金</div>
          <div>￥888.88</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥888.88</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">油号统计</div>
        <div class="input-hui-frou">
          <div>油号</div>
          <div>笔数</div>
          <div>升数</div>
          <div style="text-align: right">金额</div>
        </div>
        <div class="input-box-frou">
          <div>92#</div>
          <div>9</div>
          <div>1447.03</div>
          <div style="text-align: right">￥888.88</div>
        </div>
        <div class="input-box-frou">
          <div>92#</div>
          <div>9</div>
          <div>1447.03</div>
          <div style="text-align: right">￥888.88</div>
        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥888.88</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">优惠统计</div>
        <div class="input-hui">
          <div>油品</div>
          <div>金额</div>
        </div>
        <div class="input-box">
          <div>92#</div>
          <div>￥888.88</div>
        </div>
        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥888.88</div>
        </div>
      </div>
      <div class="box-ge">
        <div class="boloicon">油枪统计</div>
        <div class="input-hui-frou">
          <div>油号</div>
          <div>笔数</div>
          <div>升数</div>
          <div style="text-align: right">金额</div>
        </div>
        <div class="input-box-frou">
          <div>一号枪</div>
          <div>9</div>
          <div>1447.03</div>
          <div style="text-align: right">￥888.88</div>
        </div>
        <div class="input-box-frou">
          <div>二号枪</div>
          <div>9</div>
          <div>1447.03</div>
          <div style="text-align: right">￥888.88</div>
        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥888.88</div>
        </div>
      </div>

      <div class="box-ge">
        <div class="boloicon">员工统计</div>
        <div class="input-hui-frou">
          <div>员工姓名</div>
          <div>笔数</div>

          <div style="text-align: right">金额</div>
        </div>
        <div class="input-box-frou">
          <div>一号员工</div>
          <div>9</div>

          <div style="text-align: right">￥888.88</div>
        </div>
        <div class="input-box-frou">
          <div>二号员工</div>
          <div>9</div>

          <div style="text-align: right">￥888.88</div>
        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>合计</div>
          <div>￥888.88</div>
        </div>
      </div>

    </div>
    <div style="width: 100%; height: 100px"></div>
    <div class="app-bottom">
      <el-card >
        <div class="bottom-xz">
          <div class="anniu" @click="shift">交班</div>
          <div class="anniu-lv">云打印</div>
          <div class="anniu-lv">本地打印</div>
          <div ><el-link type="primary" @click="recording">交班记录</el-link></div>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import {addHandoverApi, getHandoverApi} from "@/api/cashier/handover";

    export default {
        name: "Handover",
        data() {
          return {
            handoverList : {},
          }
        },
      created() {
          this.getHandover();
      },
      methods: {
        getHandover() {
          getHandoverApi().then(res=>{
            this.handoverList = res.data;
            console.log("this.handoverList",this.handoverList)
          })
        },

        // 交班记录
        recording() {
          this.$router.push({
            path:'/HandoverDetails',
            query:{
              id:9
            }
          });
        },
        shift() {
          this.$confirm('交班并退出系统, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let recordData = this.handoverList
            let handoverRecord = {
              startTime:this.handoverList.baseInfo.endTime,
              recordData:JSON.stringify(recordData),
              type:0,
              status:0,
            }
            addHandoverApi(handoverRecord).then(res=>{

              console.log("")
            })
            //
            // this.$message({
            //   type: 'success',
            //   message: '删除成功!'
            // });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消交班'
            });
          });
        }
      }

    }
</script>

<style scoped lang="scss">
  .app-center{
    width: 100%;

    box-sizing: border-box;
    padding: 10px;
  }
  .box-center{
    width: 508px;
    height: 85vh;
    background-color: white;
    margin: 10px auto;
    box-sizing: border-box;
    overflow: auto;
  }
  .box-ge{
    border-bottom: 1px solid #ececec ;
    box-sizing: border-box;
    padding: 10px;
  }
  .box-title{
    font-size: 18px;
    text-align: center;
    align-items: center;
    margin-top: 15px;
  }
  .input-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 5px 0px;
  }
  .input-box-frou{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 5px 0px;
    div{
      width: 25%;
      text-align: left;
    }
  }
  .input-hui{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 15px 0px;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 5px 0px;
  }
  .input-hui-frou{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 15px 0px;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 5px 0px;
    div{
      width: 25%;
      text-align: left;
    }
  }
  .boloicon{
    font-weight: bold;
    margin: 10px 0px;
  }
  .app-bottom{
    position: fixed;
    bottom: 0px;
    height: 100px;
    width: 90%;
  }
  .bottom-xz{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .anniu{
    width: 100px;
    height: 40px;
    background: #00afff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50px;
    margin: 0px 15px;
    cursor: pointer;
  }
  .anniu-lv{
    background: #1ab394;
    width: 100px;
    height: 40px;

    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50px;
    margin: 0px 15px;
    cursor: pointer;
  }

</style>
