<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-if="isOutsideGetted && isOutsideUser">
        <el-menu-item v-for="(outItem, outIndex) in outsideItems" :index="'/'+outItem.index" :key="outIndex">
          <i :class="outItem.icon"></i>{{ outItem.title }}
        </el-menu-item>
      </template>
      <template v-if="isOutsideGetted && !isOutsideUser">
        <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>
      </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'
  import { getUserTypeReq } from '@/utils/cme/cmeApi'

  let vm = null
  export default {
    props: {
      storageIdType: {
        type: Number,
        default: 0
      },
      tokenValue: {
        type: String
      },
      authList: {
        type: Object,
        default: () => {}
      },
      notCompleteCount: {
        type: Number,
      },
      masterFlag: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        isOutsideUser: false,   // 是否是外部用户；（外部用户：只展示一个页面路由； 非外部用户：正常展示之前的逻辑）
        isOutsideGetted: false,
        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,
          },
          // {
          //   title: '学情报告',
          //   icon: 'el-icon-tickets',
          //   index: 'report-list',
          //   subs: [
          //     {
          //       title: '项目列表',
          //       icon: 'el-icon-document',
          //       index: 'report-list'
          //     },
          //     {
          //       title: '任务列表',
          //       icon: 'el-icon-document',
          //       index: 'export-download'
          //     }
          //   ]
          // },
          {
            title: 'CME',
            icon: 'el-icon-reading',
            index: 'credit-manage',
            subs: [
              {
                title: '学分管理列表',
                icon: 'el-icon-document',
                index: 'credit-manage'
              },
              {
                title: '审核权限管理',
                icon: 'el-icon-document',
                index: 'review-access-manage'
              },
              {
                title: '学分发放管理',
                icon: 'el-icon-document',
                index: 'credit-send-manage'
              },
            ]
          },         
        ],
        outsideItems: [  // 外部用户 路由
          {
            title: '学分发放管理',
            icon: 'el-icon-document',
            index: 'credit-send-manage'
          },
        ],
      }
    },
    computed: {
      onRoutes() {
        return this.$route.path;
      }
    },
    created() {
      vm = this;
      this.getUserType();
    },
    mounted(){

    },
    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 == 1){    
          vm.setEntrySide();
        } else if(val == 2) {
          vm.setFollowSide();
        }
      },
    },
    methods: {
      getUserType() {
        // console.log('当前路由地址：', this.$route.path, typeof this.$route.path)
        let currentPath = this.$route.path || '';
        let req = {};
        // console.log('isOutsideUser: ', this.$store.state.cmeStore.isOutsideUser)
        getUserTypeReq(req).then(res => {
          // debugger;
          this.isOutsideGetted = true;
          if (res.code == '000000') {
            if (res.data.code == "yes") {  // 外部用户，siderbar只展示一个：学分发放管理页面
              this.isOutsideUser = true;
              this.$store.dispatch('cmeStore/updateOutUserStatus', true);
              if (currentPath && currentPath == '/apply-detail') {  // 申请明细页面 则刷新时不重定向
                return;
              }
              this.$router.replace({
                path: '/credit-send-manage'
              });
            } else {  // 非外部用户 正常展示多路由
              this.isOutsideUser = false;
              this.$store.dispatch('cmeStore/updateOutUserStatus', false);
            }
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      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);
      },
      setEntrySide() {
        console.log(222);
        const followSider = {
          title: '入口管理',
          icon: 'el-icon-setting',
          index: 'entry-manager'
        };
        const templateManager = {
          title: '模板管理',
          icon: 'el-icon-setting',
          index: 'template-manager'
        };
        
        const eduRole = {
          title: '角色权限',
          icon: 'el-icon-menu',
          index: 'role',
          subs: [
            {
              title: '发起教培项目赋权',
              icon: 'el-icon-setting',
              index: 'edu-role'
            }
          ]
        }
        vm.items[1].subs.push(templateManager);
        vm.items[1].subs.push(followSider);
        vm.items.push(eduRole);
      },
      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>
