<template>
  <div class="apass-checkbox">
    <!-- 未选中 -->
    <label
      class="el-checkbox apass_checkbox selected_0"
      v-if="item.selected === 0"
    >
      <span class="el-checkbox__input">
        <span class="el-checkbox__inner"></span>
      </span>
      <span class="el-checkbox__label" v-text="item.menu_name"></span>
    </label>
    <!-- 选中 -->
    <label
      class="el-checkbox apass_checkbox selected_1"
      v-if="item.selected === 1"
    >
      <span class="el-checkbox__input is-checked">
        <span class="el-checkbox__inner"></span>
      </span>
      <span class="el-checkbox__label" v-text="item.menu_name"></span>
    </label>
    <!-- 半选 -->
    <label
      class="el-checkbox apass_checkbox selected_2"
      v-if="item.selected === 2"
    >
      <span
        class="el-checkbox__input is-indeterminate"
        tabindex="0"
        role="checkbox"
        aria-checked="mixed"
      >
        <span class="el-checkbox__inner"></span>
      </span>
      <span class="el-checkbox__label" v-text="item.menu_name"></span>
    </label>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped>
.apass_checkbox {
  line-height: 40px;
}
</style>
