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

    var app = this.app = new Vue({
        el: _el,
        template: `
<div class="power-package-component">

        <div class="mui-input-group">
            <div class="mui-table-view-cell" v-for="(obj,index) in info.packages">
                <span>第{{index+1}}档：{{obj.max}}W，</span>
                <span >比例:{{obj.rate}}%</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>
        <em v-on:click="deletePackageRule(obj,index)" class="padding-t-b-10" ><i
                class="iconfont icon-delete c-red"></i>删除</em></span>
            </div>
            <div class="mui-table-view-cell"
                 v-on:click="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</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" maxlength="5" v-model="info.dialogData.max"/>
                            <span>W</span>
                        </div>
                    </div>
                    <div class="mui-input-row">
                        <label>比例</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" maxlength="5" min="0" max="100" v-model="info.dialogData.rate"
                            />
                            <span>%</span>
                        </div>
                    </div>
                    <div class="mui-input-row">
                        <p class="c-red">“比例”：在此功率范围内扣时比例，比如配置为150%，在此功率挡位上充电1分钟，系统会算作为1.5分钟。</p>
                    </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();
        },

        computed: {},

        filters: {},

        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滚动
            },

            deletePackageRule: function (obj, index) {
                var that = this;
                var tnArray = ['取消', '确认'];
                // mui.confirm('确定要删除该配置？', '温馨提示', tnArray, function (e) {
                //     if (e.index == 0) {
                //     } else {
                //点击确认业务
                that.info.packages.splice(index, 1);
                //     }
                // });
            },

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

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

                if ($.trim(dialogData.max) === '') {
                    mui.toast("最大功率不能为空");
                    return;
                }

                var dialogIndex = this.info.dialogIndex;
                if (dialogIndex >= 1) {
                    var prvItem = packages[dialogIndex - 1];
                    if (parseInt(dialogData.max) < parseInt(prvItem.max)) {
                        mui.toast("最大功率必须大于上一个配置的最大功率");
                        return;
                    }
                }

                if (dialogIndex < (packages.length - 1)) {
                    var lastItem = packages[dialogIndex + 1];
                    if (parseInt(dialogData.max) > parseInt(lastItem.max)) {
                        mui.toast("最大功率必须小于下一个配置的最大功率");
                        return;
                    }
                }


                if (dialogData.rate == '') {
                    mui.toast("价格不能为空");
                    return;
                }


                this.info.packages[this.info.dialogIndex] = $.extend(true, {}, this.info.dialogData);
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            addPackageRule: function () {
                this.info.dialogIndex = this.info.packages.length;
                this.info.dialogOpen = true;
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动

                this.info.dialogData = {};
            },

        }
    });
}

PowerRateComponent.prototype.getPackages = function () {
    return this.app.info.packages;
};


function PackageComponent(option) {
    var _el = option.el;
    var _package_elec = option.package_elec;
    var _package_time = option.package_time;
    var _chrmt = option.chrmt;
    var _chrmtEnum = option.chrmtEnum || {TIME: true, ELEC: true};

    var app = this.app = new Vue({
        el: _el,
        template: `
<div>
    <h5 class="mui-content-padded">刷卡投币收费模式</h5>
    
    <div class="mui-input-group">
     <div class="mui-input-row mui-radio" v-if="info.chrmtEnum.TIME">
            <label for="chrmt1">按时间收费</label>
            <input id="chrmt1" v-model="info.chrmt" name="chrmt" value="TIME" type="radio">
        </div>
        <div class="mui-input-row mui-radio" v-if="info.chrmtEnum.ELEC">
            <label for="chrmt2">按电量收费</label>
            <input id="chrmt2" v-model="info.chrmt" name="chrmt" value="ELEC" type="radio">
        </div>
        
        <div class="mui-table-view-cell" v-for="(obj,index) in info['package_' + info.chrmt.toLowerCase()]">
            <span>{{obj.price}}元，</span>
            <span>{{obj.time}}{{info.chrmt=='TIME'?'分钟':'度'}}</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>
        <em v-on:click="deletePackageRule(obj,index)" class="padding-t-b-10"><i
                class="iconfont icon-delete c-red"></i>删除</em></span>
        </div>
        <div class="mui-table-view-cell"
             v-on:click="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</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.00" step="0.01" maxlength="9" v-model="info.dialogData.price"
                        />
                        <span>元</span>
                    </div>
                </div>
                <div class="mui-input-row ">
                    <label>{{info.chrmt=='TIME'?'时间':'电量'}}</label>
                    <div class="mui-pull-right edit-row">
                        <input type="number" min="0.00" step="0.01" maxlength="9" v-model="info.dialogData.time"
                        />
                        <span>{{info.chrmt=='TIME'?'分钟':'度'}}</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: {
                chrmt: '',
                chrmtEnum: _chrmtEnum,

                dialogIndex: 0,
                dialogOpen: false,
                dialogData: {},

                package_time: [],
                package_elec: []
            },
        },

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

        computed: {},

        filters: {},

        methods: {

            initPackages: function () {
                this.info.package_time = _package_time;
                this.info.package_elec = _package_elec;
                this.info.chrmt = _chrmt;
            },

            editPackageRule: function (obj, index) {
                this.info.dialogIndex = index;
                this.info.dialogOpen = true;
                this.info.dialogData = $.extend(true, {}, obj);

                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
            },

            deletePackageRule: function (obj, index) {
                var that = this;
                var info = that.info
                info['package_' + info.chrmt.toLowerCase()].splice(index, 1);
            },

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

            savePackageRule: function () {
                var that = this;
                var info = that.info
                var dialogData = info.dialogData;
                var packages = info['package_' + info.chrmt.toLowerCase()]

                if ($.trim(dialogData.price) == '') {
                    mui.toast("价格不能为空");
                    return;
                }

                if (!dialogData.time) {
                    mui.toast("时间不能为空");
                    return;
                }

                packages[info.dialogIndex] = $.extend(true, {}, info.dialogData);
                info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            addPackageRule: function () {
                var that = this;
                var info = that.info
                var packages = info['package_' + info.chrmt.toLowerCase()]
                info.dialogIndex = packages.length;
                info.dialogOpen = true;
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动

                info.dialogData = {
                    price: "",
                    time: "",
                };
            },

        }
    });
}

PackageComponent.prototype.getPackagesForTime = function () {
    return this.app.info.package_time;
};


PackageComponent.prototype.getPackagesForElec = function () {
    return this.app.info.package_elec;
};

PackageComponent.prototype.getChrmt = function () {
    return this.app.info.chrmt;
};


function VolumeComponent(option) {
    var _el = option.el;
    var _packages = option.packages;
    var _volume = option.volume;

    var app = this.app = new Vue({
        el: _el,
        template: `
<div >
        <div class="mui-input-group">
        
        <div class="mui-input-row">
                <label class="">默认语音音量</label>
                <div class="mui-pull-right ">
                    <input type="number" class="mui-text-right" maxlength="1" min=1 max=8 required  placeholder="音量" v-model="info.volume"/>
                </div>
        </div>
        
        <div class="mui-table-view-cell" v-for="(obj,index) in info.packages">
                <span>时间{{obj.start}}-{{obj.end}}，</span>
                <span>音量{{obj.volume}}</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>
        <em v-on:click="deletePackageRule(obj,index)" class="padding-t-b-10"><i class="iconfont icon-delete c-red"></i>删除</em></span>
            </div>
            <div class="mui-table-view-cell"
                 v-on:click="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</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="time" v-model="info.dialogData.start"
                            />
                        </div>
                    </div>
                      <div class="mui-input-row">
                        <label>结束时间</label>
                        <div class="mui-pull-right edit-row">
                            <input type="time" v-model="info.dialogData.end"
                            />
                        </div>
                    </div>
                    <div class="mui-input-row ">
                        <label>音量</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" maxlength="4" min=1 max=8 v-model="info.dialogData.volume"/>
                        </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: {},

                volume: 1,

                packages: []
            },
        },

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

        computed: {},

        filters: {},

        methods: {

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

            editPackageRule: function (obj, index) {
                this.info.dialogIndex = index;
                this.info.dialogOpen = true;
                this.info.dialogData = $.extend(true, {}, obj);

                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动
            },

            deletePackageRule: function (obj, index) {
                var that = this;
                that.info.packages.splice(index, 1);
            },

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

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

                if ($.trim(dialogData.start) == '') {
                    mui.toast("开始时间不能为空");
                    return;
                }


                if ($.trim(dialogData.end) == '') {
                    mui.toast("结束时间不能为空");
                    return;
                }

                if (!dialogData.volume) {
                    mui.toast("音量不能为空");
                    return;
                }

                this.info.packages[this.info.dialogIndex] = $.extend(true, {}, this.info.dialogData);
                this.info.dialogOpen = false;
                $("body").removeClass("over-hide");//恢复body滚动
            },

            addPackageRule: function () {
                this.info.dialogIndex = this.info.packages.length;
                this.info.dialogOpen = true;
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动

                this.info.dialogData = {
                    start: "",
                    end: "",
                    volume: "",
                };
            },

        }
    });
}

VolumeComponent.prototype.getVolumeList = function () {
    return this.app.info.packages;
};

VolumeComponent.prototype.getDefaultVolume = function () {
    return this.app.info.volume;
};