<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 :index="'/'+item.index" :key="item.index" @click="goToMessageSendPage(item.checkAuth)" 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 utils from '@/utils/followup/followupUtils';
  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',
            index: 'msg-push',
            isMessageSend: true,
            checkAuth: 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(checkAuth) {
        if(checkAuth){
          utils.checkAuthFunc().then(res=>{
            console.log(res)
            if(res==3){
            }else{
              return
            }
            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';
            }
            location.href = src;
//            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>
