<template>
  <div class="app-containers">

    <div class="tab-box">
      <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"
           :key="index">
        {{ item }}
      </div>
    </div>
    <div v-if="tabindex == 0">
      <div class="card-box"
           style="width: 98%;margin: 10px auto;background: #fff;box-sizing: border-box;padding-top: 15px">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="" prop="status">
            <el-select v-model="queryParams.status" style="width: 150px" placeholder="交班方式" clearable
                       @change="onChange">
              <el-option label="统一交班" value="统一交班">统一交班</el-option>
              <el-option label="个人交班" value="个人交班">个人交班</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="staffId">
            <el-select v-model="queryParams.staffId" style="width: 150px" placeholder="交班员工" clearable @change="onChange2">
              <el-option
                v-for="option in staffList"
                :key="option.id"
                :label="option.realName"
                :value="option.id"
                :disabled="queryParams.status === '统一交班'"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="flex-container" style="float: right">
            <el-button type="primary" icon="el-icon-search" :disabled="!isSearch" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-card style="margin-top: 20px; padding-top:  0px; height: 70vh;overflow: auto" class="box-card">
        <div class="title_" style="height: 50px; padding-top: 20px; background-color: white; display: flex;justify-content: space-between">
          <div style="width: 80%;margin-left: 50px">门店交接单</div>
          <span style="cursor: pointer; color: blue;font-weight: 400;" >打印预览</span>
        </div>
        <div class="d-s-b">
          <div>油站名称</div>
          <div>{{ baseInfo.storeName }}</div>
        </div>
        <div class="d-s-b">
          <div>油站站长</div>
          <div>{{ baseInfo.realName }}</div>
        </div>
        <div class="d-s-b">
          <div>交班方式</div>
          <div>{{ baseInfo.handoverType }}</div>
        </div>
        <div class="d-s-b">
          <div>开始时间</div>
          <div>{{ baseInfo.startTime }}</div>
        </div>
        <div class="d-s-b">
          <div>结束时间</div>
          <div>{{ baseInfo.endTime }}</div>
        </div>
        <div class="d-s-b">
          <div>订单金额</div>
          <div>{{ orderSummary.oilOrder }}</div>
        </div>
        <div class="d-s-b">
          <div>优惠金额</div>
          <div>{{ orderSummary.allDis }}</div>
        </div>
        <div class="d-s-b">
          <div>退款金额</div>
          <div>{{ orderSummary.oilRefund }}</div>
        </div>
        <div class="d-s-b">
          <div>挂账金额</div>
          <div>--</div>
        </div>
        <div class="d-s-b">
          <div>会员消费</div>
          <div>{{ orderSummary.allBalanceP }}</div>
        </div>
        <div class="d-s-b">
          <div>实收金额</div>
          <div>{{ orderSummary.allMoney }}</div>
        </div>
        <div class="d-s-b">
          <div>充值金额</div>
          <div>{{ orderSummary.cardPaid }}</div>
        </div>
        <div class="d-s-b">
          <div>充值赠送</div>
          <div>{{ orderSummary.cardGiftPaid }}</div>
        </div>
        <div class="d-s-b">
          <div>会员总余额</div>
          <div>{{ orderSummary.points }}</div>
        </div>
        <div class="d-s-b">
          <div>会员总积分</div>
          <div>{{ orderSummary.sumnum }}</div>
        </div>
        <div class="xxing"></div>
        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>营业收入统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">类型</div>
            <div class="f-size">订单金额</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b">
            <div class="l-size">营业总额</div>
            <div class="s-size">{{ orderSummary.allyingye1 }}</div>
            <div class="r-size">￥{{ orderSummary.allyingye }}</div>
          </div>
          <div class="d-s-b">
            <div class="l-size">充值总额</div>
            <div class="s-size">{{ orderSummary.allchuzhika1 }}</div>
            <div class="r-size">￥{{ orderSummary.allchuzhika }}</div>
          </div>
          <div class="d-s-b">
            <div class="l-size">合计</div>
            <div class="s-size">{{ orderSummary.allyingye1 + orderSummary.allchuzhika1 }}</div>
            <div class="r-size">￥{{ orderSummary.allyingye + orderSummary.allchuzhika }}</div>
          </div>
        </div>


        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>支付方式统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all'">
            <div class="l-size">{{ calculateThePaymentMethod(item.payType) }}</div>
            <div class="s-size">{{ item.numberOfDeals }}</div>
            <div class="r-size">￥{{ item.paidAmount }}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>油品实收统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">油号</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in oilNumberStatistics">
            <div class="l-size">{{ item.oilName }}</div>
            <div class="s-size">{{ item.numberOfDeals }}</div>
            <div class="r-size">￥{{ item.paidAmount }}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>优惠统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">油号</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in oilNumberStatistics">
            <div class="l-size">{{ item.oilName }}</div>
            <div class="s-size">{{ item.numberOfDeals }}</div>
            <div class="r-size">￥{{ item.paidAmount }}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>退款统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">类型</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in oilNumberStatistics">
            <div class="l-size">{{ item.oilName }}</div>
            <div class="s-size">{{ item.numberOfDeals }}</div>
            <div class="r-size">￥{{ item.paidAmount }}</div>
          </div>
        </div>


        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>挂账统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">挂账单位</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all' && item.payType == 'balance'">
            <div class="l-size">{{ item.name }}</div>
            <div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
            <div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>会员充值统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'allbalance'">
            <div class="l-size">{{ calculateThePaymentMethod(item.payType) }}</div>
            <div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
            <div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>会员消费统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all' && item.payType == 'balance'">
            <div class="l-size">合计</div>
            <div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
            <div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>便利店统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'goods'">
            <div class="l-size">{{ calculateThePaymentMethod(item.payType) }}</div>
            <div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
            <div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
          </div>
        </div>
        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>积分商城统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'point'">
            <div class="l-size">{{ calculateThePaymentMethod(item.payType) }}</div>
            <div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
            <div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
          </div>
        </div>
        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>新增会员统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">新增会员数</div>
            <!--          <div class="f-size">笔数</div>-->
            <div class="r-size">{{ orderSummary.sumnum }}</div>
          </div>

        </div>


        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>挂账归还统计(再处理)</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">支付方式</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in returnedToTheAccount">
            <div class="l-size">{{ item.name ? item.name : '--' }}</div>
            <div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
            <div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
          </div>
        </div>

        <div class="for-box">
          <div class="for-title">
            <div class="x-"></div>
            <div>员工实收统计</div>
            <div class="x-"></div>
          </div>
          <div class="d-s-b" style="font-weight: 600">
            <div class="l-size">员工</div>
            <div class="f-size">笔数</div>
            <div class="r-size">实收金额</div>
          </div>
          <div class="d-s-b" v-for="item in employeeStatistics">
            <div class="l-size">{{ item.name ? item.name : '--' }}</div>
            <div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
            <div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
          </div>
        </div>

      </el-card>
      <div
        style="width: 98%; margin: 20px auto;display: flex;align-items: center;justify-content: center; background: #fff;box-sizing: border-box;padding: 15px ">
        <el-button type="primary" @click="shift()">交班</el-button>
      </div>
    </div>
    <div v-if="tabindex == 1">
      <HandoverRecord></HandoverRecord>
    </div>
    <el-dialog title="订单详情" :visible.sync="openDetail" width="600px" append-to-body :close-on-click-modal="false">
      <!--      <detail :dataForm = "recordData"></detail>-->
      <HandoverOnly :recordData="recordData"></HandoverOnly>
    </el-dialog>
  </div>
</template>
<script>
import {
  addHandoverApi,
  getHandoverApi,
  getHandoverApi2,
  getHandoverListApi,
  printLocallyApi
} from "@/api/handover/handover";

import {getStatisticsApi} from "@/api/order/order";
import {getDicts} from "@/api/order/data";
import HandoverOnly from "@/views/handover/HandoverOnly.vue";
import {listStaff} from "@/api/order/staff";
import HandoverRecord from "@/views/handover/HandoverRecord.vue";

export default {
  name: "pointsCashier",
  components: {HandoverRecord, HandoverOnly},

  // dicts: ['zhzt'],

  data() {
    return {

      tabs: [
        "交接班",
        "交班记录"
      ],
      isSearch: true,
      value: '',
      tabindex: 0,
      openDetail: false,
      dataForm: {},
      dataList: [],
      recordData: '',
      zhztList: '',
      shiftHandoverList: '',
      handoverList: {},
      handoverData: {},
      baseInfo: {},
      billingDetails: [],
      employeeStatistics: [],
      greaseGunStatistics: [],
      oilNumberStatistics: [],
      orderSummary: {},
      paymentAggregation: [],
      returnedToTheAccount: [],
      // base
      queryParams: {

        staffId: '',
        status: '',
        type: '',

        page: null,
        pageSize: null
      },
      loading: false,
      dateRange: [new Date(), new Date()],
      beginTime: new Date(),
      endTime: new Date(),
      defaultSort: {prop: 'createTime', order: 'descending'},

      total: 0,
      staffList: [],
      statisticsForm: {
        num: 0,
        exchangeQuantity: 0,
        integral: 0,
        amount: 0
      }
    }
  },
  created() {
    this.getList();
    this.getHandover();
    this.getStatistics();
    this.getStatus();
    this.getStaffList();
  },
  mounted() {
    this.queryParams.status = '统一交班';
  },
  methods: {
    getHandover() {
      console.log("getHandover", this.queryParams)
      getHandoverApi2(this.queryParams).then(res => {
        // this.handoverList = res.data;
        this.handoverData = res.data;
        this.baseInfo = this.handoverData.baseInfo,
          this.billingDetails = this.handoverData.billingDetails,
          this.employeeStatistics = this.handoverData.employeeStatistics,
          this.greaseGunStatistics = this.handoverData.greaseGunStatistics,
          this.oilNumberStatistics = this.handoverData.oilNumberStatistics,
          this.orderSummary = this.handoverData.orderSummary,
          this.paymentAggregation = this.handoverData.paymentAggregation,
          this.returnedToTheAccount = this.handoverData.returnedToTheAccount,
          console.log("this.handoverList", this.handoverList)
      })
    },
    onChange() {
      if (this.queryParams.status == '统一交班') {
        this.queryParams.staffId = ''
        this.isSearch = true
      } else if (this.queryParams.status == '个人交班') {
        this.isSearch = false
      }
    },
    onChange2() {
      console.log("this.queryParams.staffId", this.queryParams.staffId)
      if (!this.queryParams.staffId) {
        this.isSearch = false
      } else if (this.queryParams.staffId) {
        this.isSearch = true
      }
    },

    getindex(index) {
      this.tabindex = index
    },
    getList() {
      this.dateRange = []
      if (this.beginTime && this.endTime) {
        this.dateRange.push(this.beginTime.toLocaleDateString())
        this.dateRange.push(this.endTime.toLocaleDateString())
      }
      getHandoverListApi(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
        this.dataList = res.data.records
        this.total = res.data.total

      })
    },
    getStatistics() {
      getStatisticsApi().then(res => {
        this.statisticsForm = res.data
      })
      console.log("123123123", this.statisticsForm)
    },

    // 获取支付方式
    getZhzt() {
      getDicts("zhzt").then(response => {
        this.zhztList = response.data;
      })
    },
    getStatus() {
      getDicts("handover").then(response => {
        this.shiftHandoverList = response.data;
      })
    },
// 交班
    async shift() {
      let msg = '交班, 是否继续?'
      let flag = false
      if (this.handoverList && this.baseInfo && this.baseInfo.handoverOut == 'jbtc') {
        flag = true
      } else {
        msg = '确定交班？'
      }

      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let recordData = this.handoverData
        let handoverRecord = {
          startTime: this.baseInfo.startTime,
          recordData: JSON.stringify(recordData),
          type: 0,
          status: this.baseInfo.handoverType,
          staffId: this.queryParams.staffId
        }
        addHandoverApi(handoverRecord).then(res => {
          if (flag) {
            this.clean()
            // removeUserId();
            // this.$store.dispatch('LogOut').then(() => {
            //   location.href = '/';
            // })
          }
          this.getHandover();
        })
      })
    },
    handleUpdate() {
    },
    handleQuery() {
      this.getList();
      this.getHandover();
    },
    getStaffList() {
      listStaff(this.addDateRange({
        page: 1,
        pageSize: 10000
      })).then(response => {
          this.staffList = response.data.records;

        }
      );
    },
    resetQuery() {
      this.queryParams = {
        giftName: '',
        status: '',
        mobile: '',
        orderNumber: '',
        page: 1,
        pageSize: 10
      },
        this.queryParams.staffId = ''
        this.dateRange = []
      this.beginTime = "";
      this.endTime = ""
      this.queryParams.status = '统一交班';
      this.getList();
      this.getHandover();
    },
    printLocally(data) {
      printLocallyApi(data).then(res => {

      })
    },
    handleDetail(data) {
      this.openDetail = true
      this.recordData = data.recordData;
      // JSON.parse(this.recordData )
      console.log("data.recordData;", this.recordData)

    },
    goToAbout() {
      this.$router.push({
        path: '/Handover',
        query: {
          id: 9
        }
      });
    },
    billingDetails1() {
      let count = [];
      if (this.billingDetails) {
        return this.billingDetails
      }
      return count;
    },
    calculateThePaymentMethod(payType) {
      switch (payType) {
        case 'ALIPAY':
          return '支付宝'
          break;
        case 'WECHAT':
          return '微信'
          break;
        case 'UNIONPAY':
          return '银联二维码'
          break;
        case 'CASH':
          return '现金'
          break;
        case 'balance':
          return '余额'
          break;
        case 'oilCard':
          return '油卡'
          break;
      }
      return '未知'
    },
  }
}
</script>

<style scoped lang="scss">
.app-containers {
  width: 100%;
  height: 100vh;
  background: #f6f8f9;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.tab-box {
  width: 100%;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 0px 25px;
  margin-bottom: 25px;

}

.box_ {
  height: 100%;
  border-bottom: 2px solid #fe9554;
}

.box {
  padding: 10px;
  height: 80px;
  width: 150px;
  margin-right: 0px;
  background-color: rgba(204, 204, 204, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
}

.box-card {
  width: 640px;
  margin: 0 auto;
  margin-bottom: 15px;

}

.font-chinese {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 1.5
}

.font-number {
  font-size: 20px;
  font-family: PingFang SC, sans-serif;
  font-weight: bold;
  line-height: 1.3
}

.table-box {
  width: 100%;
}

.flex-container1 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap; /* 确保不换行 */
  width: 100%; /* 让父容器占满可用宽度 */
}

.el-form--inline .el-form-item {
  margin-right: 44px;
}

.tab-box {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 25px;

}

.tab_ {
  width: 75px;
  height: 100%;
  //border-bottom: 2px solid #FF770F;
  display: flex;
  font-weight: 500;
  font-size: 14px;
  color: #999999;
  align-items: center;
  justify-content: center;
  margin-left: 50px;
  cursor: pointer;
}

.active {
  border-bottom: 2px solid #FF770F !important;
  color: #FF770F !important;
}

.title_ {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
}

.d-s-b {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin: 20px auto;
}

.xxing {
  width: 100%;
  border-bottom: 1px solid #EEEEEE;
}

.for-box {
  width: 100%;
  margin: 20px auto;
}

.for-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #333333;

}

.x- {
  width: 100px;
  border-bottom: 1px solid #EEEEEE;
  margin: 0 15px;
}

.f-size {
  width: 33%;
  text-align: center;
  //font-weight: 600;
  //font-size: 16px;
  color: #333333;
}

.s-size {
  width: 33%;
  text-align: center;
}

.l-size {
  width: 33%;
  text-align: left;
}

.r-size {
  width: 33%;
  text-align: right;
}

.bottom- {
  width: 98%;
}

.table-boxs {
  border-radius: 8px;
  width: 98%;
  background: #fff;
  margin: 25px auto;
  box-sizing: border-box;

  padding: 15px;
}
</style>
