<script>
import {listStaff,getHandoverListApi} from "@/api/handover/handover";
import HandoverDetailsInfo from "@/views/cashier/NewComponents/HandoverDetailsInfo.vue";

export default {
  name: "HandoverRecord",
  components: {HandoverDetailsInfo},
  data() {
    return {
      // 查看详情
      openSeeDetails:false,
      // 交易明细
      openTransactionDetail:false,
      // 商品汇总
      openGoodsSum:false,
      tabs:[
        "交接班",
        "交班记录"
      ],
      value:'',
      tabindex:0,
      openDetail:false,
      dataForm:{},
      dataList:[],
      recordData:'',
      zhztList:'',
      shiftHandoverList:'',
      tableData: [{
        date: '--',
      }],
      queryParams: {

        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:[],
      oilNumberStatistics:[],
      goodsNumberStatistics:[],
      IntegerNumberStatistics:[],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    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
        this.dataList.forEach(res=>{
          let data = JSON.parse(res.recordData)
          let orderSummary = data.orderSummary
          res.oilOrder = orderSummary.oilOrder?orderSummary.oilOrder:'0' // 订单金额
          res.allDis = orderSummary.allDis?orderSummary.allDis :'0'    // 优惠金额
          res.allMoney = orderSummary.allMoney?orderSummary.allMoney :'0'        // 实收金额
          res.oilRefund = orderSummary.oilRefund?orderSummary.oilRefund :'0'       // 退款金额
        })
      })
    },
    getHandoverData(data) {
      JSON.parse(this.data)
    },
    handleQuery(){
      this.getList();

    },
    resetQuery(){
      this.queryParams = {
        giftName: '',
        status: '',
        mobile: '',
        orderNumber: '',
        page:1,
        pageSize:10
      },
        this.dateRange = []
      this.beginTime = "";
      this.endTime = ""
      this.getList();
    },
    getStaffList() {
      listStaff(this.addDateRange({  page: 1,
        pageSize: 10000})).then(response => {
          this.staffList = response.data.records;

        }
      );
    },
    transactionDetailMethod2(data) {
      console.log("transactionDetailMethod2",data)
      this.openGoodsSum = true
      let info = JSON.parse(data.recordData);
      this.oilNumberStatistics = info.oilNumberStatistics;
      this.goodsNumberStatistics = info.goodsNumberStatistics;
      this.IntegerNumberStatistics = info.IntegerNumberStatistics;
      console.in
      console.log("data",data)
    },
    openSeeDetailsMethods(data) {
      this.openSeeDetails = true;
      console.log("data")
      this.recordData = data.recordData
    },
    transactionDetailMethod(data) {
      console.log("transactionDetailMethod",data)
      this.$router.push({
        name: 'handover-info',
        params: {
          staffId : data.staffId,
          btime : data.startTime,
          etime : data.endTime,
        }

        //   PinventoryId: data.id,
        //   PorderNumber: data.orderNumber,
        //   PorderDate: data.orderDate,
        //   PapprovalStatus: data.approvalStatus,
        //   PcreataByName: data.createByName
        // },

      });
    }
  }
}
</script>

<template>
<div class="">
  <div class="table-boxs">
    <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>
          <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>
          <el-option
            v-for="option in staffList"
            :key="option.id"
            :label="option.realName"
            :value="option.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker
          v-model="beginTime"
          style="width: 140px"
          type="date"
          placeholder="交易开始日期">
        </el-date-picker>
        至
        <el-date-picker
          v-model="endTime"
          style="width: 140px"
          type="date"
          placeholder="交易结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="flex-container" style="float: right">
        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column type="index" width="50" align="center" label="序号"/>
      <el-table-column width="100" align="center" prop="staffName" label="交班人员"></el-table-column>
      <el-table-column width="120" align="center" prop="status" label="交班方式"></el-table-column>
      <el-table-column align="center" prop="startTime" label="开始时间"></el-table-column>
      <el-table-column align="center" prop="endTime" label="结束时间"></el-table-column>
      <el-table-column align="center" prop="oilOrder" label="订单金额" width="80"></el-table-column>
      <el-table-column align="center" prop="allDis" label="优惠金额" width="80"></el-table-column>
      <el-table-column align="center" prop="allMoney" label="实收金额" width="80"></el-table-column>
      <el-table-column align="center" prop="oilRefund" label="退款金额" width="80"></el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" align="center"  fixed='right'>
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="openSeeDetailsMethods(scope.row)">查看详情</el-button>
          <el-button size="mini" type="text" @click="transactionDetailMethod(scope.row)">交易明细</el-button>
          <el-button size="mini" type="text" @click="transactionDetailMethod2(scope.row)">商品汇总</el-button>
          <el-button size="mini" type="text">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
  <el-dialog title="查看详情" :visible.sync="openSeeDetails" width="600px" append-to-body :close-on-click-modal="false">
    <HandoverDetailsInfo :recordData="recordData"></HandoverDetailsInfo>
  </el-dialog>

<!--  <el-dialog title="交易明细" :visible.sync="openTransactionDetail" width="600px" append-to-body :close-on-click-modal="false">-->

<!--  </el-dialog>-->
  <el-dialog title="商品汇总" :visible.sync="openGoodsSum" width="600px" append-to-body :close-on-click-modal="false">
      <div>
        <div>油品交易信息</div>
        <div>
          <el-table :data="oilNumberStatistics" style="width: 100%" border>
            <el-table-column align="center" prop="oilName" label="油品油号" ></el-table-column>
            <el-table-column align="center" prop="oilNum" label="销售数量" ></el-table-column>
            <el-table-column align="center" prop="orderAmount" label="订单金额" ></el-table-column>
            <el-table-column align="center" prop="paidAmount" label="实收金额" ></el-table-column>
          </el-table>
        </div>
      </div>
    <div>
      <div>便利店交易信息</div>
      <div>
        <el-table :data="goodsNumberStatistics" style="width: 100%" border>
          <el-table-column align="center" prop="goodsName" label="商品名称" ></el-table-column>
          <el-table-column align="center" prop="goodsNumber" label="销售数量" ></el-table-column>
          <el-table-column align="center" prop="goodsAmount" label="订单金额" ></el-table-column>
          <el-table-column align="center" prop="amount" label="实收金额" ></el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <div >积分商城兑换信息</div>
      <div>
        <el-table :data="IntegerNumberStatistics" style="width: 100%" border>
          <el-table-column align="center" prop="giftName" label="商品名称" ></el-table-column>
          <el-table-column align="center" prop="exchangeQuantity" label="兑换数量" ></el-table-column>
          <el-table-column align="center" prop="integrals" label="消耗积分" ></el-table-column>
          <el-table-column align="center" prop="amount" label="实收金额" ></el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</div>
</template>

<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;

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

  padding: 15px;
}
</style>
