/**
* newnotify-dialog.vue
* Version: 0.1
* User: wujie
* Date: 2017-12-26
* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* newnotify-dialog
*
******************************************************************************
*  依赖 
    通知栏插件 isNotifycationOpen toNotifycationSetting
    多语言 需要配置多语言
*  支持环境
    App
*
*/
<template>
    <div id="app" v-cloak>
        <div class="header">
            <p>开启通知</p>
        </div>
        <div class="content"> 
            <ul class="u-android-notify">
                <li class="u-android-notify-row" v-bind:class = "setp1Active">
                    <span class="u-android-notify-icon">&#xe6c1;</span>
                    <span class="u-android-notify-finish-icon" v-show="isStep1Finish"></span>
                    <div class="u-android-notify-title">
                        {{toSettingTitle}}
                        <v-touch tag="div" class="u-android-notify-button" v-show="isToSetting" v-on:tap="onOpenNotify">{{toSettingsub}}
                        <span></span></v-touch>
                    </div>
                </li>
                <li class="u-android-notify-row" v-bind:class = "setp2Active">
                    <span class="u-android-notify-icon">&#xe6c0;</span>
                    <span class="u-android-notify-finish-icon" v-show="isStep2Finish"></span>
                    <div class="u-android-notify-title">
                        {{checkSetting}}
                        <v-touch tag="div" class="u-android-notify-button" v-show="isKnow" v-on:tap="onIKnow">{{IKonw}}</v-touch>
                    </div>
                    <div class="u-android-notify-tip">{{checkSettingsubTitle}}</div>
                    <div class="u-android-notify-subtitle">{{step1Title}}</div>
                    <div class="u-android-notify-subcontent">{{step1content}}</div> 
                    <div class="u-android-notify-subtitle">{{step2Title}}</div>
                    <div class="u-android-notify-subcontent">{{step2content}}</div>    
                    <div class="u-android-notify-subtitle">{{step3Title}}</div>
                    <div class="u-android-notify-subcontent">{{step3content}}</div> 
                </li>
                <li class="u-android-notify-row" v-bind:class = "setp3Active">
                    <span class="u-android-notify-icon">&#xe6c2;</span>
                    <span class="u-android-notify-finish-icon" v-show="isStep3Finish"></span>
                    <div class="u-android-notify-title">
                        {{endSetting}}
                        <v-touch tag="div" class="u-android-notify-button" v-show="isToIndex" v-on:tap="onToIndex">{{toAppIndex}}
                        <span></span></v-touch>
                    </div>
                </li>
            </ul>
        </div> 
    </div>
</template> 

<script>
    export default {
        props: ['initParam','toIndex'],
        data () {
            return {
                toSettingTitle:Vue.t('androidNotify.toSettingTitle'),
                toSettingsub:Vue.t('androidNotify.toSettingsub'),
                checkSetting:Vue.t('androidNotify.checkSetting'),
                IKonw:Vue.t('androidNotify.IKonw'),
                checkSettingsubTitle:Vue.t('androidNotify.checkSettingsubTitle'),
                step1Title:Vue.t('androidNotify.step1Title'),
                step1content:Vue.t('androidNotify.step1content'),
                step2Title:Vue.t('androidNotify.step2Title'),
                step2content:Vue.t('androidNotify.step2content'),
                step3Title:Vue.t('androidNotify.step3Title'),
                step3content:Vue.t('androidNotify.step3content'),
                endSetting:Vue.t('androidNotify.endSetting'),
                toAppIndex:Vue.t('androidNotify.toIndex'),

                notifyState:false, // 当前是否开启了通知
                gotoIndex:this.toIndex,// 处理点击到index按钮事件
                isKnow:iot.native.isNotifycationOpen(),//是否需要显示 我已阅读
                isToIndex:false,// 是否需要显示去首页按钮
                isStep1Finish:iot.native.isNotifycationOpen(),//是否需要显示步骤1的勾
                isStep2Finish:false,//是否需要显示步骤2的勾
                isStep3Finish:false,//是否需要显示步骤3的勾
                isToSetting:!iot.native.isNotifycationOpen(),//是否需要显示去设置按钮
                setp1Active:'active',
                setp2Active:null,// 默认为灰色 不显示active
                setp3Active:null,
            }
        },
        mounted: function () {
            console.log("notifyState："+iot.native.isNotifycationOpen())
            // 监听程序恢复前台
            document.addEventListener("resume", ()=>{
                onAppReume(this);
            }, false);
        },
        watch: {
            
        },
        methods: {
            // 点击按钮关闭弹出框
            onOpenNotify(){
                openNotify(this);
            },
            onIKnow(){
                IKonw(this);
            },
            onToIndex(){
                toIndex(this);
            }
            
        }
    };

    function openNotify(self) {
        console.log("去开启");
        iot.native.toNotifycationSetting("notify");
        self.setp1Active = 'active changeBorder';
    }

    function IKonw(self){
        console.log("点击了我已阅读");
        self.isStep2Finish = true; // 点击阅读后显示步骤2的勾
        self.setp2Active = "active changeBorder";// 点击阅读后显示步骤2的字体亮度调高
        self.setp3Active = "active";// 同时步骤3的字体亮度也调高
        self.isStep3Finish = true; // 步骤3的勾勾选
        self.isToIndex = true;//显示去首页按钮
        self.isKnow = false; // 点击我已阅读隐藏我已阅读按钮
    }

    function toIndex(self){
        console.log("gotoIndex...");
        self.gotoIndex();
    }

    function onAppReume(self){
       let notifyState = iot.native.isNotifycationOpen(); 
       console.log("notifyState:"+notifyState);
       if (notifyState) {self.setp2Active = "active changeBorder";}
       self.isStep1Finish = iot.native.isNotifycationOpen();// 再次判断当前通知是否开启
       self.isToSetting = !iot.native.isNotifycationOpen(); // 再次判断是否需要显示去设置按钮
       self.isKnow = iot.native.isNotifycationOpen(),// 再次判断是否需要显示 我已阅读
       self.$nextTick(function () {
            console.log("重新渲染");
          });
    }
</script>






