<template>
  <div class="pagePanel">
    <div :class="page.type === index ? 'inbk itebg curite' : 'inbk itebg'" :style="page.style" v-for="(page, pagei) in pageData" :key="pagei">
      <div @click="indexClick(page)">{{page.title}}</div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
/**
 * module:上方页签+下方容器
 * author:lwt
 */
export default {
  name: 'aTemplate',
  components: {
  },
  // model: {
  //   prop: 'curIndex', // 这个字段，是指父组件设置 v-model 时，将变量值传给子组件的 msg
  //   event: 'praent-event' // 这个字段，是指父组件监听 parent-event 事件
  // },
  props: {
    pages: Array,
    curIndex: String
  },
  data () {
    return {
      pageData: [],
      index: 0
    }
  },
  methods: {
    indexClick: function (item) {
      this.index = item.type
      this.$emit('update:curIndex', item.type)
      // this.$props.curIndex = i
    },
    addIndex: function () {
      this.s.index++
      this.$store.commit('自增', 2)
    },
    dispatchIndex: function () {
      this.$store.dispatch('todo')
    },
    afterEnter: function () {
    },
    slotCreated: function () {
      // console.log('插槽插入成功')
    },
    watchEvent: function () {
    }
  },
  computed: {
  },
  directives: {
  },
  filters: {
  },
  watch: {
    pages: function (val, oldVal) {
      this.pageData = this.$props.pages
      this.index = this.$props.curIndex
    },
    curIndex: function (val, oldVal) {
      // this.index = this.props.curIndex
    }
  },
  beforeCreate: function () {
    // console.log('实例初始化前调用')
  },
  created: function () {
    this.pageData = this.$props.pages
    this.index = this.$props.curIndex
    // console.log('实例初始化完成调用')
  },
  beforeMount: function () {
    // console.log('挂载到页面前调用')
  },
  mounted: function () {
    // console.log('挂载到页面完成调用')
  },
  beforeUpdate: function () {
    // console.log('更新前调用')
  },
  updated: function () {
    // console.log('更新完成调用')
  },
  activated: function () {
    // console.log('keep-alive组件激活时调用')
  },
  deactivated: function () {
    // console.log('keep-alive组件停用时调用')
  },
  beforeDestroy: function () {
    // console.log('销毁之间调用')
  },
  destroyed: function () {
    // console.log('实例销毁后调用')
  },
  errorCaptured: function () {
    // console.log('异常发生处理')
  }
}
</script>
<style>
@import './pagePanel.css';
</style>
