<template>
  <div class="material-title" @click="onToggleCheckbox">
    <p class="checkbox" v-show="checkboxVisible">
      <WlRadioIcon :isChoosed="isChoosed" v-bind="$attrs" :unChosedColor="unChosedColor"/>
    </p>
    <p>
      {{ title }}
      <span v-if="count">·{{ count }}</span>
    </p>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli 
 * @Date: 2021-09-18 11:19:49 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-11-05 16:58:05
 */
import WlRadioIcon from "@packages/components/Common/WlRadioIcon/src/index.vue";
export default {
  name: "MtTotal",
  components: { WlRadioIcon },
  props: {
    title: {
      type: String,
      default: "",
    },
    count: {
      type: Number,
      default: 0,
    },
    checkboxVisible: {
      type: Boolean,
      default: false,
    },
    unChosedColor: {
      type: String,
      default: "#EEEEEE"
    }
  },
  data() {
    return {
      isChoosed: false,
    };
  },
  methods: {
    onToggleCheckbox() {
      if (!this.checkboxVisible) return;
      this.isChoosed = !this.isChoosed;
      this.$emit("onToggleCheckbox", this.isChoosed);
    },
    changeCheckedStatus(bool) {
      this.isChoosed = bool;
    },
  },
};
</script>

<style lang="scss" scoped>
.material-title {
  @extend %flex-middle-center;
  cursor: pointer;
  .checkbox {
    margin-right: j(15);
  }
}
</style>
