<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'
  import { getCircleRole } from '@/utils/patients/patientsapi'

  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
      },
      roleObj: {
        type: Object,
        default(){
          return {
            mainManager: null,
            manager: null,
            ordinary: null,
          }
        }
      }
    },
    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-document',
                index: 'export-download'
              },
              {
                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(){
      if(this.storageIdType == 1){
        vm.setEntrySide();
      } else if(this.storageIdType == 2) {
        vm.setFollowSide();
        vm.getRoleObj();
      }
    },
    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){
        if(val == 1){
          vm.setEntrySide();
        } else if(val == 2) {
          vm.setFollowSide();
          vm.getRoleObj();
          // let mainManager = localStorage.getItem('mainManager')
          // let manager = localStorage.getItem('manager')
          // console.log('存储权限值',mainManager,manager)
          // if (mainManager == 1 || manager == 1) {
          //   vm.setCircleSize();
          // }
        }
      },
    },
    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('请求失败');
        });
      },
      setStoreData(value) {
        if (value){
          return 1;
        }else {
          return 0;
        }
      },
      getRoleObj() {
        getCircleRole({}).then((res) => {
          localStorage.removeItem('highMainManager');
          localStorage.removeItem('mainManager');
          localStorage.removeItem('manager');
          localStorage.removeItem('ordinary');
          if(res.code == '000000') {
            //mainManager主管理员，manager管理员，ordinary普通人
            const { highMainManager, mainManager, manager, ordinary} = res.data;
            localStorage.setItem('highMainManager', vm.setStoreData(highMainManager))
            localStorage.setItem('mainManager', vm.setStoreData(mainManager))
            localStorage.setItem('manager', vm.setStoreData(manager))
            localStorage.setItem('ordinary', vm.setStoreData(ordinary))
            if (highMainManager || mainManager || manager) {
              // vm.items.push(yqRange);
              vm.setCircleSize();
            }
          } else {
            vm.$message.info(res.message)
          }
        })
      },
      setCircleSize(){
        console.log('设置云鹊小圈')
        const yqRange = {
          title: '云鹊小圈',
          icon: 'el-icon-setting',
          index: 'yq-range'
        };
        vm.items.push(yqRange);
      },
      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'
            }
          ]
        }

        const patients = {
          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'
            }
          ]
        }

        const message = {
          title: '消息推送',
          icon: 'el-icon-message',
          index: 'msg-push',
          isMessageSend: true,
          checkAuth: true,
        }

        const yqRange = {
          title: '云鹊小圈',
          icon: 'el-icon-setting',
          index: 'yq-range'
        };

        vm.items[1].title = '教育培训';
        vm.items.push(followSider);
        vm.items.push(patients);
        vm.items.push(message);

        // let mainManager = localStorage.getItem('mainManager')
        // let manager = localStorage.getItem('manager')
        // if (mainManager == 1 || manager == 1) {
        //   vm.items.push(yqRange);
        // }
      },

      setEntrySide() {
        const itemComponent = {
          title: '项目组件',
          icon: 'el-icon-setting',
          index: 'item-component'
        };
        const followSider = {
          title: '入口管理',
          icon: 'el-icon-setting',
          index: 'entry-manager'
        };
        const templateManager = {
          title: '模板管理',
          icon: 'el-icon-setting',
          index: 'template-manager'
        };
        const advertSimpleManage = {
          title: '教培项目广告位管理',
          icon: 'el-icon-setting',
          index: 'advert-simple-manage'
        };

        const eduRole = {
          title: '角色权限',
          icon: 'el-icon-menu',
          index: 'role',
          subs: [
            {
              title: '发起教培项目赋权',
              icon: 'el-icon-setting',
              index: 'edu-role'
            }
          ]
        }
        const cme =  {
          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'
            },
            // {
            //   title: '外部资源管理',
            //   icon: 'el-icon-document',
            //   index: 'external-resource-manage'
            // },
          ]
        }

        const yqRange = {
          title: '云鹊小圈',
          icon: 'el-icon-setting',
          index: 'yq-range'
        };

        const outResourceManage =  {
          title: '外部资源管理',
          icon: 'el-icon-reading',
          index: 'external-resource-manage',
          subs: [
            {
              title: '外部资源列表',
              icon: 'el-icon-document',
              index: 'external-resource-manage'
            },
          ]
        };


        vm.items[1].subs.push(itemComponent);
        vm.items[1].subs.push(templateManager);
        vm.items[1].subs.push(followSider);
        vm.items[1].subs.push(advertSimpleManage);
        vm.items.push(eduRole);
        vm.items.push(cme);
        vm.items.push(yqRange);
        vm.items.push(outResourceManage);
      },

      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>
