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

<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">
                    <el-form :inline="true" :model="con" class="demo-form-inline">
                        <el-form-item label="景区" :label-width="queryLabelWidth">
                            <el-input v-model="con.sightName" placeholder="景区"></el-input>
                        </el-form-item>
                        <el-form-item label="门票名称" :label-width="queryLabelWidth">
                            <el-input v-model="con.name" placeholder="门票名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="loadTable1()">查询</el-button>
                        </el-form-item>
                    </el-form>

                    <el-form :inline="true" :model="con" class="demo-form-inline">
                        <el-form-item label="日期" :label-width="queryLabelWidth">
                            <el-date-picker format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                    v-model="saleTicketDate"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="danger" @click="stopSaleTicket">暂停售票</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="recoverSaleTicket">恢复售票</el-button>
                        </el-form-item>
                    </el-form>
                  <el-form :inline="true" :model="con" class="demo-form-inline">
                   每天暂停售票时间:<el-time-select
							    placeholder="起始时间"
							    v-model="startTime"
							    :picker-options="{
							      start: '07:00',
							      step: '00:10',
							      end: '23:50'
							    }">
							  </el-time-select>
							  <el-time-select
							    placeholder="结束时间"
							    v-model="endTime"
							    :picker-options="{
							      start: '07:00',
							      step: '00:10',
							      end: '23:50'
							    }">
							  </el-time-select>
							 <!--  ,
							      minTime: startTime -->
					<el-form-item>
                        <el-button type="danger" @click="stopSaleTicketTime">暂停售票</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="recoverSaleTicketTime">恢复售票</el-button>
                    </el-form-item>
                    </el-form>
                </div>
                <!--功能按钮区-->
                <div class="buttonDiv">
                    <el-button
                            size="mini" type="primary" class="pagination-but" :disabled="synTicketIng"
                            @click="synTicket">{{synTicketIng?'同步中':'同步'}}
                    </el-button>
                </div>
                <!--表格区-->
                <el-table border
                          :data="tableData"
                          style="width: 100%">
                    <el-table-column min-width="150px"
                                     label="景区"
                                     prop="sightName">
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="门票名称"
                                     prop="name">
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="价格"
                                     prop="price">
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="con.currentPage"
                            :page-sizes="[10, 50, 200, 500]"
                            :page-size="con.pageSize"
                            layout="total, sizes, prev, pager, next, jumper, slot"
                            :total="con.total">
                    </el-pagination>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
    <@footer></@footer>
</div>
</body>
<script src="/js/util/dyAjax.js"></script>
<script>
    $(function () {
        var option = {
            mixins: [dyMixin],
            data() {
                return {
                    con: {currentPage: 1, pageSize: 10, total: 0},//查询条件
                    tableData: [],
                    dialog1Visible:false,//弹窗隐藏
                    synTicketIng:false,//未同步中
                    saleTicketDate:[],//停止、恢复售票时间
                    startTime:'22:00',//每天停止、恢复售票开始时分
                    endTime:'08:00',//每天停止、恢复售票结束时分
                }
            },
            mounted: function () {
                this.loadTable1();
                let nowStr = this.dateFormat(new Date(),'yyyy-MM-dd');
                this.saleTicketDate = [nowStr,nowStr];
            },
            methods: {
                //每天的时分停止售票
                stopSaleTicketTime(){
                    let _this = this;
                    this.$confirm('确定配置暂停售票时间？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax('/stop/stopTiket',
                            {startTime:_this.startTime,endTime:_this.endTime}, function (data) {
                                _this.$message({
                                    message: '成功',
                                    type: 'success'
                                });
                            },'get');
                    }).catch(() => {
                    });
                },
                //每天的时分恢复售票
                recoverSaleTicketTime(){
                    let _this = this;
                    $.dyAjax('/stop/openTiket', {}, function (data) {
                            _this.$message({
                                message: '成功',
                                type: 'success'
                            });
                        },'get');
                },
                //停止售票
                stopSaleTicket(){
                    let _this = this;
                    console.log(_this.saleTicketDate)
                    this.$confirm('确定暂停售票？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax('/good/stopSaleTicket',
                            {startDate:_this.saleTicketDate[0],endDate:_this.saleTicketDate[1]}, function (data) {
                            _this.$message({
                                message: '成功',
                                type: 'success'
                            });
                        });
                    }).catch(() => {
                    });
                },
                //恢复售票
                recoverSaleTicket(){
                    let _this = this;
                    $.dyAjax('/good/recoverSaleTicket',
                        {startDate:_this.saleTicketDate[0],endDate:_this.saleTicketDate[1]}, function (data) {
                        _this.$message({
                            message: '成功',
                            type: 'success'
                        });
                    });
                },
                //同步门票
                synTicket(){
                    var _this = this;
                    _this.synTicketIng = true
                    $.dyAjax('/good/synTicket', {}, function (data) {
                        _this.synTicketIng = false
                    },'get',true,false);
                },
                //翻页大小改变事件
                handleSizeChange(val) {
                    var _this = this;
                    _this.con.pageSize = val;
                    _this.loadTable1();
                },
                //翻页翻页事件
                handleCurrentChange(val) {
                    var _this = this;
                    _this.con.currentPage = val;
                    _this.loadTable1();
                },
                //加载表数据
                loadTable1: function (callback) {
                    var _this = this;
                    $.dyAjax('/good/page', 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;
                    });
                },
            }
        };
        var app = Vue.extend(option);
        new app().$mount('#app');
    });
</script>
</html>