<template>
  <div class="ezj-submenu">
    <template v-for="submenu in menus">
      <div class="ezj-submenu__item" :key="submenu.id" @click="$emit('onClick', submenu.id)">
        <span>{{submenu.title}}</span>
        <!-- 是否必选 -->
        <template v-if="submenu.showRequired">{{submenu.required ? '': '（可选）'}}</template>
        <!-- 进度 -->
        <template v-if="submenu.showProgress">
          <span
            :class="submenu.progress ? 'is-success' : 'is-error'"
          >{{submenu.progress ? '（已完成）': '（未完成）'}}</span>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Submenu',
  props: { menus: Array },
  data() {
    return {}
  }
}
</script>

<style lang="scss">
.is-success {
  color: #12c44a;
}
.is-error {
  color: #c41230;
}
</style>
