<template>
  <div>
    <wxc-radio v-for="(item,i) in updateList"
               v-bind="item"
               v-on:wxcRadioItemChecked="wxcRadioItemChecked(i,$event)"
               :key="i"></wxc-radio>
  </div>
</template>

<style scoped>

</style>

<script>
  import wxcRadio from './item.vue';
  export default {
    components: { wxcRadio },
    props: {
      list: {
        type: Array,
        default: () => ([])
      }
    },
    data: () => ({
      checkedIndex: -1
    }),
    computed: {
      updateList () {
        const { checkedIndex, list } = this;
        const updateList = [];
        list && list.forEach((item, i) => {
          item.checked = i === checkedIndex;
          updateList.push(item);
        });
        return updateList;
      }
    },
    created () {
      const { list } = this;
      if (list && list.length > 0) {
        list.forEach((item, i) => {
          item.checked && (this.checkedIndex = i);
        });
      }
    },
    methods: {
      wxcRadioItemChecked (i, e) {
        const oldIndex = this.checkedIndex;
        const { value, title } = this.list[i];
        this.checkedIndex = i;
        this.$emit('wxcRadioListChecked', { value, title, oldIndex, index: i })
      }
    }
  }
</script>
