<template>
  <view class="ant-layout-footer">
    <view class="btn-group">
      <view class="ant-btn-block" :class="isActive(item.path)" @click="btnClick(item)" v-for="(item, index) in menu" :key="index">
        <template v-if="item.key == 1">
          <uni-icons type="tune-filled" size="30" 
			:color="isActive(item.path) == 'primary' ? '#fff' : '#777d90'"></uni-icons>
        </template>
        <template v-if="item.key == 2">
          <uni-icons type="list" size="30"
		   :color="isActive(item.path) == 'primary' ? '#fff' : '#777d90'"></uni-icons>
        </template>
        <template v-if="item.key == 3">
          <uni-icons type="gear" size="30"
		   :color="isActive(item.path) == 'primary' ? '#fff' : '#777d90'"></uni-icons>
        </template>
        {{ item.label }}
      </view> 
    </view>
  </view>
</template>

<script>
export default {
    name: 'page-footer',

    data() {
      return {
        menu: [
          {key: 1, label: '存储', path: 'pages/index'}, 
          {key: 2, label: '日志', path: 'pages/log'},
          {key: 3, label: '设置', path: 'pages/setting'},
        ]
      }
    },
    computed: {
      isActive() {
        return (path) => {
			const pages = getCurrentPages();
			const cur = pages[pages.length - 1].route
           return cur == path ? 'primary' : 'default'
        }
      }
    },
    mounted() {

    },
    methods: {
      btnClick(item) {
        if (item.path) {
          uni.navigateTo({
            url: '/' + item.path,
            animationType: 'fade-in'
          })
        }
      }
    }
}
</script>

<style scoped>
.ant-layout-footer{
  height: 70px;
  padding: 0;
}

.btn-group{
  width: 100%;
}
.ant-btn-block{
  height: 70px;
  line-height: 70px;
  /* border-radius: 0;
  border-bottom: 0; */
  box-shadow: none;
  font-size: 30px;
  font-weight: 400;
  background: #2f3242;
  border-color: #2f3242;
  color: #777d90;
  flex:1;
}
.ant-btn-block.primary{
  color: #fff;
}

.ant-btn-block{
  border-right: 1px solid #fff;
}
.ant-btn-block:last-child{
  border-right: 0;
}


.ant-btn-group > .ant-btn:last-child:not(:first-child),
.ant-btn-group > span:last-child:not(:first-child) > .ant-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ant-btn-group > .ant-btn:first-child:not(:last-child),
.ant-btn-group > span:first-child:not(:last-child) > .ant-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* border-right-color: #2F3242; */
}
.ant-btn-group > .ant-btn-group .ant-btn-primary:first-child:not(:last-child){
  border-right-color: #fff;
}
</style>