function ChargeTypeComponent(option) {
    var _el = option.el;
    var _chargeType = option.chargeType;
    var _powerPackage = option.powerPackage;
    var _powerPrice = option.powerDefaultPrice;
    var _elecPrice = option.elecPrice;

    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">
            <label for="chargeType1" class="tips-event font-b-14">
                按电量收费
                <i class="tips" title="设备不断收集充电电量，并根据每度电价以及最终的充电电量计算最终的费用">?</i>
            </label>
            <input id="chargeType1" v-model="info.chargeType" name="chargeType" value="elec" type="radio">
        </div>
        
        <div class="mui-input-row mui-radio">
            <label for="chargeType2" class="tips-event font-b-14">
                按功率收费
                <i class="tips" title="
                    设备不断收集充电功率，并根据此功率以及功率分档的设置计算该阶段的费用，最终的费用为累加和。
                    默认功率价格为：当设备运行功率不在设置功率范围内时候使用的价格
                    ">?</i>
            </label>
            <input id="chargeType2" v-model="info.chargeType" name="chargeType" value="power" type="radio">
        </div>
        
        <div class="mui-table-view-cell">
            <template v-if="info.chargeType=='power'">
                <span>默认</span>
                <span>{{info.powerPrice}} 元</span>
                <span>1 小时</span>
            </template>
            
            <template v-if="info.chargeType=='elec'">
                <span>{{info.elecPrice}} 元</span>
                <span>1 度电</span>
            </template> 
            
            <span class="mui-pull-right">
                <em v-on:click="editPrice()" class="padding-t-b-10"><i class="iconfont icon-edit c-primary"></i>编辑</em>
            </span>
        </div>
        
        <div class="mui-table-view-cell" v-if="info.chargeType=='power'" v-for="(obj,index) in info[info.chargeType + 'Package']">
            <template>
                <span>{{obj.min}} W  --</span>
                <span>{{obj.max}} W</span>
                <span>{{obj.price}} 元</span>
                <span>1 小时</span>
            </template>
            
            <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()" v-if="info.chargeType=='power'">
            <span><i class="iconfont icon-add c-success font-18"></i>添加</span>
        </div>
        
    </div>


    <div class="edit-back mui-hidden" id="editPrice">
        <div class="edit-content">
            <div class="edit-box ">

                <template v-if="info.chargeType=='power'">
                    <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._tempValue"/>
                            <span>元</span>
                        </div>
                    </div>
                    
                    <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" value="1" disabled/>
                            <span>小时</span>
                        </div>
                    </div>
                </template>
                
                <template v-if="info.chargeType=='elec'">
                    <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._tempValue"/>
                            <span>元</span>
                        </div>
                    </div>
                    
                    <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" value="1" disabled/>
                            <span>度</span>
                        </div>
                    </div>
                </template>
                
            </div>
            <div class="mui-popup-buttons ">
                <span class="mui-popup-button" v-on:click="closePrice()">取消</span>
                <span class="mui-popup-button mui-popup-button-bold" v-on:click="savePrice()">确认</span>
            </div>
        </div>
    </div>
    
    
    <div class="edit-back packageDialog" v-bind:class="{ hidden: !info.dialogOpen }">
        <div class="edit-content">
            <div class="edit-box ">
                <template v-if="info.chargeType=='power'">
                    <div class="mui-input-row">
                        <label>范围下限</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" min="0"  max="9999" v-model="info.dialogData.min"/>
                            <span>W</span>
                        </div>
                    </div>
                    
                    <div class="mui-input-row">
                        <label>范围上限</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" min="0" max="9999" 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" min="0.00" step="0.01" maxlength="9" v-model="info.dialogData.price"/>
                            <span>元</span>
                        </div>
                    </div>
                    
                    <div class="mui-input-row ">
                        <label>时间</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" value="1" disabled/>
                            <span>小时</span>
                        </div>
                    </div>
                    
                </template>

            </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: {
                chargeType: 'power',

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

                powerPackage: [],

                powerPrice: 0,
                elecPrice: 0,
                _tempValue: 0
            },
        },

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

        computed: {},

        filters: {},

        methods: {

            initPackages: function () {
                this.info.chargeType = _chargeType;
                this.info.powerPackage = _powerPackage;
                this.info.powerPrice = _powerPrice;
                this.info.elecPrice = _elecPrice;
            },

            editPrice: function() {
                var key = this.info.chargeType +  "Price";
                this.info._tempValue = this.info[key];
                $("#editPrice").removeClass("mui-hidden")
            },
            closePrice: function() {
                $("#editPrice").addClass("mui-hidden")
            },
            savePrice: function() {
                var key = this.info.chargeType + "Price";
                this.info[key] = this.info._tempValue;
                $("#editPrice").addClass("mui-hidden")
            },

            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;
                var key = info.chargeType + 'Package';

                info[key].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[info.chargeType + 'Package'];

                if (info.chargeType === 'elec') {
                    if (!dialogData.price) {
                        mui.toast("电量计费价格不能为空");
                        return;
                    }
                }

                if (info.chargeType === 'power') {
                    if (dialogData.min === "") {
                        mui.toast("功率范围下限不能为空");
                        return;
                    }
                    if (dialogData.max === "") {
                        mui.toast("功率范围上限不能为空");
                        return;
                    }
                    if (!dialogData.price) {
                        mui.toast("价格不能为空");
                        return;
                    }
                    if (dialogData.min * 1 > dialogData.max * 1) {
                        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 key = info.chargeType + 'Package';
                var packages = info[key];

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

                // 只有功率的会存在多档的情况 其余的暂时不考虑
                if (info.chargeType === "power") {
                    info.dialogData = {max: "", min: "", price: ""}
                }
            },

        }
    });
}


// 获取获取功率计费
ChargeTypeComponent.prototype.getPowerPackage = function () {
    return this.app.info.powerPackage;
};
// 获取功率计费默认价格
ChargeTypeComponent.prototype.getPowerDefaultPrice = function() {
    return this.app.info.powerPrice;
};
// 获取电量单价
ChargeTypeComponent.prototype.getElecPrice = function () {
    return this.app.info.elecPrice;
};


// 获取计费方式
ChargeTypeComponent.prototype.getChargeType = function () {
    return this.app.info.chargeType;
};