<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-07 16:13:13
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-07 20:43:56
 * @FilePath: \mcep-h5\src\components\common\Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <!-- <div> -->
  <div class="d-bottom">
    <van-tabbar style=" width：100%; ">
      <van-tabbar-item v-for="(item, index) in tabbar" :key="index">
        <div style="margin-top: 50%;" @click="btn(index)">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="item.img"></use>
          </svg>
          <p :class="item.flag ? 'approve-type-div-selected-df' : 'approve-type-div-df'">{{ item.name }}</p>
        </div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
import MainViw from "@/views/main/MainView.vue";
/*
* title
*/
@Component({
  name: "Bottom",
  components: {
    MainViw,
  }
})
export default class Bottom extends Vue {
  myBtnImage: any = "#icon-a-wode24x24px-kehujinglixiaochengxu";
  onchangeImage: any = "#icon-a-shouye-xuanzhong20x20px";
  btnFlag: any = true
  pl = "pl";
  tabbar: any = [
    {
      img: "#icon-a-shouye-xuanzhong20x20px",
      name: "首页",
      flag: true
    },
    {
      img: "#icon-a-wode24x24px-kehujinglixiaochengxu",
      name: "我的",
      flag: false
    }
  ];
  btn(index: number) {
    //alert(index);

    if (index == 0) {//如果索引是0说明点击了首页
      this.tabbar[1].img = "#icon-a-wode24x24px-kehujinglixiaochengxu";//将我的按钮置灰
      this.tabbar[1].flag = "false";//将我的按钮置灰
      this.tabbar[0].img = "#icon-a-shouye-xuanzhong20x20px";//将首页切换为蓝色
      this.tabbar[0].flag = true;
      this.tabbar[1].flag = false;
      this.onchangebtn()
    } else if (index == 1) {
      this.tabbar[0].img = "#icon-a-shouye20x20px";//将首页置灰
      this.tabbar[1].img = "#icon-a-wode-xuanzhong24x24px-kehujinglixiaochengxu";//将我的按钮直为蓝色
      this.tabbar[0].flag = false;
      this.tabbar[1].flag = true;
      this.onchangebtn()
    }
  }
  //传给父组件
  onchangebtn() {
    this.btnFlag=!this.btnFlag
    this.$emit('onchangebtn', this.btnFlag);
  }
}
</script>
<style scoped lang="scss">
.d-bottom {
  width: 100%;
  height: 100%;
  border-width: 0px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.approve-type-div-selected-df {
  color: cornflowerblue;
}

.approve-type-div-df {
  color: #CCCCCC;
}

.pl {
  width: 100%;
  height: 100%;
  font-family: 'FontAwesome', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #CCCCCC;
  line-height: 20px;
}

.icon {
  width: 24px;
  height: 24px;
}
</style>
