<style scoped lang="scss">
.text {
  display: inline-block;
  padding: 5px 6px 1px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  height: 20px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2px;
  margin-top: 3px;
  width: auto;
  color: #FF5722;
  border: 1px solid #FF5722;
}

.true-text {
  color: #5FB878;
  border: 1px solid #5FB878;
}

.switch-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-label {
  font-size: 13px;
  color: var(--el-text-color-regular);
  white-space: nowrap;
}
</style>
<template>
  <div>
    <span v-if="disabled" class="text" :class="{'true-text':props.modelValue==true}">{{ props.modelValue ? trueLabel : falseLabel }}</span>
    <div v-else class="switch-wrap">
      <span class="switch-label">{{ falseLabel }}</span>
      <el-switch
        :model-value="state.model"
        @change="handleSwitchChange"
        inline-prompt
        :active-text="trueLabel"
      />
      <span class="switch-label">{{ trueLabel }}</span>
    </div>
  </div>
</template>
<script setup lang="ts" name="ExtBoolean">
import {reactive, onMounted, watch, computed} from 'vue';
import u from '/@/utils/u';
// 布尔值开关组件

const props = defineProps({
  modelValue: {
    type: Boolean
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  tips: {
    type: String
  }
})

const state = reactive({
  model: false,
})

const trueLabel = computed(() => u.fmt.fmtDict('1', 'yes_no'));
const falseLabel = computed(() => u.fmt.fmtDict('0', 'yes_no'));

onMounted(() => {
  state.model = props.modelValue;
})

watch(() => props.modelValue, (val, oldVal) => {
  state.model = props.modelValue;
})

const emit = defineEmits(['on-change', 'update:modelValue']);

const handleSwitchChange = (val: boolean) => {
  state.model = val
  emit('update:modelValue', val)
  emit('on-change', val)
}


</script>
