<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-submenu :index="'index_' + _index" :key="item.index + _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>

      <!--<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") {
            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 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.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;
        }
      });
    },

    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>
