<style>
    @import '../../assets/css/customerManage.css';

    .query-box .el-col-4 {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    /* .query-box .el-col-4>span.font-size-12 {
        flex: 1 !important;
    }

    .query-box .el-col-4>div,
    .query-box .el-col-4>span {
        flex: 4
    }

    .el-table__fixed-body-wrapper table {
        padding-bottom: 8px !important;
    } */
    .statistics{
        background: #fff;
        display: flex;
        justify-content: space-between;
    }
    .statistics-box{
        flex: 1;
        padding: 7px 16px;
        background-color: #DDDEE0;
        display: flex;
        flex-wrap: wrap;
        border-radius: 5px;
        margin-right: 10px;
    }
    .statistics-box:last-child{
        margin-right: 0;
    }
    .statistics-box span:first-child{
        font-weight: bold;
        margin-right: 5px;
        flex-shrink: 0;
    }
    .red{
        color: #F72E52;
    }
    .blue{
        color: #3A7CF7;
    }
    .status-box{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    .status-text{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 15px;
    }
    .tis-k{
        width: 10px;
        height: 10px;
        margin-right: 10px;
    }
</style>
<template>
    <div class="customerManage">
        <div class="tools">
            <h1>订单管理</h1>
        </div>
        <div class="query-box">
            <el-row :gutter="30">
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">订单号</span>
                    <el-input size="mini" class="w210" v-model="msg.OrderId" placeholder="请输入订单号"
                        @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">客人姓名</span>
                    <el-input size="mini" class="w210" v-model="msg.GusetName" placeholder="请输入客人姓名"
                        @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">出发城市</span>
                    <el-input size="mini" class="w210" v-model="msg.StartCityName" placeholder="请输入出发城市"
                        @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">到达城市</span>
                    <el-input size="mini" class="w210" v-model="msg.EndCityName" placeholder="请输入到达城市"
                        @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">业务员</span>
                    <el-input size="mini" class="w210" v-model="msg.EnterID" placeholder="请输入业务员id"
                        @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">出票状态</span>
                    <el-select size="mini" v-model="msg.TicketStatus" @change="getList">
                        <el-option v-for="(item,index) in ticketingStatusList"
                            :key="index"
                            :label="item.Name" :value="item.Id"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">订单状态</span>
                    <el-select size="mini" v-model="msg.OrderStatus" @change="getList">
                        <el-option v-for="(item,index) in OrderStatusList"
                            :key="index"
                            :label="item.Name" :value="item.Id"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">收款状态</span>
                    <el-select size="mini" v-model="msg.Q_IsCollect" @change="getList">
                        <el-option v-for="(item,index) in QIsCollectList"
                            :key="index"
                            :label="item.Name" :value="item.Id"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <span class="font-size-12" style="padding-right: 10px">报名时间</span>
                    <el-date-picker
                        v-model="timeList"
                        @change="getList"
                        size="mini"
                        style="width: 100%;"
                        value-format="yyyy-MM-dd"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-col>
            </el-row>
        </div>
        <div class="statistics">
            <div class="statistics-box">
                <span>应收</span>
                <span>{{StatModel.Money}}</span>
            </div>
            <div class="statistics-box">
                <span>实收</span>
                <span>{{StatModel.IncomeMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>退款</span>
                <span class="red">{{StatModel.BackMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>手续费</span>
                <span>{{StatModel.TaxMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>成本</span>
                <span>{{StatModel.PayMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>待收</span>
                <span>{{StatModel.DueinMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>报名数</span>
                <span class="blue">{{StatModel.NorNumber}}人</span>
            </div>
            <div class="statistics-box">
                <span>取消数</span>
                <span class="red">{{StatModel.CancelNum}}人</span>
            </div>
            <!-- <el-row :gutter="30">
                <el-col :span="3">
                    <div class="statistics-box">
                        <span>应收</span>
                        <span>{{StatModel.Money}}</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="statistics-box">
                        <span>实收</span>
                        <span>{{StatModel.IncomeMoney}}</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="statistics-box">
                        <span>退款</span>
                        <span class="red">{{StatModel.BackMoney}}</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="statistics-box">
                        <span>手续费</span>
                        <span>{{StatModel.TaxMoney}}</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="statistics-box">
                        <span>成本</span>
                        <span>{{StatModel.PayMoney}}</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="statistics-box">
                        <span>待收</span>
                        <span>{{StatModel.DueinMoney}}</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="statistics-box">
                        <span>报名数</span>
                        <span class="blue">{{StatModel.NorNumber}}人</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="statistics-box">
                        <span>取消数</span>
                        <span class="red">{{StatModel.CancelNum}}人</span>
                    </div>
                </el-col>   
            </el-row> -->
        </div>
        <div class="query-box status-box">
            <!-- <div class="status-text">
                <div class="tis-k" style="background: #2961FE"></div>
                <span>已打单</span>
            </div>
            <div class="status-text">
                <div class="tis-k" style="background: #F28C1D"></div>
                <span>银行出纳已审核</span>
            </div>
            <div class="status-text">
                <div class="tis-k" style="background: #3FC4FF"></div>
                <span>已通过</span>
            </div> -->
        </div>
        <orderList :dataList="dataList" :loading="loading" @emptyMore="emptyMore"></orderList>
        <div>
            <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
                :page-sizes="[30, 60, 90, 100]" :page-size="msg.pageSize" layout="sizes, prev, pager, next"
                @size-change="handleSizeChange" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import orderList from "./orderList";
    export default {
        components: {
            orderList
        },
        data() {
            return {
                StatModel:{},// 合计
                loading:false,
                total:0,
                dataList:[],
                timeList:[],//时间
                msg: {
                    pageIndex: 1,
                    pageSize: 15,
                    OrderId:"",//订单id
                    GusetName:"",//客人姓名
                    GuestId:"",//客人id
                    StartCityName:"",//出发城市
                    EndCityName:"",//到达城市
                    EnterID:"",//业务员id
                    TicketStatus:"0",//出票状态
                    OrderStatus:"1",//订单状态
                    Q_IsCollect:"0",//收款状态
                    StartTime:"",
                    EndTime:""
                },
                ticketingStatusList:[],// 出票状态
                OrderStatusList:[
                    {Name:'正常',Id:'1'},
                    {Name:'取消',Id:'2'}
                ],
                QIsCollectList:[
                    {Name:'不限',Id:'0'},
                    {Name:'已收齐',Id:'1'},
                    {Name:'未收齐',Id:'2'}
                ]
            }
        },
        mounted() {
            this.GetTicketStatusEnumList()
            this.getList()
        },
        methods: {
            // 清空下拉
            emptyMore(){
                this.dataList.forEach(item=>{
                    return item.More = ''
                })
            },
            // 获取出票状态枚举
            GetTicketStatusEnumList(){
                this.apipost(
                    "/api/Order/GetTicketStatusEnumList",
                    {},
                    (res) => {
                    if (res.data.resultCode == 1) {
                        this.ticketingStatusList = res.data.data;
                        let data = {
                        Name:'全部',
                        Id:'0'
                        }
                        this.ticketingStatusList.unshift(data)
                    } else {
                        this.$message.error(res.data.message);
                    }
                    }
                );
            },
            getList(){
                this.loading = true;
                this.msg.StartTime = this.timeList[0]
                this.msg.EndTime = this.timeList[1]
                this.apipost(
                    "/api/Order/GetGuestOrderStatisticsPageList",
                    this.msg,
                    (res) => {
                    if (res.data.resultCode == 1) {
                        let data = res.data.data.Data.pageData;
                        let addList = function(arr) {
                        arr.forEach(item => {
                            item.More = ''
                        });
                        };
                        addList(data);
                        this.dataList = res.data.data.Data.pageData;
                        this.total = res.data.data.Data.count;
                        this.StatModel =  res.data.data.StatModel
                        this.loading = false
                    } else {
                        this.$message.error(res.data.message);
                    }
                }
                );
            },
            handleSizeChange(val) {
                this.msg.pageSize = val
                this.getList();
            },
            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
        }
    }
</script>