<template>
  <el-radio-group v-model="value_"
                  :size="size"
                  :disabled="disabled"
                  :text-color="textColor"
                  :fill="fill"
                  @change="change">
    <el-radio v-if="mkEmpty && !mkIsButton"
              :label="mkEmptyLabel"
              :value="mkEmptyValue"></el-radio>
    <el-radio v-for="item in config.GlobalArray[mkConfig]"
              :key="item[0]"
              :label="item[0]"
              v-if="!mkIsButton && !_hidden(item[0]) && _filter(item[0])"
              :disabled="_disable(item[0])">
      {{ item[1] }}
    </el-radio>

    <el-radio-button v-if="mkEmpty && mkIsButton"
                     :label="mkEmptyLabel"
                     :value="mkEmptyValue"></el-radio-button>
    <el-radio-button v-for="item in config.GlobalArray[mkConfig]"
                     :key="item[0]"
                     :label="item[0]"
                     v-if="mkIsButton && !_hidden(item[0]) && _filter(item[0])"
                     :disabled="_disable(item[0])">
      {{ item[1] }}
    </el-radio-button>
  </el-radio-group>
</template>
<script>
import MkBase from 'mk-element/src/mixins/mk-base';
import ElRadio from 'mk-element/packages/radio';

export default {
  name: 'mk-config-radio',
  mixins: [MkBase],
  components: {
    ElRadio
  },
  props: {
    mkConfig: { type: String, required: true },
    mkDisabled: { type: String },
    mkHidden: { type: String },
    mkFilter: { type: String },
    mkEmptyLabel: { type: String, default: '全部' },
    mkEmptyValue: { type: String, default: '' },
    mkEmpty: { type: Boolean, default: false },
    mkIsButton: { type: Boolean, default: false },
    value: {
      required: true
    },
    border: { type: Boolean, default: false },
    size: { type: String },
    name: { type: String },
    textColor: { type: String, default: '#fff' },
    fill: { type: String, default: '#409EFF' },
    disabled: { type: Boolean, default: false }
  },
  data() {
    return {
      disableds: [],
      hiddens: [],
      filters: [],
      value_: null
    };
  },
  watch: {
    value(vl) {
      this.value_ = vl;
    },
    value_(vl) {
      this.$emit('input', vl);
    }
  },
  methods: {
    change(label) {
      this.$emit('change', label, this.value_);
    },
    _hidden(key) {
      return this.hiddens.indexOf(key) > -1;
    },
    _filter(key) {
      return this.filters.length === 0 || this.filters.indexOf(key) > -1;
    },
    _disable(key) {
      return this.disableds.indexOf(key) > -1;
    }
  },
  mounted() {
    if (this.mkDisabled) {
      this.disableds = this.mkDisabled.split(',');
    }
    if (this.mkHidden) {
      this.hiddens = this.mkHidden.split(',');
    }
    if (this.mkFilter) {
      this.filters = this.mkFilter.split(',');
    }
    this.value_ = this.value;
  }
};
</script>
