function ChargeTypeComponent(option) {
    var _el = option.el;
    var _chargeType = option.chargeType;
    var _powerPackage = option.powerPackage;
    var _elecPackage = option.elecPackage;
    var _billAsServicePackage = option.billAsServicePackage;

    var app = this.app = new Vue({
        el: _el,
        template: `
<div>
    <h5 class="mui-content-padded tips-event">
        计费模式设置
        <i class="tips" title="
           时间模式：按照设备套餐进行计费，例如套餐1元360分钟；
           功率模式：设备每10分钟收集一次充电功率，并根据此功率以及功率分档的设置计算该10分钟阶段的费用，最终的费用为累加和；
           电量模式：设备每10分钟收集一次充电电量，并根据每度电价以及最终的充电电量计算最终的费用
        ">?</i>
    </h5>
    
    <div class="mui-input-group">
    
        <div class="mui-input-row mui-radio">
            <label for="chargeType1">按时间收费</label>
            <input id="chargeType1" v-model="info.chargeType" name="chargeType" value="time" type="radio">
        </div>
        
        <div class="mui-input-row mui-radio">
            <label for="chargeType2">按电量收费</label>
            <input id="chargeType2" v-model="info.chargeType" name="chargeType" value="elec" type="radio">
        </div>
        
        <div class="mui-input-row mui-radio">
            <label for="chargeType3">按功率收费</label>
            <input id="chargeType3" v-model="info.chargeType" name="chargeType" value="power" type="radio">
        </div>
           
        
        <div class="mui-input-row mui-radio">
            <label for="chargeType4">按服务费（电量）收费</label>
            <input id="chargeType4" v-model="info.chargeType" name="chargeType" value="billAsService" type="radio">
        </div>
        
        <div class="mui-table-view-cell" v-for="(obj,index) in info[info.chargeType + 'Package']">
            
            <template v-if="info.chargeType=='elec'">
                <span>{{obj.price}} 元</span>
                <span>1 度电</span>
            </template>
            
            <template v-if="info.chargeType=='billAsService'">
            <p style="color: black">
                <span>电费： <b>{{obj.elecCharge}}</b> 元/度</span> <span style="margin-left: 10%">服务费：<b>{{obj.serviceCharge}}</b> 元/度</span>
            </p>
            </template>
            
            <template v-if="info.chargeType=='power'">
                <span>{{obj.lowLimit}} W </span>--- 
                <span>{{obj.upLimit}} 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 packageDialog" v-bind:class="{ hidden: !info.dialogOpen }">
        <div class="edit-content">
            <div class="edit-box ">

                <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.dialogData.price"/>
                            <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=='billAsService'">
                    <div class="mui-input-row">
                        <label>价格</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" oninput="if(value>50)value=50;if(value<0)value=0" v-model.number="info.dialogData.elecCharge"/>
                            <span>元/度</span>
                        </div>
                    </div>
                    
                    <div class="mui-input-row ">
                        <label>电量</label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" oninput="if(value>50)value=50;if(value<0)value=0" v-model.number="info.dialogData.serviceCharge"/>
                            <span>元/度</span>
                        </div>
                    </div>
                </template>
                
                <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.lowLimit"/>
                            <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.upLimit"/>
                            <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: 'time',

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

                powerPackage: [],
                elecPackage: [],
                billAsServicePackage: [],
            },
        },

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

        computed: {},

        filters: {},

        methods: {

            initPackages: function () {
                this.info.chargeType = _chargeType;
                this.info.powerPackage = _powerPackage;
                this.info.elecPackage = _elecPackage;
                this.info.billAsServicePackage = _billAsServicePackage;
            },

            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';
                var packages = info[key];
                if (key === 'elecPackage' || key === 'powerPackage') {
                    if (packages.length <= 1) {
                        mui.toast("无法删除");
                        return
                    }
                }

                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.lowLimit === "") {
                        mui.toast("功率范围下限不能为空");
                        return;
                    }
                    if (dialogData.upLimit === "") {
                        mui.toast("功率范围上限不能为空");
                        return;
                    }
                    if (!dialogData.price) {
                        mui.toast("价格不能为空");
                        return;
                    }
                    if (dialogData.lowLimit * 1 > dialogData.upLimit * 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 = {lowLimit: "", upLimit: "", price: ""}
                }


            },

        }
    });
}


// 获取获取功率计费
ChargeTypeComponent.prototype.getPowerPackage = function () {
    return this.app.info.powerPackage;
};
// 获取电量单价
ChargeTypeComponent.prototype.getElecPrice = function () {
    return this.app.info.elecPackage[0].price;
};

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

// 获取服务费（电量）模式
ChargeTypeComponent.prototype.getBillAsServicePackage = function () {
    return this.app.info.billAsServicePackage[0];
};