<#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>
<style>
    .content-wrapper {
        background-color: #fff;
    }
</style>
<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">
                <el-row>
                    <el-col :span="16" :offset="4">
                        <!-- 编辑-->
                        <el-form :model="editData"  status-icon :rules="rules2" ref="dialog2">
                            <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="editData.name" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item label="级别" :label-width="formLabelWidth" prop="grade">
                                <el-select v-model="editData.grade" placeholder="请选择">
                                    <el-option
                                            v-for="item in grades"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="电话" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="editData.phone" placeholder="请输入电话"></el-input>
                            </el-form-item>
                            <el-form-item label="营业时间" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="editData.businessTime" placeholder="请输入营业时间"></el-input>
                            </el-form-item>
                            <el-form-item label="VR连接地址" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="editData.vrUrl" placeholder="请输入VR连接地址"></el-input>
                            </el-form-item>
                            <el-form-item label="介绍" :label-width="formLabelWidth" prop="intro">
                                <el-input type="textarea" v-model="editData.intro" placeholder="请输入VR连接地址"></el-input>
                            </el-form-item>
                            <el-form-item label="公告" :label-width="formLabelWidth" prop="description">
                                <div id="editor">
                                </div>
                            </el-form-item>
                            <el-form-item label="图片" :label-width="formLabelWidth">
                                <el-upload action="/upload/pic"
                                           name="upload"
                                           list-type="picture-card"
                                           :before-remove="handleRemove"
                                           :before-upload="beforeUploadPic"
                                           :file-list="editData.pics"
                                           :on-success="handleAvatarSuccess">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="视频" :label-width="formLabelWidth">
                                <div>
                                    <el-progress type="circle" :percentage="voidProgrssPercent" v-if="showVoidProgrss"></el-progress>
                                </div>
                                <el-upload
                                        v-if="!showVoidProgrss"
                                        :class="editData.voidUrl?'avatar-uploader-void':'avatar-uploader'"
                                        :show-file-list="false"
                                        action="/upload/void"
                                        name="upload"
                                        :data="sessionID"
                                        :on-progress="uploadFileProcess"
                                        :before-upload="beforeUploadFile"
                                        :on-success="handleFileSuccess">
                                    <video v-if="editData.voidUrl" :src="editData.voidUrl" width="320" height="257" controls>
                                    </video>
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-button size="small" v-if="editData.voidUrl" type="primary" @click="delVoid">删除视频</el-button>
                            </el-form-item>

                            <el-form-item label="购票须知" :label-width="formLabelWidth">
                                <div id="ticket-information-editor">
                                </div>
                            </el-form-item>
                            <el-form-item label=" " :label-width="formLabelWidth">
                                <el-button type="primary" @click="dialog2Sub('dialog2')">提 交</el-button>
                                <!--<el-button @click="table1Edit(1)">取 消</el-button>-->
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
<!--<@footer></@footer>-->
<@footer></@footer>
</div>
</body>
<script src="/js/util/dyAjax.js"></script>
<script src="/wangEditor/wangEditor.js"></script>
<script>
    $(function () {
        /*wangEditor初始化*/
        var E = window.wangEditor;
        var editor = new E('#editor');// 自定义字体
        editor.customConfig.fontNames = [
            '黑体',
            '仿宋'
        ]
        var ticInfoEditor = new E('#ticket-information-editor');
        // 自定义字体
        ticInfoEditor.customConfig.fontNames = [
            '黑体',
            '仿宋'
        ]
        var option = {
            mixins: [dyMixin],
            data() {
                return {
                    editData: {},//编辑数据
                    dialog2Visible: false,//编辑弹框隐藏
                    rules2: {
                        name: [
                            {required: true, message: '请输入姓名', trigger: 'blur'}
                        ],
                        grade: [
                            {required: true, message: '请选择', trigger: 'blur'}
                        ],
                        intro: [
                            {required: true, message: '请输入介绍', trigger: 'blur'}
                        ],
                    },//验证规则
                    grades: [{key: 3, label: '3A', value: 3}, {key: 4, label: '4A', value: 4}, {
                        key: 5,
                        label: '5A',
                        value: 5
                    }],//景区级别
                    voidUrl: "",//视频url
                    showVoidProgrss:false,//视频上传状态（false：未开始上传）
                    voidProgrssPercent:0,//视频上传进度
                    interval:undefined,//计时器
                    sessionID:{sessionID:Date.now()}
                }
            },
            mounted: function () {
                this.table1Edit(1);

                // 配置服务器端地址
                editor.customConfig.uploadImgServer = '/upload/pic';
                //自定义 fileName
                editor.customConfig.uploadFileName = 'upload'
                //监听函数
                editor.customConfig.uploadImgHooks = {
                    success: function (xhr, editor, result) {
                        // 图片上传并返回结果，图片插入成功之后触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    },
                    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                    customInsert: function (insertImg, result, editor) {
                        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                        var url = result.data.src;
                        insertImg(url)
                        // result 必须是一个 JSON 格式字符串！！！否则报错
                    }
                }
                editor.create();
                ticInfoEditor.create();
            },
            methods: {
                //视频上传验证 格式、大小验证
                beforeUploadFile(file){
                    const isMP4 = file.type === 'video/mp4';
                    const isLt500M = file.size / 1024 / 1024 < 500;
                    if (!isMP4) {
                        this.$message.error('上传视频只能是 mp4 格式!');
                    }
                    if (!isLt500M) {
                        this.$message.error('上传视频大小不能超过 500MB!');
                    }
                    return isMP4 && isLt500M;
                },//图片上传格式验证
                beforeUploadPic(file){
                    const isPic = (file.type === 'image/png'||file.type === 'image/jpeg');
                    if (!isPic) {
                        this.$message.error('上传图片格式不正确');
                    }
                    return isPic;
                },

                //视频上传时钩子
                uploadFileProcess(event, file, fileList) {
                    let _this = this;
                    _this.showVoidProgrss = true;
                    if(typeof(_this.interval)==='undefined' ){
                        _this.interval = setInterval(function () {
                            if(file.percentage===100){
                                $.dyAjax('/upload/getProcess', _this.sessionID, function (data) {
                                    if(data==100){
                                        clearInterval(_this.interval)
                                    }
                                    _this.voidProgrssPercent = Number((data*0.9).toFixed(0))+10;
                                },'post',true,false);
                            }else{
                                _this.voidProgrssPercent = Number((file.percentage*0.1).toFixed(0))
                            }
                        },500);
                    }
                },
                //视频上传完成钩子
                handleFileSuccess(res, file){
                    this.showVoidProgrss = false
                    this.editData.voidUrl = file.response.data;
                },
                //编辑
                table1Edit(id) {
                    let _this = this;
                    $.dyAjax('/scenic/get/' + id, {}, function (data) {
                        _this.editData = data;
                        editor.txt.html(_this.editData.description);
                        ticInfoEditor.txt.html(_this.editData.content);
                    }, 'get');
                },
                //对话框2 编辑提交事件
                dialog2Sub: function (formName) {
                    var _this = this;
                    _this.editData.description = editor.txt.html();
                    _this.editData.content = ticInfoEditor.txt.html();
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            $.dyjAjax('/scenic/edit', _this.editData, function (data) {
                                _this.table1Edit(_this.editData.id);
                            });
                        } else {
                            return false;
                        }
                    });
                },
                //图片上传成功的事件
                handleAvatarSuccess(res, file) {
                    let _this = this;
                    var newPic = {url: file.response.data.src, fid: _this.editData.id};
                        _this.editData.pics.push(newPic);
                },
                //图片删除的事件
                handleRemove(res, file) {
                    let _this = this;
                    if (res.status==='success'){
                        this.$confirm('确认删除该图片, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            _this.delMemberByKeyVal(_this.editData.pics,'url',res.url);
                        }).catch(() => {
                        });
                        return false;
                    }else{
                        return true;
                    }
                },
                //删除视频
                delVoid:function () {
                    let _this = this;
                    this.$confirm('确认删除该视频, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.editData.voidUrl = "";
                    }).catch(() => {
                    });
                }
            }
        };
        var app = Vue.extend(option);
        new app().$mount('#app');
    });
</script>
</html>