<template>
  <div class='flex flex-center full-width'>
    <div class='ml-10 mr-10 mt-10 flex flex-align-start full-width'>
      <basic-container style='flex: 1;padding: 0'>
        <left/>
      </basic-container>
      <div class='full-width ml-5' style='flex:4;'>
        <basic-container class='full-width'>
          <div>
            <years @change='change'/>
          </div>
        </basic-container>
        <basic-container>
          <div class='flex'>
            <div class='flex-child-average'>
              chart
            </div>
            <div class='flex-child-average'>
              <amount :type='yearType'/>
            </div>
          </div>
        </basic-container>
      </div>
    </div>
  </div>
</template>

<script>
import BasicContainer from '@/components/basic-container/main.vue'
import left from './components/left.vue'
import years from '@/views/invest/components/years.vue'
import amount from '@/views/invest/components/amount.vue'

export default {
  name: 'index',
  components: { BasicContainer, left, years, amount },
  data () {
    return {
      yearType: 0
    }
  },
  methods: {
    change (index) {
      console.log(index)
      this.yearType = index
    }
  }
}
</script>

<style scoped>

</style>
