<template>
  <div>
    <radio-item
      v-for="(item, i) in updateList"
      v-bind="item"
      :hasSubBottomBorder="i < updateList.length - 1"
      @dofRadioItemChecked="dofRadioItemChecked(i, $event)"
      :key="i"
      :isFullBorder="isFullBorder"
      :isShowBorder="_isColmo ? true : isShowBorder"
      :isLast="i === updateList.length - 1"
    ></radio-item>
  </div>
</template>

<style scoped></style>

<script>
import RadioItem from './radio-item.vue'
import ColmoMixin from '../../mixins/colmo'
export default {
  mixins: [ColmoMixin],
  components: { RadioItem },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    // 是否宽度750（边框样式不一样）
    isFullBorder: {
      type: Boolean,
      default: true
    },
    // 是否显示边框
    isShowBorder: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    checkedIndex: -1
  }),
  watch: {
    list(newValue, oldValue) {
      this.computedCheckedIndex()
    }
  },
  computed: {
    updateList() {
      const { checkedIndex, list } = this
      const updateList = []
      list &&
        list.forEach((item, i) => {
          item.checked = i === checkedIndex
          updateList.push(item)
        })
      return updateList
    }
  },
  created() {
    this.computedCheckedIndex()
  },
  methods: {
    computedCheckedIndex() {
      const { list } = this
      if (list && list.length > 0) {
        list.forEach((item, i) => {
          item.checked && (this.checkedIndex = i)
        })
      }
    },
    dofRadioItemChecked(i, e) {
      const oldIndex = this.checkedIndex
      const { value, title } = this.list[i]
      this.checkedIndex = i
      this.$emit('dofRadioItemChecked', { value, title, oldIndex, index: i })
    }
  }
}
</script>
