<template>
  <div class="footer-component">
    <div class="footer-list">
      <div
        v-for="(item, index) in configList"
        :key="index"
        class="footer-item"
        @click="clickIndex(index)"
      >
        <img
          :src="(activeIndex===index?item.selectedIconPath:item.iconPath) || defaultImg"
          alt=""
        >
        <div
          :class="activeIndex===index?'active':''"
          class="title text-overflow"
        >{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import defaultImg from '@/assets/footer/default.png'
export default {
  data() {
    return {
      activeIndex: 0,
      defaultImg
    }
  },
  computed: {
    ...mapState('creationCamp', [
      'footerComponent'
    ]),
    configContent () {
      return this.footerComponent
    },
    configList() {
      const { list } = this.configContent
      return list || []
    }
  },
  methods: {
    clickIndex(index) {
      this.activeIndex = index
    }
  }
}
</script>
<style lang="less" scoped>
.footer-component {
  .footer-list {
    display: flex;
    align-items: center;
    height: 54px;
    box-shadow:0px 0px 10px 0px rgba(51,51,51,0.1);
    .footer-item{
      flex: 1;
      text-align: center;
      overflow: hidden;
      img{
        width: 25px;
        height: 25px;
      }
      .title{
        font-size:10px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        &.active{
          color:rgba(255,121,17,1);
        }
      }
    }
  }
}
</style>
