<!-- @desc:switch组件  @auth:周兴  @time:2022/5/18 15:47 -->
<template>
  <i-switch ref="switch" v-model="model" :size="size" :disabled="disabled"
            :trueValue="trueValue" :falseValue="falseValue" :trueColor="trueColor" :falseColor="falseColor"
            @on-change="handleChange">
    <Icon type="md-checkmark" slot="open"></Icon>
    <Icon type="md-close" slot="close"></Icon>
  </i-switch>
</template>

<script>
export default {
  name: "dk-switch",
  props: {
    // 指定当前是否选中，可以使用 v-model 双向绑定数据
    value: {
      type: Boolean,
      default: false
    },
    // 开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large
    size: {
      type: String,
    },
    // 禁用开关
    disabled: {
      type: Boolean,
      default: false
    },
    // 选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
    trueValue: {
      type: [String, Number, Boolean],
      default: true
    },
    // 没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
    falseValue: {
      type: [String, Number, Boolean],
      default: false
    },
    // 自定义打开时的背景色
    trueColor: {
      type: String
    },
    // 自定义关闭时的背景色
    falseColor: {
      type: String
    }
  },
  watch: {
    model(n, o) {
      this.$emit('input', n)
    },
    value(n,o){
      this.model = n;
    }
  },
  data() {
    return {
      model: false,
    }
  },
  methods: {
    /**
     * @desc   : 值改变事件
     * @author : 周兴
     * @date   : 2023/3/14 17:49
     */
    handleChange(e) {
      this.model = e;
      this.$emit('on-change', e)
    },
  },
  created() {
    this.model = this.value;
  }
}
</script>

<style scoped>
.ivu-switch{
  margin-top: 3px !important;
}
</style>
