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

    :arrow-direction="arrowDirection"
    :label-class="labelClass"
    :label-width="label?labelWidth:0"
    :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 #input>
      <checker
        v-model="checkerValue"
        :type="checkerType"
        :options="options"
        :value-key="valueKey"
        :label-key="labelKey"
        :max="max"
        :multiple="multiple"
        :ellipsis="ellipsis"
        :max-toast="maxToast"
        :max-message="maxMessage"
        :checker="checker"
        :disabled="readonly||disabled"
        :radio-required="radioRequired"
        :cols="cols"
        :align="optionAlign"
        @input="onInput"
      />
    </template>
  </van-field>
</template>

<script>
import Checker from './checker'
import FieldMixin from '@/mixins/field'

export default {
  name: 'ibps-checker',
  components: {
    Checker
  },
  mixins: [FieldMixin],
  props: {
    multiple: { // 是否多选
      type: Boolean,
      default: false
    },
    store: { // 返回值类型  array: 数组。string 字符串类型
      type: String,
      default: 'string',
      validator: function(value) {
        return ['array', 'string'].indexOf(value) !== -1
      }
    },
    storeSeparator: { // 返回值分割符，对于设置字符串类型的分隔符
      type: String,
      default: ','
    },
    options: { // 选项值
      type: Array,
      default: () => {
        return []
      }
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    ellipsis: {
      type: Boolean,
      default: true
    },
    radioRequired: Boolean,
    max: [String, Number],
    maxToast: {
      type: Boolean,
      default: true
    },
    maxMessage: String,
    cols: {
      type: Number,
      default: 0
    },
    optionAlign: String,
    checker: { // checker 是否有打勾的
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      checkerValue: this.getArrayValue()
    }
  },
  computed: {
    checkerType() {
      return this.multiple ? 'checkbox' : 'radio'
    }
  },
  watch: {
    value: {
      handler: function(val, oldVal) {
        if (val !== oldVal) {
          this.checkerValue = this.getArrayValue(val)
        }
      },
      immediate: true
    }
  },
  methods: {
    onInput(values) {
      this.$emit('input', this.getStoreValue(values))
    },
    getArrayValue(values = this.value) {
      if (this.store === 'string') {
        return this.$utils.isNotEmpty(values) ? values.split(this.storeSeparator) : []
      } else {
        return this.$utils.isNotEmpty(values) ? values || [] : []
      }
    },
    getStoreValue(value) {
      if (this.store === 'string') {
        return this.$utils.isNotEmpty(value) ? value.join(this.storeSeparator) : ''
      } else {
        return value || []
      }
    }
  }
}
</script>
