<template>
  <div class="w-100 b-F8F8F8">
    
    <div class="xw-1200px w-100_75px r-15px pl-15px d-fx pt-60px" style="margin: 0 auto">
      <div class="xw-273px w-100 h-158px bo-1px bo-EDEDED bor-6px b-we mr-30px">
      <div v-for="(data, index) in edit_Components_List" :key="index" class="d-fx ai-c bo_l-2px cursor-pointer" :class="[(index === 0 ? 'mt-15px': ''), (edit_Component == data.component ? `bo-${colors.first}`: 'bo-we_0')]" @click="edit_Component = data.component">
        <i :class="data.icon" class="ml-15px mr-5px mt-_5px"></i>
        <span class="f-16px fw-300 c-222222 lh-42px" style="letter-spacing: 0.32px"
        :class="edit_Component == data.component ? 'fw-500 ': ''" @click="updateEditComponent(data.component)">{{data.name}}</span>
      </div>
    </div>

    <div :is="this.edit_Component" :colors="colors"></div>
    </div>
    
  </div>
</template>

<script>
import basicInformationC from './myProfile/BasicInformationC.vue'
import privacyInformationC from './myProfile/PrivacyInformationC.vue'
import changePasswordC from './myProfile/ChangePasswordC.vue'

export default {
  name: 'ic-my-profile',
  extends: {},
  props: {
    colors: Object
  },
  data(){
    return{
      edit_Component: 'basic-information-c',
      edit_Components_List: [
        {
          icon: 'icon-user-2',
          name: 'Basic Information',
          component: 'basic-information-c'
        }, 
        {
          icon: 'icon-warning-empty',
          name: 'Privacy Information',
          component: 'privacy-information-c'
        },
        {
          icon: 'icon-lock-empty',
          name: 'Change Password',
          component: 'change-password-c'
        }
      ]
    };
  },
  components: {
    'basic-information-c': basicInformationC,
    'privacy-information-c': privacyInformationC,
    'change-password-c': changePasswordC
  },
  computed: {},
  watch: {},
  methods: {
    updateEditComponent(data) {
      this.edit_Component = data
    }
  },
  beforeCreate(){},
  mounted(){}
}
</script>
