<template>
    <div class="sider flex-column">
            <div v-for="(item,index) in menusArray" :key="index" @click="onChangeMenu(index)">
                <!-- fix: 页面刷新后 active 的处理 -->
                <template v-if="item.path !=  '/more'">

                        <a @click="routerLink(item)"><!--  :to="item.path"_-->
                            <div :class="currentIndex == index ? 'sider-item__acitve flex' : 'sider-item flex' ">
                                <a-icon :type="item.type" :title="item.title" />
                                <!-- <div >没有同步按钮</div> -->
                                <span v-if="item.path == '/mail'" class="sider-item__tipIcon">
                                    <a-icon v-if="!isMailSyncing" type="warning" theme="filled" class="icon--yellow" />
                                    <span v-else-if="newMailCount > 0" class="sider-item__badge flex-center">
                                        {{ newMailCount }}
                                        <!-- //note: 思考在怎麼處理，在什麼操作下，新郵件通知標記消失 -->
                                    </span>
                                </span>
                                <span v-if="index == 4" class="sider-item__tipIcon">
                                    客户UI2.0
                                </span>
                            </div>
                        </a>
                </template>
                <template v-else>
                        <!-- todo: 更多菜单选中后的样式  -->
                        <div :class="{ 
                                'sider-item__acitve flex': currentIndex == index && !isSubMenusShow, 
                                'sider-item flex': true, 
                                'sider-item--focus': isSubMenusShow 
                            }" @click="openSubMenu">
                                <a-icon :type="item.type" :title="item.title" />
                        </div>
                </template>  
            </div>

            <!-- fix: more的二級菜單部分 -->
            <div class="navSubMenu padding-20" v-show="isSubMenusShow">
                <!-- <div class="padding-20 flex-column">
                    <div class="flex-center" @click="pgLink('/importData')">
                        <a-icon type="vertical-align-bottom" class="iconNav" title="導入資料"/>
                        導入資料
                    </div>
                </div> -->
                <!-- {
                    path: '/userProfile',
                    title: '使用者概要',
                    type: 'dropbox'
                } -->
                <!-- todo: 遍历submenus -->
                <ul class="padding-20">
                    <!-- <li @click="pgLink('/userProfile')">
                        <a>
                        <a-icon type="dropbox" class="iconNav" title="使用者概要"
                        />使用者概要</a>
                    </li> -->
                    <li @click="pgLink('/importData')">
                        <a>
                        <a-icon type="vertical-align-bottom" class="iconNav" title="導入資料"
                        />導入資料</a>
                    </li>
                    <!-- <li @click="pgLink('/ImportExcel')">
                        <a>
                        <a-icon type="vertical-align-bottom" class="iconNav" title="導入資料Excel"
                        />導入資料Excel</a>
                    </li>
                    <li @click="pgLink('/importData')">
                        <a>
                        <a-icon type="vertical-align-top" class="iconNav" title="導出資料"
                        />導出資料</a>
                    </li>
                    <li @click="pgLink('/importData')">
                        <a>
                        <a-icon type="vertical-align-middle" class="iconNav" title="合併重複"
                        />合併重複</a>
                    </li>
                    <li @click="pgLink('/importData')">
                        <a>
                        <a-icon type="book" class="iconNav" title="知識庫"
                        />知識庫</a>
                    </li>
                    <li @click="pgLink('/importData')">
                        <a>
                        <a-icon type="phone" class="iconNav" title="行動裝置"
                        />行動裝置</a>
                    </li>
                    <li @click="pgLink('/insightsChartList')">
                        <a>
                        <a-icon type="bar-chart" class="iconNav" title="圖表分析"
                        />圖表分析
                        </a>
                    </li> -->
                </ul>
            </div>
        
    </div> 
</template>

<script>
export default {
  name: 'Sider',
    data () {
        return {
            // menusArray: ['github','google','apple','amazon','ellipsis'],
            currentIndex: 0,
            isSubMenusShow: false,
            menusArray: [
                // {
                //     path: '/custLatent',
                //     title: '潛在客戶',
                //     type: 'usergroup-add'
                // },
                {
                    path: '/business',
                    title: '交易',
                    type: 'pay-circle'
                },
                {
                    path: '/custList',
                    title: '客戶',
                    type: 'user'
                },
                {
                    path: '/persons',
                    title: '新客户模块',
                    type: 'user'
                },{
                    path: '/more',
                    title: '更多..導入資料',
                    type: 'small-dash'
                },
                {
                  path: '/activities',
                  title: '活動',
                  type: 'schedule'
                },
            ],
            subMenu: [{

            }]
        }
    },
    computed: {
        currentPath() {
            // let currentIndex = 0;
            let path = this.$route.path;
            // console.log('path', path);
            // this.currentIndex = this.menusArray.findIndex(item => ~path.indexOf(item.path));
            return path;
        },
        isMailSyncing() {//計算當前賬戶是否有郵件為同步狀態
            let result = this.$store.state.mail.isMailSyncing;
            return result;
        },
        newMailCount() {
            return this.$store.state.mail.newMailCount
        },
    },
    watch: {
        currentPath: {
            immediate: true,
            deep: true,
            handler (newValue, oldValue) {
                let path = this.$route.path;
                // console.log('path', path);
                // this.$util.console(path, 'path變動');
                if (~path.indexOf('setting') || ~path.indexOf('import')) {
                    this.currentIndex = 7;
                } else {
                    this.currentIndex = this.menusArray.findIndex(item => ~path.indexOf(item.path));
                };
            }
        }
    },
    methods: {
        onChangeMenu (index) {
            if (index == this.menusArray.length - 1) return;
            this.currentIndex = index; 
        },
        openSubMenu () {
            this.isSubMenusShow = !this.isSubMenusShow;
        },
        routerLink(linkData){
            console.log("linkData==============",linkData)
            if (linkData == '/more') return this.isSubMenusShow = true;
            this.isSubMenusShow = false;
            this.$router.push(linkData.path);
        },
        pgLink(pgUrl){
            this.isSubMenusShow = false;
            this.$router.push(pgUrl);
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .sider {
    padding-top: 5px;
    align-items: center;
    /* font-size: 36px !important; */
    /* background: red; */
  }

  .sider .anticon {
    font-size: 30px !important;
  }

  .sider div {
    /* 元素距离左右各10px */
    width: 80px;
    height: 60px;
    margin: auto;
    justify-content: center;
    border-radius: 7px;
    margin-bottom: 3px;
    cursor: pointer;
    /* font-size: 36px !important; */
  }

    .sider-item {
        color: #D2D2D2;
        /* font-size: 36px !important; */
        position: relative;
    }

    .sider-item__tipIcon {
        position: absolute;
        top: 5px;
        right: 10px;
    }

    .sider-item__tipIcon .anticon {
        font-size: 18px !important;
    }

    .sider-item__badge {
        color: #ffffff;
        background: #f74536;
        height: 18px;
        width: 20px;
        /* text-align: center; */
        /* line-height: 18px; */
        border-radius: 50%
    }

  .sider-item:hover{
    background: #F6F6FC;
    color: #383839 !important;
  }

  .sider-item__acitve {
    background: #F6F6FC;
    color: #383839 !important;
    position: relative;
  }

  .sider-item__focus {
    background: #F6F6FC;
    color: #383839 !important;
    position: relative;
  }

  .sider-item__acitve::before, .sider-item:hover::before {
    content: '';
    height: 56px;
    width: 4px;
    /* border-rdius: 5px; */
    position: absolute;
    left: -10px;
    top: 3px;
    background: #F86F54;
  }


  
</style>
