<template>
  <div
    v-if="permission !== 'n'"
    v-express
    :class="[
      'inputs',
      formInputsDisplay == 'block'
        ? 'ht-form-inputs__block'
        : 'ht-form-inputs__inline',
    ]"
    :style="{
      width: isMobile
        ? '100%'
        : formInputsDisplay == 'block'
        ? '100%'
        : '220px',
      textAlign: isMobile ? 'end' : 'start',
    }"
  >
    <div v-if="isShowSwitch">
      <template v-if="isSubCellReadOnly">
        <input
          :value="inputVal"
          type="hidden"
          v-validate="inputValidate"
          :name="inputName"
          :data-vv-as="name"
        />
        <div class="sub-table-cell-readonly" @click="handleCellClick">
          <span>
            {{ tagValue.join() }}
          </span>
        </div>
      </template>

      <template v-else>
        <el-switch
          v-if="!isMobile"
          v-model="inputVal"
          v-validate="inputValidate"
          :name="inputName"
          :data-vv-as="name"
          :width="width"
          :active-color="activeColor"
          :inactive-color="inactiveColor"
          :active-value="activeValue"
          :inactive-value="inactiveValue"
          :active-text="activeText"
          :inactive-text="inactiveText"
          :disabled="isDisabled"
          @change="(val) => $emit('change', val)"
        ></el-switch>
        <van-cell v-if="isShowSwitch && isMobile" center title=" ">
          <template #right-icon>
            <span class="ht-switch-text-left">{{ inactiveText }}</span>
            <van-switch
              v-model="inputVal"
              class="mobile-cell"
              :disabled="isDisabled"
              :active-color="activeColor"
              :inactive-color="inactiveColor"
              :active-value="activeValue"
              :inactive-value="inactiveValue"
              size="24"
              @change="(val) => $emit('change', val)"
            />
            <span class="ht-switch-text-rigth">{{ activeText }}</span>
          </template>
        </van-cell>
      </template>
    </div>
    <ht-field-tail
      v-if="isShowText"
      :field-name="inputName"
      :readonly="!inputWriteable"
      input-value
      :tag-format-value="tagValue"
    ></ht-field-tail>
  </div>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import form from '@/mixins/form.js'
  import tableFieldReadOnly from '@/mixins/tableFieldReadOnly.js'

  export default {
    name: 'HtSwitch',
    mixins: [permission, inputName, form, mobileMode, tableFieldReadOnly],
    props: {
      value: [String, Number, Boolean],
      disabled: Boolean,
      width: Number,
      activeValue: {
        type: [String, Number, Boolean],
        default: true,
      },
      inactiveValue: {
        type: [String, Number, Boolean],
        default: false,
      },
      activeText: String,
      inactiveText: String,
      activeColor: String,
      inactiveColor: String,
    },
    computed: {
      inputVal: {
        get() {
          return this.value
        },
        set(val) {
          if (val || [0, false].includes(val)) {
            this.$emit('input', val)
          }
        },
      },
      tagValue() {
        const tagVal =
          this.value == this.activeValue
            ? this.activeText
              ? this.activeText
              : this.value
            : this.inactiveText
            ? this.inactiveText
            : this.value

        return [tagVal]
      },
      isShowText() {
        return this.permission !== 'n' && this.currentShowMode !== 'input'
      },
      isShowSwitch() {
        return this.inputWriteable || this.currentShowMode === 'input'
      },
    },
  }
</script>
<style lang="scss" scoped>
  .van-cell {
    min-height: 32px;
    padding: 0;

    &::after {
      display: none;
    }
  }
  .ht-switch-text {
    &-rigth {
      margin-left: 4px;
    }
    &-left {
      margin-right: 4px;
    }
  }
</style>
