function PackageComponent(option) {
    var _el = option.el;
    var _rule = option.policy.rule;
    var _money = option.policy.money;
    var _auto_stop = option.policy.auto_stop;
    var _type = option.policy.type;

    var app = this.app = new Vue({
        el: _el,
        template: `
<div>
    <h5 class="mui-content-padded">离线卡配置</h5>
    <div class="edit-box" action="">
        <div class="mui-input-row">
            <label class="">离线卡刷卡金额 </label>
            <div class="mui-pull-right edit-row">
                <input type="number" min=0 max=50 step="0.01" v-model.number="info.money" class="save-data padding-r-35">
                <span class="mini-unit">元</span>
            </div>
        </div>
        
      <div class="mui-input-row mui-checkbox" v-if="info.type==='time'">
        <label>充满自动停止
        <input type="checkbox" v-model="info.auto_stop">
        </label>
        </div>
    </div>
<h5 class="mui-content-padded">离线卡计费规则</h5>
    <div class="mui-input-group">

        <div class="mui-input-row mui-radio">
            <label for="type1">1. 按时间计费</label>
            <input id="type1" v-model="info.type" name="type" value="time" type="radio">
        </div>
        <template v-if="info.type==='time'">
            <ul class="mui-table-view" style="background: #F6F6F6">
                <li class="mui-table-view-cell table" v-for="(item, index) in info.rule.prices">
                    <div class="inline-block">
                        {{ powerRadio(item, index, info.rule.prices) }}，{{ item.price }} 元/小时
                    </div>
                    <span class="mui-pull-right">
                    <em v-on:click.stop="editPackageRule(item,index)" class="padding-t-b-10"><i
                            class="iconfont icon-edit c-primary"></i>编辑</em>
                    <em v-on:click.stop="deletePackageRule(item,index)" class="padding-t-b-10"><i
                            class="iconfont icon-delete c-red"></i>删除</em></span>
                </li>
                <div class="mui-table-view-cell" v-on:click.stop="addPolicyRule()"><span><i
                        class="iconfont icon-add c-success font-18"></i>添加</span></div>
            </ul>
        </template>
     </div>
     
      <div class="mui-input-group">
        <div class="mui-input-row mui-radio">
            <label for="type2">2. 按电量计费</label>
            <input id="type2" v-model="info.type" name="type" value="elec" type="radio">
        </div>
        <template v-if="info.type==='elec'">
            <ul class="mui-table-view edit-box" style="background: #F6F6F6">
                <li>
                    <div class="mui-input-row">
                        <label class="">电量单价 </label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" max="5000" step="0.01" min="0" v-model.number="info.rule.price"
                                   class="save-data padding-r-35">
                            <span class="mini-unit">元/度</span>
                        </div>
                    </div>
                </li>

            </ul>
        </template>
     </div>
     
      <div class="mui-input-group" v-if="false">
        <div class="mui-input-row mui-radio">
            <label for="type3">3. 按次计费</label>
            <input id="type3" v-model="info.type" name="type" value="count" type="radio">
        </div>
        <template v-if="info.type==='count'">
            <ul class="mui-table-view edit-box" style="background: #F6F6F6">
                <li>
                    <div class="mui-input-row">
                        <label class="">单次最大电量 </label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" max="5000" step="0.01" min="0" v-model.number="info.rule.elec"
                                   class="save-data padding-r-35">
                            <span class="mini-unit">度</span>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="mui-input-row">
                        <label class="">单次最大时长 </label>
                        <div class="mui-pull-right edit-row">
                            <input type="number" max="5000" step="0.01" min="0" v-model.number="info.rule.time"
                                   class="save-data padding-r-35">
                            <span class="mini-unit">分钟</span>
                        </div>
                    </div>
                </li>


            </ul>
        </template>
    
     </div>
    
     

    <div class="edit-back packageDialog" v-if="info.dialogOpen">
        <div class="edit-content">
            <div class="edit-box ">

                <template v-if="info.type=='time'">
                    <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.number="info.dialogData.power"
                            />
                            <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" v-model.number="info.dialogData.price"
                            />
                            <span>元/小时</span>
                        </div>
                    </div>
                </template>

                <template v-if="info.type=='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" disabled value="1"
                            />
                            <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" v-model.number="info.dialogData.elec"
                            />
                            <span>度</span>
                        </div>
                    </div>
                </template>

            </div>
            <div class="mui-popup-buttons ">
                <span class="mui-popup-button" v-on:click.stop="closeRulePanel()">取消</span>
                <span class="mui-popup-button mui-popup-button-bold" v-on:click.stop="savePackageRule()">确认</span>
            </div>
        </div>
    </div>
</div>
        `
        ,
        data: {
            info: {
                type: 'time',
                dialogIndex: 0,
                dialogOpen: false,
                dialogData: {},
                rule: {
                    prices:[],
                },
                money: 0,
                auto_stop: false,

            },
        },

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

        computed: {},

        filters: {},

        methods: {
            save_obj() {
                if (this.info.type === 'time') {
                    delete this.info.rule.price

                } else if (this.info.type === 'elec') {
                    delete this.info.rule.prices
                    delete this.info.rule.time

                } else if (this.info.type === 'count') {
                    this.info.type = 'elec'
                    delete this.info.rule.prices

                }
                console.log('this.info.type111', this.info.type)
                console.log('this.info', this.info)

            },


            initPackages: function () {
                this.info.type = _type;
                this.info.auto_stop = _auto_stop;
                this.info.money = _money;
                this.info.rule = _rule;
            },

            getDefaultPolicyDialog() {
                return {
                    "power": '',
                    "price": ''
                }
            },

            addPolicyRule() {
                this.info.dialogIndex = (this.info.rule.prices || []).length;
                this.info.dialogOpen = true;
                $("body").addClass("over-hide");
                this.info.dialogData = this.getDefaultPolicyDialog();
            },
            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 packages = info.rule.prices
                if (info.type === 'elec') {
                    if (packages.length <= 1) {
                        mui.toast("必须有一条配置");
                        return
                    }
                }

                info.rule.prices.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
                if (info.type == 'time') {
                    packages = this.info.rule.prices || []
                }


                if (info.type === 'time') {
                    if ($.trim(dialogData.power) === '') {
                        mui.toast("功率不能为空");
                        return;
                    }

                    if (!dialogData.price) {
                        mui.toast("价格不能为空");
                        return;
                    }
                }
                if (info.type === 'elec') {
                    if ($.trim(dialogData.power) === '') {
                        mui.toast("功率不能为空");
                        return;
                    }

                    if (!dialogData.price) {
                        mui.toast("价格不能为空");
                        return;
                    }
                }

                if (info.chrmt === 'ELEC') {
                    if (!dialogData.elec) {
                        mui.toast("电量不能为空");
                        return;
                    }
                }

                console.log('info.dialogIndex', info.dialogIndex)
                console.log('packages', packages)

                packages[info.dialogIndex] = $.extend(true, {}, info.dialogData);
                this.info.rule.prices = packages

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

            addPackageRule: function () {
                var that = this;
                var info = that.info
                var key = 'package_' + info.chrmt.toLowerCase()
                var packages = info[key]
                if (key === 'package_elec') {
                    if (packages.length >= 1) {
                        mui.toast("只能有一条配置");
                        return
                    }
                }
                info.dialogIndex = packages.length;
                info.dialogOpen = true;
                $("body").addClass("over-hide");//避免滚动穿透，直接禁止body滚动


                if (info.chrmt === 'TIME') {
                    info.dialogData = {
                        power: "",
                        time: "",
                    };
                }

                if (info.chrmt === 'ELEC') {
                    info.dialogData = {
                        price: "1",
                        elec: "",
                    };
                }

                if (info.chrmt === 'POWER') {
                    info.dialogData = {
                        power: "",
                        time: "",
                    };
                }
            },

            powerRadio(item, index, obj) {
                return ((obj[index - 1] && obj[index - 1].power) || 0) + "W-" + item.power + "W"
            },
        }
    });
}

PackageComponent.prototype.getPolicyTemp = function () {
    return {
        "money": this.app.info.money,
        "type": this.app.info.type,
        "rule": this.app.info.rule,
        "auto_stop": this.app.info.auto_stop
    }

};


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 padding-r-35" maxlength="1" min=0 max=7 required  placeholder="音量" v-model.number="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.stop="editPackageRule(obj,index)" class="padding-t-b-10"><i class="iconfont icon-edit c-primary"></i>编辑</em>
        <em v-on:click.stop="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.stop="addPackageRule()"><span><i class="iconfont icon-add c-success font-18"></i>添加</span></div>
        </div>

        <div class="edit-back packageDialog" v-if="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=0 max=7 v-model.number="info.dialogData.volume"/>
                        </div>
                    </div>

                </div>
                <div class="mui-popup-buttons ">
                    <span class="mui-popup-button" v-on:click.stop="closeRulePanel()">取消</span>
                    <span class="mui-popup-button mui-popup-button-bold" v-on:click.stop="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;
};