<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 &&
              !(
                '' == item.subs ||
                null == item.subs ||
                undefined == item.subs ||
                null == item.subs
              )
            "
          >
            <el-sub-menu :index="'index_' + _index" :key="item.index + _index">
              <template v-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-sub-menu>
          </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>

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

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,
      isShowGoods: 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-first-aid-kit',
        // index: 'shop'
        // },
      ],
      outsideItems: [
        // 外部用户 路由
        {
          title: '学分发放管理',
          icon: 'el-icon-document',
          index: 'credit-send-manage',
        },
      ],
      /*outsideGoodsItem: [//只有通过店铺管理操作才可展示
          {
            title: '商品管理',
            icon: 'el-icon-first-aid-kit',
            index: 'goods-manage'
          },
          {
            title: '订单管理',
            icon: 'el-icon-first-aid-kit',
            index: 'order-manage'
          },
        ],*/
    }
  },
  computed: {
    onRoutes() {
      return this.$route.path
    },
  },
  created() {
    vm = this
    this.getUserType()
  },
  mounted() {
    console.log('mounted() : this.storageIdType = ' + this.storageIdType)
    if (this.storageIdType == 1) {
      vm.setEntrySide()
    } else if (this.storageIdType == 2) {
      vm.setFollowSide()
      vm.getRoleObj()
    }
    vm.setShopSide()
    vm.setCircleSlide()
  },
  watch: {
    authList(newVal, oldVal) {
      console.log(
        'watch.authList() : newVal = ' + newVal + ', oldVal = ' + 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) {
      console.log('watch.storageIdType() : val = ' + val)
      if (val == 1) {
        vm.setEntrySide()
      } else if (val == 2) {
        vm.setFollowSide()
        vm.getRoleObj()
      }
    },
  },
  methods: {
    getUserType() {
      // console.log('当前路由地址：', this.$route.path, typeof this.$route.path)
      console.log('getUserType() : enter')
      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只展示一个：学分发放管理页面
          //     // TODO this.isOutsideUser = true;
          //     this.isOutsideUser = false;
          //     this.$store.dispatch('cmeStore/updateOutUserStatus', true);
          //     if (currentPath && currentPath == '/apply-detail') {  // 申请明细页面 则刷新时不重定向
          //       return;
          //     }
          //     //TODO this.$router.replace({
          //     //   path: '/credit-send-manage'
          //     // });
          //   } else {  // 非外部用户 正常展示多路由
          if (res.code == '000000') {
            console.log('getUserType() : res.data.code = ' + res.data.code)
            // this.getSlideData();
            if (res.data.code == 'yes') {
              // 外部用户，siderbar只展示一个：学分发放管理页面
              // this.isOutsideUser = true;
              //外部用户展示之前内部用户固定展示的内容
              this.isOutsideUser = false
              this.$store.dispatch('cmeStore/updateOutUserStatus', true)
              if (currentPath && currentPath == '/apply-detail') {
                // 申请明细页面 则刷新时不重定向
                return
              }
              // this.$router.replace({
              //   path: "/credit-send-manage",
              // });
            } else {
              // 非外部用户 正常展示多路由
              this.getSlideData()
              this.isOutsideUser = false
              this.$store.dispatch('cmeStore/updateOutUserStatus', false)
            }
          }
        })
        .catch((err) => {
          console.log('getUserTypeReq() : err = ' + err)
          this.$message.error('请求失败')
        })
    },

    getSlideData() {
      let self = this

      //获取菜单
      // let url = localStorage.getItem("msUrl") + "login/menu/list";
      let req = {
        // token: localStorage.getItem("token"),
        system_type: 25,
        device_ip: localStorage.getItem('ipAddress'),
        browser_ver: localStorage.getItem('browser'),
      }

      // let headers = {
      //   headers: {
      //     token: localStorage.getItem("token") || null,
      //   },
      // };
      getSlideData(req)
        .then((res) => {
          // responseCheck(res, self);
          // console.log("getSlideData 获取菜单成功===========", res);
          // self.items = res.data.data.picapMenuModels;
          // let data = JSON.parse(JSON.stringify(res.data.data)); //通过这个实现深拷贝
          // localStorage.setItem(
          //   "privilege_data",
          //   JSON.stringify(data.picapMenuModels)
          // );
          // localStorage.setItem("user_name", data.user_name);
          // localStorage.setItem("function_role", data.function_role);
          // localStorage.setItem("initFlag", "1");

          vm.items = res.data.picapMenuModels
        })
        .catch(function (error) {
          console.log('获取菜单失败!%s', error)
          errorResponseCheck(error, self)
        })
    },

    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')
        localStorage.removeItem('createCircle')
        if (res.code == '000000') {
          //mainManager主管理员，manager管理员，ordinary普通人
          const {
            highMainManager,
            mainManager,
            manager,
            ordinary,
            createCircle,
          } = 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))
          localStorage.setItem('createCircle', vm.setStoreData(createCircle))
          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 subjectManager = {
        title: '学科管理',
        icon: 'el-icon-setting',
        index: 'subject-manager',
      }

      const reportDownLoad = {
        title: '汇总与明细表下载',
        icon: 'el-icon-setting',
        index: 'report-download',
      }

      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(subjectManager)
      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[1].subs.push(reportDownLoad)
      vm.items.push(eduRole)
      vm.items.push(cme)
      vm.items.push(yqRange)
      vm.items.push(outResourceManage)
    },
    setShopSide() {
      queryShopAuth().then((res) => {
        // 0 表示超级管理员,大于0 表示小店或供应商,null 表示非法用户
        if (res.data >= 0) {
          const shop = {
            title: '云鹊店铺',
            icon: 'el-icon-first-aid-kit',
            index: 'shop-list',
          }
          vm.items.push(shop)
        } else {
          return
        }
      })
    },

    // judge/menu
    setCircleSlide() {
      circleMenu({}).then((res) => {
        if (res.data === true) {
          this.items[2].subs.push({
            title: '新建小圈权限分配',
            icon: 'el-icon-setting',
            index: 'circle-limit',
          })
        }
      })
    },
    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;
        })
      }
    },

    // judge/menu
    setCircleSlide() {
      circleMenu({}).then((res) => {
        if (res.data === true) {
          this.items[2].subs.push({
            title: '新建小圈权限分配',
            icon: 'el-icon-setting',
            index: 'circle-limit',
          })
        }
      })
    },
  },
}
</script>

<style lang="scss">
.slidebar-container {
  display: block;
  position: absolute;
  left: 0;
  top: 64px;
  bottom: 0;
  width: 255px;
  background: #06232c;
  overflow-y: scroll;
  .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>
