<!-- 多选框 -->
<template>
  <cs-field
    ref="csField"
    v-model="currentValue"
    :label="label"
    :rules="rules"
    :rules-key="rulesKey"
    :disabled="disabled"
    :colon="colon"
    :required="required"
    :error-message-align="errorMessageAlign"
    :label-class="labelClass"
    :label-width="labelWidth"
    :label-align="labelAlign"
    :input-align="inputAlign"
  >
    <van-checkbox-group
      v-model="currentValues"
      :disabled="disabled"
      :max="max"
      :checked-color="checkedColor"
      direction="horizontal"
      icon-size="16px"
    >
      <van-checkbox
        class="checkbox-item"
        v-for="item in currentOptions"
        :key="item.value"
        :name="item.value"
        @click="change"
        shape="square"
      >
        {{ item.label }}
      </van-checkbox>
    </van-checkbox-group>
  </cs-field>
</template>
<script>
import CsField from '../Base'
import mixin from '../mixin'

export default {
  name: 'CsFieldCheckbox',
  components: { CsField },
  mixins: [mixin],
  props: {
    // 选项
    options: {
      type: Array,
      default: null
    },
    // 选中状态颜色
    checkedColor: {
      type: String,
      default: '#1989fa'
    },
    // 返回类型
    returnType: {
      type: String,
      default: 'array'
    }
  },
  data() {
    return {
      currentValue: '',
      currentValues: [],
      currentOptions: []
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    value: {
      handler(val, oldVal) {
        if (this.currentValue != val && val !== oldVal) {
          this.setData()
        }
      },
      immediate: true, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    },
    currentValue: {
      handler(val, oldVal) {
        if (this.value !== val && val !== oldVal) {
          this.$emit('input', val)
        }
      },
      immediate: true, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    },
    options: {
      handler(val, oldVal) {
        this.setData()
      },
      immediate: true, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    }
  },
  //方法集合
  methods: {
    change() {
      this.currentValue = this.currentValues.join(',')
      if (this.returnType && this.returnType.toLowerCase() === 'string') {
        this.$emit('input', this.currentValue)
      } else {
        this.$emit('input', this.currentValues)
      }
      this.$forceUpdate()
    },

    setData() {
      if (!this.options) {
        return
      }
      let currentOptions = []
      let currentValues = []
      this.options.forEach(option => {
        let item = {}

        if (typeof option === 'object') {
          Object.keys(option).forEach(key => {
            item[key.toLowerCase()] = option[key]
          })
        } else {
          item = {
            value: option,
            label: option
          }
        }
        if (this.value && this.value.indexOf(item.value) > -1) {
          currentValues.push(item.value)
        }
        currentOptions.push(item)
      })
      this.currentOptions = currentOptions
      this.currentValues = currentValues
      this.currentValue = currentValues.join(',')
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.checkbox-item {
  margin: 0 5px 5px 0;
}
</style>
