<template>
  <view v-if="iosHide">
    <view class="footer_box">
      <view
        v-for="(item, index) of navigationList"
        :key="index"
        class="footer_item"
      >
        <view class="footer_nav_item" @click="onPageJump(item.pagePath)">
          <image
            v-if="item.pagePath == path"
            class="footer_nav_item_image footer_nav_item_image_scale"
            :src="'/' + item.selectedIconPath"
            mode="aspectFit"
          ></image>
          <image
            v-else
            class="footer_nav_item_image"
            :src="'/' + item.iconPath"
            mode="aspectFit"
          ></image>
          <text 
            class="footer_nav_item_text"
            :class="[item.pagePath == path ? 'footer_item_text_active' : '']"
            >{{ item.text }}</text
          >
		  <text class="image"></text>
        </view>
      </view>
    </view>
  </view>
  <view v-else>
    <view class="footer_box">
      <view
        v-for="(item, index) of navigationIos"
        :key="index"
        class="footer_item"
      >
        <view class="footer_nav_item" @click="onPageJump(item.pagePath)">
          <image
            v-if="item.pagePath == path"
            class="footer_nav_item_image footer_nav_item_image_scale"
            :src="'/' + item.selectedIconPath"
            mode="aspectFit"
          ></image>
          <image
            v-else
            class="footer_nav_item_image"
            :src="'/' + item.iconPath"
            mode="aspectFit"
          ></image>
          <text
            class="footer_nav_item_text"
            :class="[
              item.pagePath == path ? 'footer_item_text_active' : 'normal_text',
            ]"
            >{{ item.text }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    bg: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      path: "",
      navigationList: [
		{
			"pagePath": "pages/home/index",
			"iconPath": "static/tab/icon_tab1.png",
			"selectedIconPath": "static/tab/icon_tab1_a.png",
			"text": "智慧医疗"
		},
		{
			"pagePath": "pages/doctors/index",
			"iconPath": "static/tab/icon_tab3.png",
			"selectedIconPath": "static/tab/icon_tab3_a.png",
			"text": "名医精彩"
		},
		{
			"pagePath": "pages/talents/index",
			"iconPath": "static/tab/icon_tab2.png",
			"selectedIconPath": "static/tab/icon_tab2_a.png",
			"text": "太湖英才"
		},
		{
			"pagePath": "pages/wumen/medicaldes",
			"iconPath": "static/tab/icon_tab4.png",
			"selectedIconPath": "static/tab/icon_tab4_a.png",
			"text": "吴门医述"
		},
		{
			"pagePath": "pages/my/index",
			"iconPath": "static/tab/icon_tab5.png",
			"selectedIconPath": "static/tab/icon_tab5_a.png",
			"text": "我的"
		}
      ],
      navigationIos: [
		{
			"pagePath": "pages/home/index",
			"iconPath": "static/tab/icon_tab1.png",
			"selectedIconPath": "static/tab/icon_tab1_a.png",
			"text": "智慧医疗"
		},
		{
			"pagePath": "pages/doctors/index",
			"iconPath": "static/tab/icon_tab3.png",
			"selectedIconPath": "static/tab/icon_tab3_a.png",
			"text": "名医精彩"
		},
		{
			"pagePath": "pages/talents/index",
			"iconPath": "static/tab/icon_tab2.png",
			"selectedIconPath": "static/tab/icon_tab2_a.png",
			"text": "太湖英才"
		},
		{
			"pagePath": "pages/wumen/medicaldes",
			"iconPath": "static/tab/icon_tab4.png",
			"selectedIconPath": "static/tab/icon_tab4_a.png",
			"text": "吴门医述"
		},
		{
			"pagePath": "pages/my/index",
			"iconPath": "static/tab/icon_tab5.png",
			"selectedIconPath": "static/tab/icon_tab5_a.png",
			"text": "我的"
		}
      ],
    };
  },
  //第一次加载
  created() {
    //获取所有页面
    let currentPages = getCurrentPages();
    let page = currentPages[currentPages.length - 1];
    this.path = page.route;
  },
  //方法
  methods: {
    onPageJump(url) {
      if (this.path !== url) {
        uni.switchTab({
          url: "/" + url,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/static/mixin.scss";
.normal_text {
  color: #fff;
}
.footer_station {
  height: 110rpx;
  box-sizing: content-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.footer_box {
	background: #fff;
	padding-top: 10rpx;
	height: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	z-index: 502;
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.footer_bg {
  background-color: #fff;
  box-shadow: 0 0px 10px 1px #0000001a;
}

.footer_item {
  position: relative;
  flex: 1;
}
.image{
	position: absolute;
	right: -10rpx;
	top: 0;
	width: 10rpx;
	height: 110rpx;
	background-image: url('../../static/icon/icon_line.png');
	background-repeat: no-repeat;
	background-size: contain;
}
.footer_item:last-child .image{
	display: none;
}

.footer_nav_item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.footer_nav_item:active {
  background-color: rgba($color: #fff, $alpha: 0.1);
}

.footer_nav_item_text {
  font-size: 26rpx;
  color: #606061;
  margin-top: 6rpx;
}
.footer_nav_item_text.redText{color: red;}

.footer_nav_item_text_active {
  color: #f9a633;
}

.footer_nav_item_image {
  width: 80rpx;
  height: 58rpx;
}

.footer_nav_item_image_scale {
  animation: mescrollUpRotate 0.6s linear 1;
}

@keyframes mescrollUpRotate {
  0% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.footer_item_text_active {
  color: #00348b;
}
</style>
