<template>
  <div>
    <div class="tabbar">
      <van-tabbar
        v-model="tabbarTempValue"
        @change="onChange"
        active-color="#F19B18"
      >
        <van-tabbar-item>
          首页
          <template #icon="props">
            <img
              class="icon-img ketangimg"
              :src="props.active ? icon.homeactive : icon.home"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          消息
          <template #icon="props">
            <img
              class="icon-img shequimg"
              :src="props.active ? icon.xiaoxiactive : icon.xiaoxi"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          发布
          <template #icon="props">
            <img
              class="icon-img ketangimg"
              :src="props.active ? icon.fabu : icon.fabu"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          客服
          <template #icon="props">
            <img
              class="icon-img kefuimgk"
              :src="props.active ? icon.kefuactive : icon.kefu"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          个人中心
          <template #icon="props">
            <img
              class="icon-img centerimgk"
              :src="props.active ? icon.mineactive : icon.mine"
            />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 弹出层 -->
    <div class="register" v-if="showpublish">
      <div class="publishwrap">
        <div class="flextwo">
          <div class="homepageboxitem flexfour" @click="duanshipin(1)">
            <img
              src="../assets/duanzhipin.png"
              alt=""
              class="homepageitemimg"
            />
            <div class="homepageitemname">短视频区</div>
          </div>
          <div class="homepageboxitem flexfour" @click="duanshipin(2)">
            <img src="../assets/banggong.png" alt="" class="homepageitemimg" />
            <div class="homepageitemname">帮工招聘</div>
          </div>
          <div class="homepageboxitem flexfour" @click="duanshipin(3)">
            <img src="../assets/zhuanrang.png" alt="" class="homepageitemimg" />
            <div class="homepageitemname">面坊转让</div>
          </div>
          <div class="homepageboxitem flexfour" @click="duanshipin(4)">
            <img src="../assets/zhenghun.png" alt="" class="homepageitemimg" />
            <div class="homepageitemname">征婚交友</div>
          </div>
        </div>
        <div class="chahao" @click="hidetanceng">
          <img src="../assets/chahao.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 电话 -->
    <div class="register" v-if="showphone">
      <div class="quxiaofix">
        <div class="phone flexthree">
          <img src="../assets/phone.png" alt="" class="phonimg" />
          <a :href="'tel:' + '400-0230-777'" class="ponenum">
            呼叫400-0230-777</a
          >
        </div>
        <div class="quxiao" @click="cancelphone">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
import { Icon } from "vant";
import { Notify } from "vant";

Vue.use(Notify);
Vue.use(Tabbar).use(TabbarItem);
Vue.use(Icon);
export default {
  props: {
    active: Number
  },
  data() {
    return {
      showpublish: false,
      showphone: false,
      tabbarTempValue: this.active,
      icon: {
        home: require("../assets/home.png"),
        homeactive: require("../assets/homeactive.png"),
        xiaoxi: require("../assets/xiaoxi.png"),
        xiaoxiactive: require("../assets/xiaoxiactive.png"),
        fabu: require("../assets/fabu.png"),
        fabu: require("../assets/fabu.png"),
        kefu: require("../assets/kefu.png"),
        kefuactive: require("../assets/kefu.png"),
        mine: require("../assets/mine.png"),
        mineactive: require("../assets/mineactive.png")
      }
    };
  },
  methods: {
    onChange(index) {
      console.log(index);
      if (index == 0) {
        this.$router.push("/");
      } else if (index == 1) {
        this.$router.push("/xiaoxi");
      } else if (index == 2) {
        this.showpublish = true;
      } else if (index == 4) {
        this.$router.push("/mine");
      } else if (index == 3) {
        console.log(9999);
        this.showphone = true;
        console.log(this.showphone);
      }
      // const routerArray = ["/homepage", "/zhishi", "/message"];
      // this.$router.push(routerArray[index]);
    },
    hidetanceng() {
      this.showpublish = false;
    },
    cancelphone() {
      this.showphone = false;
    },
    // 短视频跳转
    duanshipin(id) {
      if (id == 1) {
        this.$router.push({
          path: "/publish",
          query: {
            type: 1
          }
        });
      } else if (id == 2) {
        this.$router.push({
          path: "/publish",
          query: {
            type: 2
          }
        });
      } else if (id == 3) {
        this.$router.push({
          path: "/publish",
          query: {
            type: 3
          }
        });
      } else if (id == 4) {
        this.$router.push({
          path: "/publish",
          query: {
            type: 4
          }
        });
      }
    }


  }
};
</script>

<style>
@import "./style/homepage.css";
.ketangimg {
  width: 0.33rem;
  height: 0.33rem !important;
}
.shequimg {
  width: 0.28rem;
  height: 0.33rem !important;
}
.kefuimgk {
  width: 0.37rem;
  height: 0.33rem !important;
}
.centerimgk {
  width: 0.29rem;
  height: 0.33rem !important;
}
</style>