<!-- 收银台订单-->
<template>
  <div style="margin-top: 0px">
    <el-card class="box-card">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
        <el-form-item label="" prop="deptId" style="width: 180px">
          <el-select
            v-model="queryParams.deptId"
            clearable
            placeholder="所属机构"
          >
            <el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" style="width: 180px">
          <el-input placeholder="请输入商品名称" v-model="queryParams.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="" prop="payChannel" style="width: 180px">
          <el-select
            v-model="queryParams.payChannel"
            clearable
            placeholder="订单类型"
          >
            <el-option label="小程序" value="applet"/>
            <el-option label="收银台" value="cashier"/>
            <el-option label="POS端" value="POS"/>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="payType" style="width: 180px">
          <el-select
            v-model="queryParams.payType"
            clearable
            placeholder="支付方式"
          >
            <el-option label="现金" value="CASH"/>
            <el-option label="微信" value="WECHAT"/>
            <el-option label="支付宝" value="ALIPAY"/>
            <el-option label="余额" value="balance"/>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="status" style="width: 180px">
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="支付状态"
          >
            <el-option label="已支付" value="paid"/>
            <el-option label="未支付" value="unpaid"/>
            <el-option label="已退款" value="refund"/>
          </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="" 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-card>-->
      <!--    <el-card class="box-card">-->
      <div class="table-box">
        <el-table
          :data="orderList"
          style="width: 100%">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="storeName" align="center" label="机构名称"> </el-table-column>
          <el-table-column prop="orderNo" align="center" label="订单号" > </el-table-column>
          <el-table-column prop="payAmount" align="center" label="订单金额（万元）"></el-table-column>
          <el-table-column prop="payChannel" align="center" label="订单类型">
            <template slot-scope="scope">
              <span v-if="scope.row.payChannel=='cashier'">收银台</span>
              <span v-else-if="scope.row.payChannel=='POS'">POS机</span>
              <span v-else-if="scope.row.payChannel=='PC'">平台</span>
              <span v-else-if="scope.row.payChannel=='applet'">小程序</span>
              <span v-else>其他</span>
            </template>
          </el-table-column>
          <el-table-column prop="payType" align="center" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType=='CASH'">现金</span>
              <span v-else-if="scope.row.payType=='WECHAT'">微信</span>
              <span v-else-if="scope.row.payType=='ALIPAY'">支付宝</span>
              <span v-else="">余额</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="center" label="支付状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 'unpaid'">未支付</el-tag>
              <el-tag type="success" v-else-if="scope.row.status == 'paid'">已支付</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status == 'refund'">已退款</el-tag>
              <el-tag type="danger" v-else>支付失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="消费信息">
            <el-table-column prop="cvsGoodsName" align="center" label="商品品类" > </el-table-column>
            <el-table-column prop="goodsName" align="center" label="商品名称" > </el-table-column>
            <el-table-column prop="goodsNum" align="center" label="数量" > </el-table-column>
          </el-table-column>
          <el-table-column prop="mchntCd" align="center" label="支付通道">
          </el-table-column>
          <el-table-column prop="paymentChannel" align="center" label="商户号编码" width="150"> </el-table-column>
          <el-table-column prop="createTime" align="center" label="订单创建时间" > </el-table-column>
          <el-table-column prop="payTime" align="center" label="订单完成时间" >
            <template slot-scope="scope">
              <span v-if="scope.row.payTime">{{scope.row.payTime}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </el-card>

  </div>
</template>

<script>

import {
  exportExcelTradingApi,
  getRunningWaterByTissueApi,
  getTissueByDataApi,
  getTradingPageApi
} from "@/api/allOrder";
import {getDuiZhangGoodsListApi} from "@/api/financialStatement/jiaoyiduizhang";

  export default {
    name: "jiaoyiduizhang-store",
    data(){
      return{
        radio1:"油号选错",
        loading:false,
        dialogVisible:false,
        // 员工列表
        staffList:[],
        ordersInfo:{},
        // 日期范围
        dateRange: [],
        beginTime:"",
        endTime:"",
        // 是否为当天时间
        isSysDate:false,
        // 收银台订单列表
        orderList:[],
        deptList:[],

        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
          beginTime:"",
          endTime:"",
          orderNo:"",
          status:"",
          payType:"",
          payChannel:"",
          deptType:"3",
          storeId:"",
          deptId:"",
        },
        orderStatistics:{
          CASH:"0",
          WECHAT:"0",
          ALIPAY:"0",
          balance:"0",
          CASHCount:"0",
          WECHATCount:"0",
          ALIPAYCount:"0",
          balanceCount:"0",
          refBalance:"0",
          refBalanceCount:"0",
        },
        total:0,
      }
    },
    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.isSysDate = true
      this.getList();
      this.getDeptList();

    },
    methods:{
      getDeptList() {
        getRunningWaterByTissueApi(this.addDateRange(this.queryParams)).then( response => {
          this.deptList = response.data.records;
        })
      },

      // 获取订单统计信息



      // 获取列表信息
      getList(val){
        let dateRange = []
        if (this.beginTime && this.endTime) {
          dateRange.push(this.beginTime.toLocaleDateString())
          dateRange.push(this.endTime.toLocaleDateString())
        }
        getDuiZhangGoodsListApi(this.addDateRange(this.queryParams,dateRange)).then( response => {
          this.orderList = response.data.records;
          this.total = response.data.total;
          this.isSysDate = false
        })
      },
      getOrdersInfo(data) {
        this.dialogVisible = true;
        this.ordersInfo = data
      },
      // 搜索按钮操作
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      // 重置按钮操作
      resetQuery() {
        this.dateRange = [];
        this.queryParams = {
          page: 1,
          pageSize: 10,
        }
        this.beginTime = ""
        this.endTime = ""
        this.handleQuery();
      },
    }
  }
</script>

<style scoped>
.box-card{
  width: 100%;
  margin: 0px 20px 20px 20px;
}

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

.table-box{
  width: 100%;
}

</style>
