<!--  -->
<template>
<div class="line-con">
  <div class="line-step">
    <ul>
      <li v-for="(item,i) in numbers" :key="i"><span @click="clickItem(item.id)">·</span><div :class="{point:item.id===activeIndex}"></div></li>
    </ul>
  </div>
  <div class="line-number">
    <ul>
      <li v-for="(item,i) in numbers" :key="i">
        {{item.num}}
      </li>
    </ul>
  </div>

</div>
</template>

<script>
const numbers = [{
  num: 2009,
  id: 1
}, {
  num: 2010,
  id: 2
}, {
  num: 2011,
  id: 3
}, {
  num: 2012,
  id: 4
}, {
  num: 2013,
  id: 5
}, {
  num: 2014,
  id: 6
}, {
  num: 2015,
  id: 7
}, {
  num: 2016,
  id: 8
}, {
  num: 2017,
  id: 9
}, {
  num: 2018,
  id: 10
}]
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
  // import引入的组件需要注入到对象中才能使用
  props: ['year'],
  components: {},
  data () {
    // 这里存放数据
    let item = numbers.find(item => item.num === this.year)
    return {
      numbers,
      activeIndex: item ? item.id : 1
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    init () {

    },
    clickItem (id) {
      this.activeIndex = id
      var obj = numbers.find(item => item.id === id)
      this.$emit('selected_obj', obj.num)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.init()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
/* 引入公共css类 */
@import url(./style);
</style>
