<template>
  <div> 
    <!-- 
      TODO: 
      FIXME: 
    -->
    <div class="w-100 h-144px d-fx jc-fxe ai-c">
      <div class="xw-238px w-100 h-42px d-fx jc-sb"> 
        <!-- month -->
        <div>
          <ic-dropdown :data="getMonths" dataToUpdate="selectedMonth" arrayName="MONTH"></ic-dropdown>
        </div>

        <!-- year -->
        <div>
          <!-- MAKE THIS AS A GLOBAL COMPONENT THAT
          A WIDTH, HEIGHT, COLOR, FONT-SIZE, ICON CAN BE UPDATED -->
          <ic-dropdown :data="getYears" dataToUpdate="selectedYear" arrayName="YEAR"></ic-dropdown>
        </div>
      </div>
    </div>
    <div class="w-100 bo_t-1px bo-464646">
      <div class="w-100 h-45px d-fx">
        <!-- nameFields -->
        <div class="h-100 bo_b-2px bo-EAEAEA d-fx jc-c ai-c"
          :class="[
            (index >= 0 ? 'w-'+data.width : ''),
            (index === nameFields.length - 1  ? '' : 'bo_r-1px')
          ]"
          v-for="(data, index) in nameFields" :key="index">
          <span class="f-14px fw-400 c-333333_50">{{ data.name }}</span>
        </div>
      </div>
      
      <!-- Row -->
      <div>
        <div class="w-100 h-45px d-fx"  v-for="(data, index) in paymentData" :key="index">
          <!-- Data each Row -->
          
          <div class="h-100 bo_b-1px bo-EAEAEA d-fx jc-c ai-c"
          :class="[
            (index >= 0 ? 'w-'+nameFields[index].width : ''),
            (index === nameFields.length - 1  ? '' : 'bo_r-1px')
          ]"
          v-for="(data, objectName, index) in data" :key="index">
            <div class="d-fx jc-c ai-c fxd-c"
            v-if="objectName == 'method'">
              <span class="f-14px fw-400 c-464646" >{{ data.type }}</span>
              <span class="f-9px fw-400 c-747474" >{{ data.brand }}</span>
            </div>
            <span class="f-14px fw-400 c-464646" v-else>{{ data }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Ic_tabsPayment',
  extends: {},
  props: {
    paymentData: Array,
    // date: []
  },
  data(){
    return{
      selectedMonth: '', 
      selectedYear: '',
      date: [
        {
          months: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Nov.', 'Dec.'],
          years: ['2017', '2018', '2019']
        }
      ],
      nameFields: [
        { name: 'Purchase Date',        width: '260px' },
        { name: 'Method',               width: '130px' },
        { name: 'Subscribe Prouducts',  width: '390px' },
        { name: 'Period of use',        width: '260px' },
        { name: 'Price',                width: '130px' },
      ],
    };
  },
  components: {
  },
  computed: {
    getMonths () {
      const [{ months }] = this.date
      return `${months}`.split(',')
    },
    getYears () {
      const [{ years }] = this.date
      return `${years}`.split(',')
    },
  },
  watch: {},
  methods: {},
  beforeCreate(){},
  mounted(){}
}
</script>
