/**
 * 多选checkbox
 * 例如:
 *  <pro-select-checks :dataSource="String(字典数据)|DataSource|Array"></pro-select-checks>
 *  注释:
 *    数据源可以指定 String 
 * 
 * @author xiufu.wang
 */

import { objectProperty } from 'mars-pro/src/pro/util';
import ElCheckbox from 'mars-pro/packages/checkbox';
import ElCheckboxButton from 'mars-pro/packages/checkbox-button';
import ElCheckboxGroup from 'mars-pro/packages/checkbox-group';
import ProLayoutContaner from 'mars-pro/packages/pro-layout-contaner';
import selectDatasourceMixin from 'mars-pro/packages/pro-select/src/mixins/select-datasource';
import selectBaseMixin from 'mars-pro/packages/pro-select/src/mixins/select-base';
import omit from 'mars-pro/src/pro/omit';

export default {
  name: 'ProSelectChecks',
  componentName: 'ProSelectChecks',
  components: {
    ElCheckbox,
    ElCheckboxButton,
    ElCheckboxGroup,
    ProLayoutContaner
  },
  mixins: [selectDatasourceMixin, selectBaseMixin],
  props: {
    checkButton: Boolean,
    disabled: Boolean,
    // left | center| right
    textAlign: String,
  },
  data() {
    return {
      emptyValue: []
    }
  },

  computed: {},
  methods: {
    renderChecksAndButton(data) {
      const _datas = {
        props: {
          disabled: this.disabled,
          ...omit(data, ['id']),
          label: data[this.valueKey || 'value']
        }
      }

      if (this.$scopedSlots.checkboxItem) {
        return this.$scopedSlots.checkboxItem(data)
      }

      if (this.checkButton) {
        return <ElCheckboxButton {..._datas}><span>{this.renderLabel(data)}</span></ElCheckboxButton>
      } else {
        return <ElCheckbox  {..._datas}><span>{this.renderLabel(data)}</span></ElCheckbox>
      }
    },
    renderLabel(data) {
      if (this.$scopedSlots.content) {
        return this.$scopedSlots.content(data)
      } else {
        return data[this.labelKey || 'label'] || data[this.valueKey || 'value']
      }
    },
    handleChange(value) {
      this.$emit('change', value)
    },
    handleInput(value) {
      this.$emit('input', value)
    },
    // 重写 select-dataSource
    addSelectCacheOptions() { },
    handleSyncValueOptions() { }
  },
  render() {
    //布局配置
    const _layoutDatas = {
      props: {
        ...this.$attrs
      },
      attrs: {
        ...this.$attrs
      }
    }

    const _groupDatas = {
      props: {
        value: this.value || this.emptyValue,
        ...this.$attrs
      },
      attrs: {
        align: 'middle',
        ...this.$attrs
      },
      'class': {
        'pro-select-checks': true,
        ...(this.textAlign ? { ['pro-select-checks--' + this.textAlign]: true } : {}),
        'has-no-gutter': !(this.$attrs.gutter)
      },
      on: {
        change: this.handleChange,
        input: this.handleInput
      }
    }

    return (<ElCheckboxGroup {..._groupDatas}>
      <ProLayoutContaner {..._layoutDatas}>
        {!this.selectDatas ? this.$slots.default : null}
        {
          (this.selectDatas || []).map(r => this.renderChecksAndButton(r))
        }
      </ProLayoutContaner>
    </ElCheckboxGroup>)
  }
}