<template>
    <div id="footer-navigation" :class="{'iphoneX':isX}">
        <ul>
          <li v-show="!applyStatus" v-on:click="redirectIndex"><img src="./assets/touzi.png"><span>活动报名</span></li>
          <li v-show="applyStatus"><img src="./assets/touzi_hong.png"><span class="active">活动报名</span></li>
          <li v-show="!toolStatus" v-on:click="redirectTool"><img src="./assets/zhanghu.png"><span>活动工具</span></li>
          <li v-show="toolStatus"><img src="./assets/zhanghu_hong.png"><span class="active" >活动工具</span></li>
          <li v-show="!mineStatus" v-on:click="redirectMine"><img src="./assets/liwu.png"><span>个人中心</span></li>
          <li v-show="mineStatus" ><img src="./assets/liwu_hong.png"><span class="active">个人中心</span></li>
        </ul>
    </div>
</template>
<script>
    export default {
      data () {
        return {
        }
      },
      props: {
        applyStatus: {
          type: Boolean,
          required: true,
          default: false
        },
        mineStatus: {
          type: Boolean,
          required: true,
          default: true
        },
        toolStatus: {
          type: Boolean,
          required: true,
          default: true
        },
        isX: false
      },
      mounted () {
      },
      methods: {
        redirectIndex () {
          this.$router.push({name: 'index'})
        },
        redirectTool () {
          this.$router.push({name: 'tool'})
        },
        redirectMine () {
          this.$router.push({name: 'mine'})
        }
      }
    }
</script>

<style lang="scss">
  .iphoneX{
    padding-bottom: 20px;
  }
  #footer-navigation{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #FFFFFF;
    z-index: 9999;
    border-top: 1px solid #ccc;
    ul{
      display: flex;
      justify-content: space-around;
      width: 100%;
      margin: 0;
      padding: 5px 0;
      li{
        padding-top: 4px;
        list-style: none;
        display: flex;
        flex-direction:column;
        align-items:center;
        justify-content: center;
        height: 100%;
        position: relative;
        img{
          width: 20px;
        }
        span{
          font-size: 10px;
          color: #333333;
          display:block;
        }
        .active{
          color: #FF4657;
        }
      }
    }
  }
</style>