<template>
  <!-- #ifndef MP-WEIXIN -->
  <view>
    <!-- #endif -->
    <view @tap="tapHandle" :class="[disabled && 'disabledSwtich', className]">
      <slot v-if="active" name="checked"></slot>
      <slot v-else name="unchecked"></slot>
    </view>
    <!-- #ifndef MP-WEIXIN -->
  </view>
  <!-- #endif -->
</template>
<script>
export default {
  name: 'benben-flex-switch-new',
  props: {
    className: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    auto: { type: [Boolean], default: true }, //是否自动修改值
    value: {
      type: [Boolean, String, Number],
      default: false,
    },
  },
  data: () => ({}),
  computed: {
    active() {
      // 处理字符串的情况
      if (typeof this.value === 'string') {
        return this.value == '1'
      }
      // 处理数字的情况
      if (typeof this.value === 'number') {
        return this.value == 1
      }
      // 处理布尔值的情况
      return this.value
    },
  },
  //监听value
  watch: {},
  methods: {
    tapHandle() {
      if (this.disabled) {
        return
      }
      let value = ''
      if (typeof this.value === 'string') {
        // 处理字符串的情况
        value = this.value == '1' ? '0' : '1'
      } else if (typeof this.value === 'number') {
        // 处理数字的情况
        value = this.value ? 0 : 1
      } else {
        // 处理其他情况
        value = !this.value
      }
      if (this.auto) this.$emit('input', value)
      this.$emit('change', value)
    },
  },
  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
}
</script>

<style>
.disabledSwtich {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
