<template>
  <div id="title">
    <div class="top">
      <h2>
        <img src="../../../assets/images/systemNav/icon2.png" alt="" />
        <span>个人中心</span>
      </h2>
    </div>
    <div class="middle">
      <div class="tag-box">
        <span :class="[{ active: activeIndex === index }, 'tag']" v-for="(item, index) in tagData" @click="selectItem(item, index)" :key="index">
          {{ item }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import '../../systemNavComponents/js'

export default {
  props: {
    tagData: {
      type: Array,
      default: () => {}
    }
    // lists: {
    //   type: Array,
    //   default: () => {}
    // }
  },
  data () {
    return {
      activeIndex: 0,
      actIndex: 0,
      siftData: ['默认', '最新']
    }
  },
  methods: {
    selectItem (item, index) {
      console.log('item :>> ', item)
      //   console.log('index :>> ', index)
      this.activeIndex = index
      this.$emit('getPerListData', item)
    }
    // selectList (item, index) {
    //   //   console.log('item :>> ', item)
    //   //   console.log('index :>> ', index)
    //   this.actIndex = index
    //   this.$emit('getSelectList', index)
    // }
  }
}
</script>

<style lang="less" scoped>
#title {
  width: 100%;
  align-items: center;
  //   border-bottom: 1px solid #f4f5fa;
  .top {
    display: flex;
    align-items: center;
    img{
      width: 2.4rem;
      height: auto;
    }
    h2 {
      display: flex;
      align-items: center;
      margin: 0;
      span {
        font-weight: Bold;
        font-size: 2.4rem;
        line-height: 6rem;
        color: #171d33;
        margin-left: 1rem;
        border: none;
        background: none;
      }
    }
  }

  .middle > .tag-box {
    height: 100%;
    margin-left: 4rem;
    margin: 2rem 1rem 1rem;
    .tag {
      width: 10rem;
      height: 3.8rem;
      border-radius: 6px;
      background: rgba(244, 244, 244, 1);
      text-align: center;
      line-height: 3.8rem;
      margin: 0 2rem 0;
      cursor: pointer;
      display: inline-block;
      font-size: 1.4rem;
    }
    .tag.active {
      background-color: #009fe2;
      color: white;
      i {
        opacity: 1;
      }
    }
  }

  // .sift-bar {
  //   width: calc(100% - 40px);
  //   margin: 40px 0 30px 40px;
  //   font-weight: Bold;
  //   font-size: 2rem;
  //   color: #333;
  //   .tag {
  //     font-size: 18px;
  //     color: #171d33;
  //     line-height: 42px;
  //     text-align: center;
  //     margin: 0px 20px 0;
  //     cursor: pointer;
  //     display: inline-block;
  //     position: relative;
  //     top: -1px;
  //     i {
  //       display: block;
  //       opacity: 0;
  //       width: 20px;
  //       height: 2px;
  //       border-radius: 1px;
  //       background: rgba(0, 159, 226, 1);
  //       margin: 0 auto;
  //     }
  //   }
  //   .tag.active {
  //     color: #009fe2;
  //     i {
  //       opacity: 1;
  //     }
  //   }
  // }
  .list {
    margin: 0 2rem 0;
    display: inline-block;
    position: relative;
    top: 1px;
    font-size: 1.8rem;
    font-weight: 400;
    color: #171d33;
    cursor: pointer;
    i {
      display: block;
      opacity: 0;
      width: 3.6rem;
      height: 2px;
      border-radius: 1px;
      background: rgba(0, 159, 226, 1);
      margin: 0 auto;
    }
  }
  .list.active {
    color: #009fe2;
    i {
      opacity: 1;
    }
  }
}
</style>
