<template>
  <div class="set_select_item">
    <template v-if="selected">
      <i
        class="iconfont iconxingzhuang2 icon_selected"
        :class="{ 'js-selected_disable': disabled }"
      ></i>
      <span
        class="label_check label_selected"
        :class="{ 'js-selected_disable': disabled }"
        >{{ label }}</span
      >
    </template>
    <template v-else>
      <div class="icon_check"></div>
      <span class="label_check">{{ label }}</span>
    </template>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class SetSelectItem extends Vue {
  @Prop() public selected!: boolean;
  @Prop() public label!: string;
  @Prop() public disabled!: boolean;

  public handleClick() {}
}
</script>

<style scoped>
.set_select_item {
  padding-left: 23px;
  line-height: 35px;
  font-size: 0;
  margin-top: 8px;
}

.icon_selected {
  vertical-align: middle;
  color: #15cbba;
  font-size: 17px;
}

.icon_check {
  vertical-align: middle;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #d1d1d1;
  border-radius: 50%;
  cursor: pointer;
}

.label_check {
  vertical-align: middle;
  display: inline-block;
  width: 56px;
  margin-left: 9px;
  font-size: 12px;
}

.label_selected {
  color: #15cbba;
}

.js-selected_disable {
  color: #acaab7;
}
</style>
