<template>
  <div class="xd-radio-box">
    <el-radio-group
      v-model="radio"
      @input="handleChange"
      :disabled="disabled"
    >
      <el-radio
        v-for="(item,index) in radioList"
        :key="index"
        :label="item.value"
        :border="border"
        :disabled="item.disabled || false"
      ><span v-html="item.label"></span></el-radio>
    </el-radio-group>
  </div>

</template>

<script>
  /**
   * @description 单选框-选项
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.io/#/zh-CN/component/checkbox
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {String|Number} defaultValue 已经选中数据 （选填） 默认：[]
   * @property {Object| Array| null} list 列表显示数据 （必选） 默认：null
   * @property {Boolean} disabled 是否禁用 （必选） 默认：false
   *
   * @event {Function} change 选中改变事件 参数：(value， select)
   */
  export default {
    name: "XdRadioList",
    props:{
      defaultValue:{
        type: String | Number,
        default: '',
      },
      list: {
        type: Object| Array | null,
        default: null
      },

      border: {
        type: Boolean,
        default: false,
      },

      disabled: {
        type: Boolean,
        default: false,
      },
    },
    data(){
      return {
        radioList: [],
        radio: '',

        testData: [
          {"label": "万利达集团", "value": 4},
          {"label": "万利达集团-2", "value": 5},
          {"label": "深圳万利达移动通信设备有限公司", "value": 6},
          {"label": "味多美", "value": 7},
        ]
      }
    },
    created() {
      if (this.list === null) this.radioList = this.$xdHelper.cloneDeep(this.testData);
      else this.radioList = this.$xdHelper.cloneDeep(this.list);
      this.radio = this.defaultValue;
      this.$emit('input', this.radio);
    },
    watch:{
      list(){
        this.radioList = this.$xdHelper.cloneDeep(this.list);
        this.handleChange();
      },
    },
    methods:{
      handleChange(){
        this.$emit('input', this.radio);
        this.$emit('change',{value: this.radio, select: this.$xdHelper.isKeyInLists(this.radioList, this.radio, 'value')});
      },
    },
  }
</script>

<style scoped lang="scss">
  .xd-radio-box {
    & ::v-deep .el-radio-group {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      min-height: 36px;

      & .el-radio {
        line-height: 24px;
      }
    }
  }

  @media screen and (max-width: 768px) {

  }
</style>
