<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 16/10/28. -->

<template>
  <div>
    <lc-radio v-for="(item,i) in updateList"
               v-bind="item"
               :config="config"
               :cellStyle="cellStyle"
               :has-top-border="hasTopBorder(i)"
               :has-bottom-border="hasBottomBorder(i, updateList)"
               @LcRadioItemChecked="LcRadioItemChecked(i,$event)"
               :key="i"
               :icon-style="iconStyle"></lc-radio>
  </div>
</template>

<style scoped>

</style>

<script>
  import LcRadio from './item.vue';

  export default {
    components: { LcRadio },
    props: {
      list: {
        type: Array,
        default: () => ([])
      },
      cellStyle:{
          type: Object,
          default: () => ({
            "flex-direction": "row",
            "align-items": "center",
            "padding-top": "28px",
            "padding-bottom": "28px",
            "padding-left": "24px"
          })
      },
      config: {
        type: Object,
        default: () => ({})
      },
      iconStyle: {
        type: Object,
        default: () => ({
          width: "32px",
          height: "32px"
        })
      }
    },
    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: {
      LcRadioItemChecked (i, e) {
        const oldIndex = this.checkedIndex;
        const { value, title } = this.list[i];
        this.checkedIndex = i;
        this.$emit('LcRadioListChecked', { value, title, oldIndex, index: i })
      },
      hasTopBorder: function(i) {
        if(i==0) {
          return true;
        } else {
          return false;
        }
      },
      hasBottomBorder: function(i,list) {
        if(i==list.length-1) {
          return true;
        } else {
          return false;
        }
      }
    }
  }
</script>
