<template>
  <el-menu-item
    v-if="category.children == null || category.children.length == 0"
    :key="index"
    :index="index + '#' + category.path"
  >
    <template v-if="category.uri != null && category.uri !== ''">
      <!-- 外部链接，新窗口打开 -->
      <nuxt-link v-if="category.type === 'OUT_LINK'" :to="category.uri" target="_blank">
        <CategoryIcon :value="category.icon" :with-holder="false"/>
        {{category.title}}
      </nuxt-link>
      <!-- 内部链接 || 常规栏目配置了模板，当前页打开 -->
      <nuxt-link v-else :to="category.uri">
        <CategoryIcon :value="category.icon" :with-holder="false"/>
        {{category.title}}
      </nuxt-link>
    </template>
    <!-- 常规栏目 -->
    <label v-else>{{ category.title }}</label>
  </el-menu-item>
  <el-sub-menu v-else :index="index">
    <template #title>
      <template v-if="category.uri != null && category.uri !== ''">
        <!-- 外部链接，新窗口打开 -->
        <nuxt-link v-if="category.type === 'OUT_LINK'" :to="category.uri" target="_blank">
          <CategoryIcon :value="category.icon" :with-holder="false"/>
          {{category.title}}
        </nuxt-link>
        <!-- 内部链接 || 常规栏目配置了模板，当前页打开 -->
        <nuxt-link v-else :to="category.uri">
          <CategoryIcon :value="category.icon" :with-holder="false"/>
          {{category.title}}
        </nuxt-link>
      </template>
      <!-- 常规栏目未配置模板（目录） -->
      <label v-else>
        <CategoryIcon :value="category.icon" :with-holder="false"/>
        {{ category.title }}
      </label>
    </template>
    <CategoryChildren
      v-for="(child, idx) in category.children"
      :category="child"
      :key="index + '-' + idx"
      :index="String(index + '-' + idx)"
    />
  </el-sub-menu>
</template>

<script>
import CategoryIcon from '@/components/cms/CategoryIcon'
export default {
  name: 'CategoryChildren',
  components: { CategoryIcon },
  props: {
    // 栏目
    category: {
      type: Object,
      required: true
    },
    index: String,
  }
}
</script>
