<template>
  <el-switch v-if="selfType !== 'view'" v-model="modelData[element.mapper]" v-bind="element.props" :style="selfStyle" @change="() => { dispatchEvent('change')}" />
  <div v-else :style="selfStyle">{{ viewValue }}</div>
</template>

<script>
import LabBase from "../../mixins/LabBase";
import LabEvent from "../../mixins/LabEvent";

export default {
  name: "LabSwitch",
  mixins: [LabBase, LabEvent],
  computed: {
    viewValue(){
      if (this.selfType !== 'view'){
        return ''
      }
      if (this.$Util.isEmpty(this.element.mapper) || this.$Util.isEmpty(this.element.mapper)) {
        return this.element.props.inactiveText
      }
      const value = this.$Util.toBoolean(this.modelData[this.element.mapper])
      return value ? this.element.props.activeText : this.element.props.inactiveText
    }
  },
  created() {
    this.$LabRender.autoFill(this.element, this)
  }
}
</script>

<style scoped>

</style>