<#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-select v-model="con.city" placeholder="市">
                                <el-option label="全部" value=""></el-option>
                                <el-option :label="item.city" :value="item.city" v-for="item in downtown">
                                    {{item.city}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="区" :label-width="queryLabelWidth">
                            <el-select v-model="con.district" placeholder="区">
                                <el-option label="全部" value=""></el-option>
                                <template v-for="item in downtown" v-if="item.city==con.city">
                                    <el-option :label="item1.district" :value="item1.district"
                                               v-for="item1 in item.districts">
                                        {{item1.district}}
                                    </el-option>
                                </template>
                            </el-select>
                        </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>
                </div>
                <div class="buttonDiv">
                    <el-button
                            size="mini" type="primary" class="pagination-but"
                            @click="dialogFormVisible = true">新增景区
                    </el-button>
                </div>
                <!--表格区-->
                <el-table border
                          :data="tableData"
                          style="width: 100%">
                    <el-table-column min-width="150px"
                                     label="市"
                                     prop="city">
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="区域"
                                     prop="district">
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="景点名称"
                                     prop="name">
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="左下经纬度"
                                     prop="leftBottom">
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="右上经纬度"
                                     prop="rightTop">
                    </el-table-column>
                    <el-table-column label="操作" min-width="300px">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini" type="primary"
                                    @click="tableDraw(scope.$index, scope.row)">点线绘制
                            </el-button>
                            <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>
                            <div style="height: 5px"></div>
                            <el-button
                                    size="mini" type="success"
                                    @click="offlineDownload(scope.$index, scope.row)">离线下载
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="success"
                                    @click="onlinePreview(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">
                        <!--<slot>
                            <span class="pagination-span">
                                <el-button
                                        size="mini" type="primary" class="pagination-but"
                                        @click="dialogFormVisible = true">新增景区
                                </el-button>
                            </span>
                        </slot>-->
                    </el-pagination>
                </div>
                <!--对话框1 新增-->
                <el-dialog title="新增景区" :visible.sync="dialogFormVisible" :custom-class="'ele-dialog'" :center="true">
                    <el-form :model="addData">
                        <el-form-item label="景区区域" :label-width="formLabelWidth">
                            <el-select v-model="addData.province" filterable clearable placeholder="省"
                                       @change="cityChange('province',addData.province)">
                                <el-option-group key="热门城市" label="热门城市">
                                    <el-option v-for="item in hotcitys" :key="item.code"
                                               :label="item.name"
                                               :value="item.name">
                                    </el-option>
                                </el-option-group>
                                <el-option-group key="城市" label="城市">
                                    <el-option v-for="item in citys" :key="item.code"
                                               :label="item.name"
                                               :value="item.name">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                            -
                            <el-select v-model="addData.city" placeholder="市" @change="cityChange('town',addData.city)"
                                       name="selecttown">
                                <el-option v-for="item in towns" :label="item.name" :value="item.name"
                                           :key="item.code"></el-option>
                            </el-select>
                            -
                            <el-select v-model="addData.district" placeholder="区" name="selectdistrict">
                                <el-option v-for="item in districts" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="景区名称" :label-width="formLabelWidth">
                            <el-input v-model="addData.name" placeholder="请输入景区名称"></el-input>
                        </el-form-item>
                        <el-form-item label="左下经纬度" :label-width="formLabelWidth">
                            <el-input v-model="addData.leftBottom" placeholder="请输入左下经纬度"></el-input>
                        </el-form-item>
                        <el-form-item label="右上经纬度" :label-width="formLabelWidth">
                            <el-input v-model="addData.rightTop" placeholder="请输入右上经纬度"></el-input>
                        </el-form-item>
                        <el-form-item label="缩放级别" :label-width="formLabelWidth">
                            <el-input v-model="addData.zoom" placeholder="请输入缩放级别"></el-input>
                        </el-form-item>
                        <el-form-item label="缩放级别范围" :label-width="formLabelWidth">
                            <el-input v-model="addData.zoomRange" placeholder="请输入缩放级别范围"></el-input>
                        </el-form-item>
                        <el-form-item label="手绘地图" :label-width="formLabelWidth">
                            <el-upload class="avatar-uploader"
                                       action="/upload/pic"
                                       name="upload"
                                       :show-file-list="false"
                                       :on-success="handleAvatarSuccess">
                                <img v-if="addData.pic" :src="addData.pic" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogFormSub">提 交</el-button>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                    </div>
                </el-dialog>

                <!--对话框2 编辑-->
                <el-dialog title="编辑景区" :visible.sync="dialog2Visible" :custom-class="'ele-dialog'" :center="true">
                    <el-form :model="editData">
                        <el-form-item label="景区区域" :label-width="formLabelWidth">
                            <el-select v-model="editData.province" filterable clearable placeholder="省"
                                       @change="cityChange('province',editData.province)">
                                <el-option-group key="热门城市" label="热门城市">
                                    <el-option v-for="item in hotcitys" :key="item.code"
                                               :label="item.name"
                                               :value="item.name">
                                    </el-option>
                                </el-option-group>
                                <el-option-group key="城市" label="城市">
                                    <el-option v-for="item in citys" :key="item.code"
                                               :label="item.name"
                                               :value="item.name">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                            -
                            <el-select v-model="editData.city" placeholder="市"
                                       @change="cityChange('town',editData.city)"
                                       name="selecttown">
                                <el-option v-for="item in towns" :label="item.name" :value="item.name"
                                           :key="item.code"></el-option>
                            </el-select>
                            -
                            <el-select v-model="editData.district" placeholder="区" name="selectdistrict">
                                <el-option v-for="item in districts" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="景区名称" :label-width="formLabelWidth">
                            <el-input v-model="editData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="左下经纬度" :label-width="formLabelWidth">
                            <el-input v-model="editData.leftBottom" placeholder="请输入左下经纬度"></el-input>
                        </el-form-item>
                        <el-form-item label="右上经纬度" :label-width="formLabelWidth">
                            <el-input v-model="editData.rightTop" placeholder="请输入右上经纬度"></el-input>
                        </el-form-item>
                        <el-form-item label="缩放级别" :label-width="formLabelWidth">
                            <el-input v-model="editData.zoom" placeholder="请输入缩放级别"></el-input>
                        </el-form-item>
                        <el-form-item label="缩放级别范围" :label-width="formLabelWidth">
                            <el-input v-model="editData.zoomRange" placeholder="请输入缩放级别范围"></el-input>
                        </el-form-item>
                        <el-form-item label="手绘地图" :label-width="formLabelWidth">
                            <el-upload class="avatar-uploader"
                                       action="/upload/pic"
                                       name="upload"
                                       :show-file-list="false"
                                       :on-success="handleAvatarSuccess2">
                                <img v-if="editData.pic" :src="editData.pic" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialog2Sub">提 交</el-button>
                        <el-button @click="dialog2Visible = false">取 消</el-button>
                    </div>
                </el-dialog>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
    <@footer></@footer>
</div>
</body>
<script>
    $(function () {
        var option = {
            mixins: [dyMixin],
            data() {
                return {
                    downtown: [{city: '重庆', districts: [{district: '江北'}, {district: '渝北'}]}],//查询条件的市区加载
                    con: {currentPage: 1, pageSize: 1, total: 0},//查询条件
                    tableData: [],
                    dialogFormVisible: false,//对话框隐藏
                    addData: {
                        province: '',
                        city: '',
                        district: '',
                        name: '',
                        rightTop: '',
                        leftBottom: '',
                        pic: ''
                    },//新增数据模板
                    editData: {},//编辑数据
                    dialog2Visible: false,//编辑弹框隐藏
                }
            },
            mounted: function () {
                this.loadTable1();
            },
            methods: {
                //在线预览
                onlinePreview(index, row) {
                    window.open("../../lib/dist/index.html?id=" + row.id);
//                    window.open("../../lib/temp/index.html");
                },
                //编辑
                table1Edit(index, row) {
                    let _this = this;
                    $.dyAjax('/scenic/getScenic/' + row.id, {}, function (data) {
                        _this.editData = data;
                        _this.dialog2Visible = true;
                        console.log(data);
                    }, 'get');
                },
                //翻页大小改变事件
                handleSizeChange(val) {
                    var _this = this;
                    _this.con.pageSize = val;
                    _this.loadTable1();
                },
                //翻页翻页事件
                handleCurrentChange(val) {
                    var _this = this;
                    _this.con.currentPage = val;
                    _this.loadTable1();
                },
                //图片上传成功的事件
                handleAvatarSuccess(res, file) {
                    this.addData.pic = file.response.data.src;
                    console.log(this.addData.pic);
                    console.log(file);
                },
                //城市下拉框改变事件
                cityChange: function (type, value) {
                    if (type === 'province') {
                        $("input[name='selecttown']").val('');
                        $("input[name='selectdistrict']").val('');
                        this.towns = this.getMemberByKeyVal(this.citys, 'name', value).cityList;
                        this.districts = [{"code": "A0002", "name": "请选择市",}];
                    } else {
                        $("input[name='selectdistrict']").val('');
                        this.districts = this.getMemberByKeyVal(this.towns, 'name', value).areaList;
                    }
                },
                //对话框1提交事件
                dialogFormSub: function () {
                    var _this = this;
                    console.log(this.addData);
                    $.dyAjax('/scenic/save', this.addData, function (data) {
                        _this.loadTable1(function () {
                            _this.$message({
                                message: '成功',
                                type: 'success'
                            });
                            _this.dialogFormVisible = false;
                            _this.jsonClear(_this.addData);
                        });
                    });
                },
                //加载表数据
                loadTable1: function (callback) {
                    var _this = this;
                    $.dyAjax('/scenic/page', this.con, function (data) {
                        callback ? callback(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('/scenic/delete', {id: row.id}, function (data) {
                        _this.loadTable1(function () {
                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
                    });
                }).
                    catch(() = > {}
                )
                    ;
                    ;
                },
                //对话框2 编辑 图片上传成功回调事件
                handleAvatarSuccess2(res, file) {
                    this.editData.pic = file.response.data.src;
                    console.log(this.editData.pic);
                },
                //对话框2 编辑提交事件
                dialog2Sub: function () {
                    var _this = this;
                    console.log(this.editData);
                    $.dyAjax('/scenic/edite', this.editData, function (data) {
                        _this.loadTable1(function () {
                            _this.$message({
                                message: '成功',
                                type: 'success'
                            });
                            _this.dialog2Visible = false;
                            _this.jsonClear(_this.editData);
                        });
                    });
                },
                //地图绘点
                tableDraw: function (index, row) {
                    window.location.href = "/scenic/mapdraw/" + row.id;
                },
                //离线下载
                offlineDownload: function (index, row) {
                    $.dyAjax('/scenic/offlineDownload/' + row.id, {}, function (data) {
//                        _this.editData = data;
//                        _this.dialog2Visible = true;
//                        console.log(data);

                        window.location.href = data;
                    }, 'get');
                }
            }
        };
        var app = Vue.extend(option);
        new app().$mount('#app');
    });
</script>
</html>