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

import { objectProperty } from 'mars-pro/src/pro/util';
import ElRadio from 'mars-pro/packages/radio';
import ElRadioButton from 'mars-pro/packages/radio-button';
import ElRadioGroup from 'mars-pro/packages/radio-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';
export default {
  name: 'ProSelectRadios',
  componentName: 'ProSelectRadios',
  components: {
    ElRadio,
    ElRadioButton,
    ElRadioGroup,
    ProLayoutContaner
  },
  mixins: [selectDatasourceMixin, selectBaseMixin],
  props: {
    radioButton: Boolean,
    disabled: Boolean,
    // left | center| right
    textAlign: String,
    // 启用 取消模式
    enableCancel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  created() { },
  computed: {},
  methods: {
    renderRadioAndButton(data) {
      const _datas = {
        props: {
          disabled: this.disabled,
          ...data,
          label: data[this.valueKey || 'value']
        },
        nativeOn: {
          click: this.handleToggle.bind(this, data[this.valueKey || 'value'])
        }
      }
      if (this.radioButton) {
        return <ElRadioButton {..._datas}><span>{this.renderLabel(data)}</span></ElRadioButton>
      } else {
        return <ElRadio  {..._datas}><span>{this.renderLabel(data)}</span></ElRadio>
      }
    },
    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)
    },
    handleToggle(value) {
      if (this.enableCancel && this.value === value && !this.disabled) {
        this.handleInput(null)
      }
    },
    // 重写 select-dataSource
    addSelectCacheOptions() { },
    handleSyncValueOptions() { }
  },
  render() {
    //布局配置
    const _layoutDatas = {
      props: {
        ...this.$attrs
      },
      attrs: {
        ...this.$attrs
      }
    }

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

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