<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item
        v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
        :index="item[pathKey] + ''"
        :key="item[pathKey]"
        :class="{'is-active': vaildAvtive(item)}"
        @click="open(item)"
      >
        <i :class="item[iconKey]" />
        <span slot="title" :alt="item[pathKey]">{{ item[labelKey] }}</span>
      </el-menu-item>
      <el-submenu v-else-if="!validatenull(item[childrenKey]) && vaildRoles(item)" :index="item[pathKey] + ''" :key="item[pathKey]">
        <template slot="title">
          <i :class="item[iconKey]" />
          <span slot="title" :class="{'el-menu--display': collapse && first}">{{ item[labelKey] }}</span>
        </template>
        <template v-for="(child, cindex) in item[childrenKey]">
          <el-menu-item
            v-if="validatenull(child[childrenKey])"
            v-show="isShow(child[labelKey])"
            :index="(child[pathKey], cindex) + ''"
            :class="{'is-active': vaildAvtive(child)}"
            :key="child[pathKey]"
            @click="open(child)"
          >
            <i :class="child[iconKey]" />
            <span slot="title">{{ child[labelKey] }}</span>
          </el-menu-item>
          <sidebar-item v-else :menu="[child]" :key="cindex + ''" :props="props" :screen="screen" :collapse="collapse" />
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';
import {validatenull} from '@/util/validate';
import config from './config.js';
export default {
  name: 'SidebarItem',
  props: {
    menu: {
      type: Array
    },
    screen: {
      type: Number
    },
    first: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {};
      }
    },
    collapse: {
      type: Boolean
    }
  },
  data() {
    return {
      config: config
    };
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(['roles']),
    labelKey() {
      return this.props.label || this.config.propsDefault.label;
    },
    pathKey() {
      return this.props.path || this.config.propsDefault.path;
    },
    iconKey() {
      return this.props.icon || this.config.propsDefault.icon;
    },
    childrenKey() {
      return this.props.children || this.config.propsDefault.children;
    },
    nowTagValue() {
      return this.$router.$avueRouter.getValue(this.$route);
    }
  },
  methods: {
    vaildAvtive(item) {
      const groupFlag = (item['group'] || []).some(ele => this.$route.path.includes(ele));
      return this.nowTagValue === item[this.pathKey] || groupFlag;
    },
    vaildRoles(item) {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
    },
    validatenull(val) {
      return validatenull(val);
    },
    isShow(val) {
      // 不显示的菜单
      const hiddenMenu = [
        '任务-药企审核',
        '任务-经销商提交',
        '任务积分规则管理',
        '区域积分规则-编辑',
        '任务详情-医院',
        '任务详情-商业',
        '医院信息审核',
        '商业公司信息审核',
        '药店信息审核',
        '报告审批-查看',
        '服务承接-查看',
        '服务记录-查看',
        '服务审核-查看',
        '报告导出-查看',
        '接单审批',
        '任务审核',
        '证据链上传',
        '定量-接单审批',
        '定量-任务审核',
        '通用-接单审批',
        '通用-任务审核',
        '结算-证据链上传',
        '服务供应商积分规则-编辑',
        'CRO-结算',
        '预算详情',
        '患者教育-处方上传',
        '团队接单审批',
        '团队接单结算',
        '快捷审核模式',
        '拆包',
        '开票审核',
        '创建试卷',
        '编辑试卷',
        '任务监督',
        '服务商风险查询'
      ];
      return hiddenMenu.indexOf(val) === -1;
    },
    open(item) {
      if (this.screen <= 1) this.$store.commit('SET_COLLAPSE');
      this.$router.$avueRouter.group = item.group;
      this.$router
        .push({
          path: this.$router.$avueRouter.getPath({
            name: item[this.labelKey],
            src: item[this.pathKey]
          }),
          query: item.query
        })
        .catch(() => {});
    }
  }
};
</script>
