function WaterLevelsComponent(option) {
    var _el = option.el;
    var _packages = option.packages;

    var app = this.app = new Vue({
        el: _el,
        template: `
<div >
        <div class="mui-input-group">
        
        <div class="mui-table-view-cell" v-for="(obj,index) in info.packages">
                <span>刻度{{15-index}}：刻度值为 {{obj}}HZ</span>
                <span class="mui-pull-right">
        <em v-on:click="editPackageRule(obj,index)" class="padding-t-b-10"><i class="iconfont icon-edit c-primary"></i>编辑</em></span>
            </div>
        </div>

        <div class="edit-back packageDialog" v-bind:class="{ hidden: !info.dialogOpen }">
            <div class="edit-content">
                <div class="edit-box ">
                    <div class="mui-input-row ">
                        <label>水位刻度值</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" min=0 v-model="info.dialogData.value"/>
                             <span class="font-b-12">HZ</span>
                        </div>
                    </div>

                </div>
                <div class="mui-popup-buttons ">
                    <span class="mui-popup-button" v-on:click="closeRulePanel()">取消</span>
                    <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePackageRule()">确认</span>
                </div>
            </div>
        </div>

</div>
        `
        ,
        data: {
            info: {
                dialogIndex: 0,
                dialogOpen: false,
                dialogData: {},

                packages: []
            },
        },

        mounted: function () {
            var that = this
            that.initPackages();
        },

        methods: {
            initPackages: function () {
                this.info.packages = _packages;
            },

            editPackageRule: function (value, index) {
                this.info.dialogIndex = index;
                this.info.dialogOpen = true;
                this.info.dialogData = {value: value};
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
            },

            closeRulePanel: function () {
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            savePackageRule: function () {
                var dialogData = this.info.dialogData;

                if (isNaN(dialogData.value) || !dialogData.value) {
                    mui.toast("请填写正确的水位刻度");
                    return;
                }
                this.info.packages[this.info.dialogIndex] = parseInt(dialogData.value)
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },


        }
    });
}

WaterLevelsComponent.prototype.getWaterLevels = function () {
    return this.app.info.packages;
};

function PackageWorkConfComponent(option) {
    var _el = option.el;
    var _packages = option.packages;

    var app = this.app = new Vue({
        el: _el,
        template: `
<div >
        <div class="mui-input-group">
        
        <div class="mui-table-view-cell" v-for="(obj,index) in info.packages">
                <span>{{obj.name}}，投币:{{obj.coins}}，水位:{{obj.waterlevel}}，时间:{{obj.needTime}}分钟</span>
                <span class="mui-pull-right">
        <em v-on:click="editPackageRule(obj,index)" class="padding-t-b-10"><i class="iconfont icon-edit c-primary"></i>编辑</em>
        </span>
            </div>
        </div>

        <div class="edit-back packageDialog" v-bind:class="{ hidden: !info.dialogOpen }">
            <div class="edit-content">
                <div class="edit-box ">
                  <div class="mui-input-row ">
                        <label>套餐名称</label>
                        <div class="mui-pull-right edit-row">
                            <input type="text" disabled v-model="info.dialogData.name"/>
                        </div>
                    </div>
                   <div class="mui-input-row ">
                        <label>投币数目</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" min=1 max=99999 v-model="info.dialogData.coins"/>
                        </div>
                    </div>
                    <div class="mui-input-row ">
                        <label>工作水位刻度</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" min=1 max=15 v-model="info.dialogData.waterlevel"/>
                        </div>
                    </div>
                    <div class="mui-input-row ">
                        <label>工作时间</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" min=1 max=99999 v-model="info.dialogData.needTime"/>
                             <span class="font-b-12">分钟</span>
                        </div>
                    </div>
                </div>
                <div class="mui-popup-buttons ">
                    <span class="mui-popup-button" v-on:click="closeRulePanel($event)">取消</span>
                    <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePackageRule()">确认</span>
                </div>
            </div>
        </div>

</div>
        `
        ,
        data: {
            info: {
                dialogIndex: 0,
                dialogOpen: false,
                dialogData: {},

                packages: []
            },
        },

        mounted: function () {
            var that = this
            that.initPackages();
        },

        methods: {
            initPackages: function () {
                this.info.packages = _packages;
            },

            editPackageRule: function (obj, index) {
                this.info.dialogIndex = index;
                this.info.dialogOpen = true;
                this.info.dialogData = $.extend(true, {}, obj);
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
            },

            closeRulePanel: function ($event) {
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            savePackageRule: function () {
                var dialogData = this.info.dialogData;
                if (isNaN(dialogData.coins) || !dialogData.coins) {
                    mui.toast("请填写正确的投币数目");
                    return;
                }
                if (isNaN(dialogData.waterlevel) || !dialogData.waterlevel) {
                    mui.toast("请填写正确的工作水位");
                    return;
                }
                if (dialogData.waterlevel < 1 || dialogData.waterlevel > 15) {
                    mui.toast("工作水位必须是1-15之间");
                    return;
                }
                if (isNaN(dialogData.needTime) || !dialogData.needTime) {
                    mui.toast("请填写正确的工作时间");
                    return;
                }

                console.log(dialogData)
                this.info.packages[this.info.dialogIndex] = {
                    coins: parseInt(dialogData.coins),
                    waterlevel: parseInt(dialogData.waterlevel),
                    needTime: parseInt(dialogData.needTime),
                }
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },
        }
    });
}

PackageWorkConfComponent.prototype.getPackageWorkConf = function () {
    return this.app.info.packages;
};