<template>
  <view class="cv-checkbox-opt-base">
    <label class="cv-checkbox-opt__label">
      <checkbox :value="localVal" :checked="localChecked" style="transform: scale(0.7)" />
      <view>
        <slot>{{ label }}</slot>
      </view>
    </label>
  </view>
</template>
<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvCheckboxOptBase',
  props: {
    label: {
      type: [String, Number],
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    checked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      localVal: '',
      localChecked: false,
      parentObj: null
    };
  },
  watch: {
    value(newVal) {
      this.localVal = String(newVal);
    },
    checked(newVal) {
      this.localChecked = newVal;
    },
    'parentObj.localVal'(newVal) {
      if (Object.prototype.toString.call(newVal) == '[object Array]') {
        if (this.parentObj && this.parentObj.dataType == 'text') {
          this.localChecked = newVal.includes(this.label) ? true : false;
        } else if (this.parentObj && this.parentObj.dataType == 'value') {
          this.localChecked = newVal.includes(this.localVal) ? true : false;
        }
      }
    }
  },
  created() {
    this.localVal = String(this.value);
    this.localChecked = this.checked;
    console.log('---', this.localVal, this.localChecked);
  },
  mounted() {
    this.parentObj = this.getParent();
  },
  methods: {
    funcOnClick() {
      // let parentObj = this.getParent();
      // console.log(parentObj.$children);
      // let { value } = parentObj;
      // console.log(value, this.localVal);
      // this.localChecked = newVal == this.value ? true : false;
    },
    /**
     * 获取父元素实例
     */
    getParent(name = 'cvCheckboxGroup') {
      let parent = this.$parent;
      let parentName = parent.$options.name;
      while (parentName !== name) {
        parent = parent.$parent;
        if (!parent) return false;
        parentName = parent.$options.name;
      }
      return parent;
    }
  }
};
</script>
<style>
.cv-checkbox-opt-base {
  display: inline-flex;
  min-height: 25px;
}
.cv-checkbox-opt__label {
  margin: 5px 0;
  height: 25px;
  line-height: 25px;
  float: left;
  display: flex;
  margin-right: 10px;
}
</style>
