<!--  -->
<template>
  <div class="tab-pane">
    <div v-for="item in paneTabs" :key="item.name" class="item" :class="item.name === show ? 'show' : 'hidden'" @click="handleClick(item.name)">
      {{ item.title }}
    </div>
  </div>
</template>

<script>

export default {
  name: 'YTabPane',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    paneTabs: {
      type: Array,
      default: () => [
        {
          title: 'Tab 1',
          name: 1
        },
        {
          title: 'Tab 2',
          name: 2
        }
      ]
    }
  },
  data() {
    // 这里存放数据
    return {
      show: 1
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleClick(name) {
      this.show = name
      this.$emit('change', name)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.tab-pane{
  display: flex;
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px 8px 0px 0px;
  margin-left: 16px;
  margin-bottom: -3px;
  .item{
    width: 140px;
    height: 42px;
    color: #000;
    cursor: pointer;
    text-align: center;
    font-size: 20px;
    color: #333333;
    line-height: 42px;
  }
  .hidden{
    color: #333333;
  }
  .show{
    background: #FFFFFF;
    color: #3E7BFA;
    border-radius: 8px 8px 0px 0px;
  }
}
</style>
