<style>
    @import '../../assets/css/customerManage.css';
    *{
        font-family: 'perfectFont';
    }
    .query-box .el-row .el-col{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    .query-box .el-row .el-col span{
        flex-shrink: 0;
    }
    .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;
        font-size: 13px;
    }
    .tis-k{
        width: 10px;
        height: 10px;
        margin-right: 10px;
    }
</style>
<template>
    <div class="customerManage">
        <div class="tools">
            <h1>订单管理</h1>
            <div class="rightmenu">
                <el-button size="mini" type="primary" @click="downLoadExcel">导出</el-button>
            </div>
        </div>
        <div class="query-box">
            <el-row :gutter="20">
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">订单号</span>
                    <el-input size="mini" class="w210" v-model="msg.OrderId" placeholder="订单号" clearable
                        @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">客人姓名</span>
                    <el-input size="mini" class="w210" v-model="msg.GusetName" placeholder="客人姓名" clearable
                        @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">出行概述</span>
                    <el-input size="mini" class="w210" v-model="msg.StartCityName" placeholder="出行概述" clearable
                        @keyup.enter.native="getList"></el-input>
                </el-col>
                <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <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 :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <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 :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <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 :xs="8" :sm="7" :md="6" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">报名开始</span>
                    <el-date-picker
                        v-model="msg.StartTime"
                        @change="getList"
                        size="mini"
                        style="width: 100%;"
                        format="yyyy-MM-dd"
                        type="date"
                        placeholder="开始日期">
                    </el-date-picker>
                </el-col>
                <el-col :xs="8" :sm="7" :md="6" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">报名结束</span>
                    <el-date-picker
                        v-model="msg.EndTime"
                        @change="getList"
                        size="mini"
                        style="width: 100%;"
                        format="yyyy-MM-dd"
                        type="date"
                        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>
        </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="[15, 30, 60, 90, 100]" :page-size="msg.pageSize" layout="total, 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 {
                MultipleChoiceList: [ //多选项目
                    {
                        Name: '机票',
                        Id: '1'
                    }, {
                        Name: '签证',
                        Id: '2'
                    }, {
                        Name: '地接',
                        Id: '3'
                    }, {
                        Name: '套餐',
                        Id: '4'
                    }, {
                        Name: '其他',
                        Id: '5'
                    }
                ],
                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:"2022-04-28",
                    EndTime:""
                },
                ticketingStatusList:[],// 出票状态
                OrderStatusList:[
                    {Name:'正常',Id:'1'},
                    {Name:'取消',Id:'2'}
                ],
                QIsCollectList:[
                    {Name:'不限',Id:'0'},
                    {Name:'已收齐',Id:'1'},
                    {Name:'未收齐',Id:'2'}
                ],
                EmployeeList:[],// 业务员数据
                userInfo:{}
            }
        },
        mounted() {
            this.userInfo = this.getLocalStorage()
            this.msg.EnterID = this.userInfo.EmployeeId
            // erp自动登陆传过来的参数
            if(this.$route.query.erpOrderObj){
                let data = JSON.parse(this.$route.query.erpOrderObj)
                this.msg.OrderId = data.OrderId
            }
            this.Employee() //业务员
            this.GetTicketStatusEnumList() //出票枚举
            let $this = this
            this.MsgBus.$on("closeGetList", function() { 
                $this.getList()
            });
            this.getList()
        },
        methods: {
            // 获取业务员
            Employee() {
                let userInfo = this.getLocalStorage();
                let msg = {
                    RB_Group_id: userInfo.RB_Group_id,
                    BranchId: -1,
                    DepartmentId: 0,
                    PostId: 0,
                    IsLeave: 0,
                };
                this.apipost2(
                    "admin_get_EmployeeGetList",
                    msg,
                    (res) => {
                    if (res.data.resultCode == 1) {
                        this.EmployeeList = res.data.data;
                    } else {
                    }
                    },
                    (err) => {}
                );
            },
            //点击下载
            downLoadExcel() {
                if(!this.msg.StartTime||!this.msg.EndTime){
                    let tips = '请选择开始时间、结束时间！'
                    this.$confirm(tips, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                    }).catch(() => { });
                        return
                    }
                this.GetLocalFile(
                    "/api/Order/GetGuestOrderStatisticsToExcel",
                    this.msg,'订单表.xls'
                );
            },
            // 清空下拉
            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.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 = ''
                                item.actuallyReceived = false
                                item.cost = false
                                item.selectedType = ''
                                item.checkList = []
                                item.MultipleChoiceList = []
                            });
                        };
                        addList(data);
                        data.forEach(item=>{
                            if(item.OrderType){
                                let list = item.OrderType&&item.OrderType.split(',')
                                for(let j=0;j<list.length;j++){
                                    for(let i=0;i<this.MultipleChoiceList.length;i++){
                                        if(list[j]==this.MultipleChoiceList[i].Id){
                                            item.MultipleChoiceList.push(this.MultipleChoiceList[i])
                                        }
                                    }
                                }
                            }
                        })
                        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>