<template>
    <div id="slidebar-container" class="slidebar-container">
        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
            <template v-for="(item,_index) in items">
                <template v-if="item.subs">
                    <el-submenu :index=" 'index_' + _index" :key="item.index">
                        <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
                        <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="'/'+subItem.index">
                            <i class="sub-icon" :class="subItem.icon"></i>
                            {{subItem.title}}
                          <p class="redNum"
                             v-if="subItem.title == '资料不全居民'
                               &&notCompleteCount
                               &&$route.path!='/patients-manage/not-complete/uncompleted-list'"
                          >
                            <span v-if="notCompleteCount>999">+999</span>
                            <span v-else>{{notCompleteCount}}</span>
                          </p>
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <template v-if="item.isMessageSend">
                      <el-menu-item :key="item.index" @click="goToMessageSendPage" class="set-normal-background">
                          <i :class="item.icon"></i>{{ item.title }}
                      </el-menu-item>
                    </template>
                    <template v-else>
                      <el-menu-item :index="'/'+item.index" :key="item.index">
                          <i :class="item.icon"></i>{{ item.title }}
                      </el-menu-item>
                    </template>
                </template>
            </template>
        </el-menu>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { setTimeout } from 'timers'
import { isNotEmptyUtils } from '../../utils/utils'
let vm = null
export default {
    props: {
      storageIdType: {
        type: Number,
        default: 0
      },
        tokenValue: {
            type: String
        },
        authList: {
            type: Object,
            default: () => {}
        },
        notCompleteCount: {
          type: Number,
        }
    },
    data() {
        return {
            items: [
                {
                    title: '数据总览',
                    icon: 'el-icon-menu',
                    index: 'home',

                },{
                    title: '教培项目',
                    icon: 'el-icon-message',
                    index: 'item',
                    subs: [
                        {
                            title: '项目组件',
                            icon: 'el-icon-setting',
                            index: 'item-component'
                        },
                        {
                            title: '项目管理',
                            icon: 'el-icon-setting',
                            index: 'item-manager'
                        },
                    ]
                },{
                    title: '系统管理',
                    icon: 'el-icon-menu',
                    index: 'system',
                    subs: [
                        {
                            title: '角色管理',
                            icon: 'el-icon-setting',
                            index: 'role'
                        }
                    ]
                },{
                    title: '居民管理',
                    icon: 'el-icon-patients-manage',
                    index: 'patients-manage',
                    subs: [
                      {
                        title: '我的居民',
                        icon: 'el-icon-setting',
                        index: 'patients-manage/mypatients-manage/patients-list'
                      },
                      {
                        title: '新增居民',
                        icon: 'el-icon-setting',
                        index: 'patients-manage/new-manage/new-patient'
                      },
                      {
                        title: '分组管理',
                        icon: 'el-icon-setting',
                        index: 'patients-manage/labels-manage/labels-list'
                      },
                      {
                        title: '资料不全居民',
                        icon: 'el-icon-setting',
                        index: 'patients-manage/not-complete/uncompleted-list'
                      }
                    ]
                },{
                  title: '消息推送',
                  icon: 'el-icon-message',
                  isMessageSend: true,
                },
            ]
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path;
        }
    },
    created() {
        vm = this;
    },
    mounted(){
        if(vm.storageIdType==2){
//          vm.setFollowSide()
        }
    },
    watch: {
        authList(newVal, oldVal){
            if(!newVal.P001) { // 项目管理
                vm.items[1].subs[1].index = 'blank'
            }
            if(!newVal.P002) { // 组件管理
                vm.items[1].subs[0].index = 'blank'
            }
            if(!newVal.P003) { // 角色管理
                vm.items[2].subs[0].index = 'blank'
            }
        },
      storageIdType(val,ov){
        if(val==2){
//          vm.setFollowSide()
        }
      }
    },
    methods: {

      setFollowSide(){
        const followSider =  {
          title: '随访管理',
          icon: 'el-icon-edit-outline',
          index: 'followup',
          subs: [
            {
              title: '计划管理',
              icon: 'el-icon-setting',
              index: 'followup/plan-manage/plan-list'
            },
            {
              title: '预约管理',
              icon: 'el-icon-setting',
              index: 'followup/reservation-manage/reservation-list'
            },
            {
              title: '录入管理',
              icon: 'el-icon-setting',
              index: 'followup/record-manage/record-list'
            }
          ]
        }
        vm.items.push(followSider);
      },
      goToMessageSendPage() {
        let env = process.env.BUILD_ENV;
        let src = '';
        if( (env == 'development') || (env == 'dev') ){  // 本地开发环境 || jenkins dev
          src = 'https://dev-saas.yunqueyi.com/pica-frontend/patientEduManage/pica_patient_edu_manage.html#/pageTab/message'
        }else if( (env == 'test') || (env == 'test2') ){  // test
          src = 'https://test1.yunqueyi.com/pica-frontend/patientEduManage/pica_patient_edu_manage.html#/pageTab/message';
        }else if( env == 'uat' ){  // uat
          src = 'https://uat.yunqueyi.com/pica-frontend/patientEduManage/pica_patient_edu_manage.html#/pageTab/message';
        }else if( env == 'pro' ){  // 线上
          src = 'https://www.yunqueyi.com/pica-frontend/patientEduManage/pica_patient_edu_manage.html#/pageTab/message';
        }
        let newTab=window.open('about:blank');
        newTab.location = src;
      },
    }
}
</script>
<style lang="scss">
.slidebar-container {
    display: block;
    position: absolute;
    left: 0;
    top: 64px;
    bottom: 0;
    width: 255px;
    background: #06232C;
    .el-menu {
        background: #06232C;
        border-right: none;
        .sub-icon {
            font-size: 12px;
        }
        .el-menu-item, .el-submenu__title {
            color: #8FA4AC;
        }
        .el-menu-item.is-active {
            color: #fff;
            background: #509284 !important
        }
        .el-menu-item:hover,
        .el-submenu__title:hover,
        .slidebar-container .el-menu .el-menu-item:hover,
        .slidebar-container .el-menu .el-submenu__title:hover {
            color: #fff;
            background: #06232C;
        }
        // .el-menu-item:focus, .el-menu-item:hover {
        //     background: #06232C !important;
        // }
        .el-icon-patients-manage{
          width: 17px;
          height: 17px;
          background: url('../../assets/image/patients-icon.png');
          margin: 0 8px 0 3px ;
          background-size: 17px 17px;
          opacity: 0.6;
        }
        .set-normal-background{
          background: #06232C;
        }
    }
  .redNum {
    display: inline-block;
    border-radius: 10px;
    margin-left: 15px;
    background: #EE263E;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
    /*padding: 5px 10px;*/
    padding: 2px 5px;
    span {
      display: block;
    }
  }
}
</style>


