<template>
  <van-field
    ref="input"
    v-model="inputValue"
    :label="label"
    :name="name"
    :border="border"
    :disabled="disabled"
    :readonly="readonly"
    :required="required"
    :clearable="clearable"
    :clickable="clickable"
    :is-link="isLink"
    :error="error"
    :error-message="errorMessage"

    :arrow-direction="arrowDirection"
    :label-class="labelClass"
    :label-width="labelWidth"
    :label-align="labelAlign"
    :input-align="inputAlign"
    :error-message-align="errorMessageAlign"
    :autosize="autosize"
    :left-icon="leftIcon"
    :right-icon="rightIcon"
    :icon-prefix="iconPrefix"
    :rules="editable?rules:null"
  >
    <template #label>
      {{ label }}<van-icon v-if="desc && descPosition==='lableIcon'" name="warning" class="ibps-dialog-icon" @click="$action.descDialog({ title:label, message:desc })" />
    </template>
    <template #input>
      <div class="ibps-switch">
        <span
          v-if="inactiveText"
          :class="['ibps-switch__label','ibps-switch__label--left',!checked ? 'is-active' : '']"
        >{{ inactiveText }}</span>
        <van-switch
          v-model="dataModel"
          :loading="loading"
          :disabled="disabled"
          :size="size"
          :active-value="activeValue"
          :inactive-value="inactiveValue"

          :active-color="activeColor"
          :inactive-color="inactiveColor"
          style="vertical-align: middle;"
          v-on="$listeners"
        />
        <span
          v-if="activeText"
          :class="['ibps-switch__label','ibps-switch__label--right',checked ? 'is-active' : '']"
        >{{ activeText }}</span>
      </div>
    </template>
  </van-field>
</template>
<script>
import FieldMixin from '@/mixins/field'

export default {
  name: 'ibps-switch',
  mixins: [FieldMixin],
  props: {
    size: {
      type: [Number, String],
      default: 24
    },
    loading: Boolean,
    activeColor: String,
    inactiveColor: String,
    activeValue: {
      type: [String, Number, Boolean],
      default: true
    },
    inactiveValue: {
      type: [String, Number, Boolean],
      default: false
    },
    activeText: [String, Number],
    inactiveText: [String, Number],
    desc: String
  },
  data() {
    return {
      dataModel: ''
    }
  },
  computed: {
    checked() {
      return this.value === this.activeValue
    }
  },
  watch: {
    value: {
      handler(val) {
        this.dataModel = val
        this.inputValue = JSON.stringify(val)
        this.validate()
      },
      immediate: true
    },
    dataModel: {
      handler(val) {
        this.$emit('update:value', val)
      },
      deep: true
    }
  }
}
</script>
<style lang="scss">
.ibps-switch{
  .ibps-switch__label{
    transition: .2s;
    height: 20px;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    vertical-align: middle;
    color: #303133;
  }
  .ibps-switch__label--left {
      margin-right: 10px;
  }
  .ibps-switch__label--right {
      margin-left: 10px;
  }

  .ibps-switch__label.is-active {
    color: #409eff;
  }
}
</style>

