<#include "/incloud/header.ftl"/>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<@header>
</@header>
<script src="/js/xlsx.full.min.js"></script>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <@top></@top>
    <@left></@left>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                订单管理
                <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                <li class="active">Here</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content container-fluid" id="app">
            <div class="box-body">
                <!--查询区域-->
                <div class="query" style="    text-align: left;">
                    <el-form :inline="true" :model="con" class="demo-form-inline">
                     	 <el-form-item label="下单日期" :label-width="queryLabelWidth">
		                    <el-date-picker
						      v-model="tempCon.orderTime"
						      type="datetimerange"
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期"
                              value-format = "yyyy-MM-dd HH:mm:ss">
						    </el-date-picker>
					    </el-form-item>
                        <el-form-item label="游玩日期" :label-width="queryLabelWidth">
                            <el-date-picker
                                    v-model="tempCon.playTime"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format = "yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="流水号" :label-width="myQueryLabelWidth">
                            <el-input v-model="con.orderNo" placeholder="流水号"></el-input>
                        </el-form-item>
                        <el-form-item label="订单号" :label-width="myQueryLabelWidth">
                            <el-input v-model="con.distOrderNo" placeholder="订单号"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" :label-width="myQueryLabelWidth">
                            <el-input v-model="con.buyIdCard" placeholder="身份证"></el-input>
                        </el-form-item>
                        <el-form-item label="支付人电话" :label-width="myQueryLabelWidth">
                            <el-input v-model="con.buyPhone" placeholder="支付人电话"></el-input>
                        </el-form-item>
                        <el-form-item label="支付人姓名" :label-width="myQueryLabelWidth">
                            <el-input v-model="con.buyUserName" placeholder="支付人姓名"></el-input>
                        </el-form-item>
					    <el-form-item label="订单状态" :label-width="myQueryLabelWidth">
		                    <el-select v-model="con.status" placeholder="请选择">
		                    	<el-option :key="-1" :label="'全部'" :value="-1"></el-option>
                                <el-option v-for="item in orderStatus " :key="item.val" :label="item.key" :value="item.val"></el-option>
							 </el-select>
					    </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="con.currentPage = 1;loadTable1()">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="exportTable1">导出</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--功能按钮区-->
                <!-- <div class="buttonDiv">
                    <el-button
                            size="mini" type="primary" class="pagination-but"
                            @click="dialog1Visible = true">新增
                    </el-button>
                </div> -->
                <!--表格区-->
                <el-table border
                          :data="tableData"
                          style="width: 100%">
                    <el-table-column min-width="130px"
                                     label="流水号"
                                     prop="order_no">
                    </el-table-column>
                    <el-table-column min-width="130px"
                                     label="订单号"
                                     prop="dist_order_no">
                    </el-table-column>
                    <el-table-column min-width="130px"
                                     label="订单名称"
                                     prop="order_name">
                    </el-table-column>
                    <el-table-column min-width="100px"
                                     label="订单状态"
                                     prop="order_name">
                       <template slot-scope="scope">
                           {{scope.row.status|getEnumKey(orderStatus)}}
                       </template>
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="游玩时间"
                                     prop="play_time">
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="下单时间"
                                     prop="order_time">
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="支付时间"
                                     prop="pay_time">
                    </el-table-column>
                    <el-table-column min-width="80px"
                                     label="数量"
                                     prop="num">
                    </el-table-column>
                    <el-table-column min-width="80px"
                                     label="单价"
                                     prop="price">
                    </el-table-column>
                    <el-table-column min-width="130px"
                                     label="订单总金额"
                                     prop="totel_price">
                    </el-table-column>
                    <el-table-column min-width="80px"
                                     label="支付人"
                                     prop="buy_user_name">
                    </el-table-column>
                    <el-table-column min-width="130px"
                                     label="支付人电话"
                                     prop="buy_phone">
                    </el-table-column>
                    <el-table-column min-width="130px"
                                     label="支付人身份证"
                                     prop="card">
                    </el-table-column>

                    <!--<el-table-column label="操作" min-width="250px">-->
                        <!--<template slot-scope="scope">-->
                             <!--<el-button-->
                                <!--size="mini"-->
                                <!--type="primary"-->
                                <!--@click="table1Edit(scope.$index, scope.row)">修改-->
                        <!--</el-button>-->
                            <!--<el-button-->
                                    <!--size="mini" type="danger"-->
                                    <!--@click="table1Del(scope.$index, scope.row)">删除-->
                            <!--</el-button>-->
                            <!--<el-button v-if="scope.row.status == 4"-->
                                       <!--size="mini" type="danger"-->
                                       <!--@click="trueDel(scope.$index, scope.row)">同意-->
                            <!--</el-button>-->
                            <!--<el-button v-if="scope.row.status == 4"-->
                                       <!--size="mini" type="danger"-->
                                       <!--@click="falseDel(scope.$index, scope.row)">拒绝-->
                            <!--</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                </el-table>
                <!--分页-->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="con.currentPage"
                            :page-sizes="[1,10, 50, 200, 500]"
                            :page-size="con.pageSize"
                            layout="total, sizes, prev, pager, next, jumper, slot"
                            :total="con.total">
                    </el-pagination>
                </div>

                <!--对话框2 编辑-->
                <el-dialog title="修改订单" :visible.sync="dialog2Visible" :custom-class="'ele-dialog'" :center="true">
                    <el-form :model="editData" status-icon ref="dialog2">
                        <el-form-item label="订单号" :label-width="formLabelWidth">
                            <el-input v-model="editData.orderNo" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单名称" :label-width="formLabelWidth" prop="orderName">
                            <el-input v-model="editData.orderName" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态" :label-width="formLabelWidth" prop="status">
                             <el-select v-model="editData.status" placeholder="请选择">
							    <el-option :key="1" :label="'已支付'" :value="1"></el-option>
							    <el-option :key="2" :label="'未支付'" :value="2"></el-option>
							    <el-option :key="3" :label="'已使用'" :value="3"></el-option>
							    <el-option :key="4" :label="'退款售后'" :value="4"></el-option>
							  </el-select>
                        </el-form-item>
                        <el-form-item label="下单时间" :label-width="formLabelWidth" prop="payTime">
                            <el-input v-model="editData.payTime" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="支付时间" :label-width="formLabelWidth" prop="payTime">
                            <el-input v-model="editData.payTime" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" :label-width="formLabelWidth" prop="num">
                            <el-input v-model="editData.num" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="单价" :label-width="formLabelWidth" prop="price">
                            <el-input v-model="editData.price" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单总金额" :label-width="formLabelWidth" prop="totelPrice">
                            <el-input v-model="editData.totelPrice" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="支付人" :label-width="formLabelWidth" prop="pName">
                            <el-input v-model="editData.pName" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="支付人电话" :label-width="formLabelWidth" prop="pPhone">
                            <el-input v-model="editData.pPhone" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="支付人身份证" :label-width="formLabelWidth" prop="card">
                            <el-input v-model="editData.card" :disabled="true"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialog2Sub('dialog2')">提 交</el-button>
                        <el-button @click="dialog2Visible = false">取 消</el-button>
                    </div>
                </el-dialog>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
    <@footer></@footer>
</div>
</body>
<script src="/js/util/dyAjax.js"></script>
<script>
    $(function () {
        var option = {
            mixins: [dyMixin],
            data() {
                //edit密码验证
                var pwd = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        if (this.editData.password !== '') {
                            this.$refs.dialog2.validateField('pwd2');
                        }
                        callback();
                    }
                };
                //edit确认密码验证
                var pwd2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.editData.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    myQueryLabelWidth:'90px',
                    tempCon:{orderTime:[]},
                    con: {currentPage: 1, pageSize: 10, total: 0},//查询条件
                    tableData: [],
                    dialog1Visible: false,//对话框隐藏
                    addData: {
                        name: '',
                        phone: '',
                        account: '',
                        password: '',
                        password2: ''
                    },//新增数据模板
                    editData: {},//编辑数据
                    dialog2Visible: false,//编辑弹框隐藏
                    rules: {
                        name: [
                            {required: true, message: '请输入姓名', trigger: 'change'}
                        ],
                        phone: [
                            {required: true, message: '请输入联系方式', trigger: 'change'}
                        ],
                        account: [
                            {required: true, message: '请输入账号', trigger: 'change'}
                        ],
                        password: [
                            {
                                required: true,
                                validator: (rule, value, callback) => {
                                    if (value === '') {
                                        callback(new Error('请输入密码'));
                                    } else {
                                        if (this.addData.password !== '') {
                                            this.$refs.dialog1.validateField('password2');
                                        }
                                        callback();
                                    }
                                }, trigger: 'blur'
                            }
                        ],
                        password2: [
                            {
                                required: true, validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请再次输入密码'));
                                } else if (value !== this.addData.password) {
                                    callback(new Error('两次输入密码不一致!'));
                                } else {
                                    callback();
                                }
                            }, trigger: 'blur'
                            }
                        ]
                    },
                    rules2: {
                        name: [
                            {required: true, message: '请输入姓名', trigger: 'change'}
                        ],
                        phone: [
                            {required: true, message: '请输入联系方式', trigger: 'change'}
                        ],
                        account: [
                            {required: true, message: '请输入账号', trigger: 'change'}
                        ]
                    },
                    orderStatus: [// 订单状态
                        {key: '已取消', val: 0}, {key: '未付款', val: 1},
                        {key: '已付款', val: 2}, { key: '待使用', val: 3 },
                        {key: '已核销', val: 4}, {key: '已开票', val: 5},
                        {key: '退款中', val: 6}, {key: '已退款', val: 7},
                        {key: '已过期', val: 8}, {key: '已失效', val: 9}
                    ]
                }
            },
            mounted: function () {
                this.loadTable1();
            },
            methods: {
                //导出
                exportTable1() {
                    var _this = this;
                    if (this.con.status == -1) {
                        this.con.status = null
                    }
                    if (this.tempCon.orderTime) {
                        this.con.startTime = this.tempCon.orderTime[0]
                        this.con.endTime = this.tempCon.orderTime[1]
                    } else {
                        this.con.startTime = undefined
                        this.con.endTime = undefined
                    }
                    if (this.tempCon.playTime) {
                        this.con.playTimeStartTime = this.tempCon.playTime[0]
                        this.con.playTimeEndTime = this.tempCon.playTime[1]
                    } else {
                        this.con.playTimeStartTime = undefined
                        this.con.playTimeEndTime = undefined
                    }
                    $.dyAjax('/orders/export', this.con, function (data) {
                        let titleArr = [[]],i=0,result = data.list,dataArr = [[]];

                        titleArr[0] = ['流水号', '订单总金额', '数量', '支付人', '下单时间'
                            , '订单号', '订单名称', '游玩时间','支付时间', '支付人电话', '单价'
                            , '支付人昵称', '编号', '支付人身份证', '订单状态'];

                        for(;i<result.length;i++){
                            result[i].status = _this.getEnumKey(result[i].status,_this.orderStatus)
                        }
                        dataArr = _this.jsonArrayToSheet(result)

                        titleArr = titleArr.concat(dataArr)
                        console.log(titleArr)
                        var wb = XLSX.utils.book_new(), ws = XLSX.utils.aoa_to_sheet(titleArr);
                        XLSX.utils.book_append_sheet(wb, ws, "Sheet1");  //将数据添加到工作薄
                        XLSX.writeFile(wb, "订单.xlsx"); //导出Excel
                    });
                },
                //编辑
                table1Edit(index, row) {
                    let _this = this;
                    $.dyAjax('/orders/get/' + row.id, {}, function (data) {
                        _this.editData = data[0];
                        var status = _this.editData.status;
                        
                        console.log(status == 1);
//                      _this.editData.password2 = '';
                        _this.dialog2Visible = true;
                        console.log(data);
                    }, 'post');
                },
                //翻页大小改变事件
                handleSizeChange(val) {
                    var _this = this;
                    _this.con.pageSize = val;
                    _this.loadTable1();
                },
                //翻页翻页事件
                handleCurrentChange(val) {
                    var _this = this;
                    _this.con.currentPage = val;
                    _this.loadTable1();
                },
                //对话框1提交事件
                dialog1Sub: function (formName) {
                    var _this = this;
                    console.log(this.addData);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            $.dyAjax('/system/add', _this.addData, function (data) {
                                _this.loadTable1(function () {
                                    _this.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    _this.dialog1Visible = false;
                                    _this.jsonClear(_this.addData);
                                });
                            });
                        } else {
                            return false;
                        }
                    });
                },
                //加载表数据
                loadTable1: function (callback) {
                    var _this = this;
                    if(this.con.status == -1){
						this.con.status = null                    	
                    }
                    if(this.tempCon.orderTime){
                        this.con.startTime = this.tempCon.orderTime[0]
                        this.con.endTime = this.tempCon.orderTime[1]
                    }else{
                        this.con.startTime = undefined
                        this.con.endTime = undefined
                    }
                    if(this.tempCon.playTime){
                        this.con.playTimeStartTime = this.tempCon.playTime[0]
                        this.con.playTimeEndTime = this.tempCon.playTime[1]
                    }else {
                        this.con.playTimeStartTime = undefined
                        this.con.playTimeEndTime = undefined
                    }
                    $.dyAjax('/orders/selectPage1', this.con, function (data) {
                        callback && callback(data);
                        console.log(data)
                        _this.tableData = data.list;
                        _this.con.total = data.total;
                        _this.con.currentPage = data.pageNum;
                        _this.con.pageSize = data.pageSize;
                    });
                },
                //删除
                table1Del: function (index, row) {
                    let _this = this;
                    console.log(row);
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax('/system/del', {id: row.id}, function (data) {
                            _this.loadTable1(function () {
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            });
                        });
                    }).catch(() => {
                    });
                },
                trueDel: function (index, row) {
                    let _this = this;
                    console.log(row);
                    this.$confirm('确认同意退款, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax('/orders/update', {id: row.id,status: 5}, function (data) {
                            _this.loadTable1(function () {
                                _this.$message({
                                    type: 'success',
                                    message: '退款成功!'
                                });
                            });
                        });
                    }).catch(() => {
                    });
                },
                falseDel: function (index, row) {
                    let _this = this;
                    console.log(row);
                    this.$confirm('确认拒绝退款, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax('/orders/update', {id: row.id,status: 6}, function (data) {
                            _this.loadTable1(function () {
                                _this.$message({
                                    type: 'success',
                                    message: '已拒绝!'
                                });
                            });
                        });
                    }).catch(() => {
                    });
                },
                //对话框2 编辑提交事件
                dialog2Sub: function (formName) {
                    var _this = this;
                    console.log(this.editData);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            console.log(_this.editData);
                            $.dyAjax('/orders/update', _this.editData, function (data) {
                                _this.loadTable1(function () {
                                    _this.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    _this.dialog2Visible = false;
                                    _this.jsonClear(_this.editData);
                                });
                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        };
        var app = Vue.extend(option);
        new app().$mount('#app');
    });
</script>
</html>