<template >
  <div class="content">
    <div class="teacherfooter">
      <div
        class="teacherfootitem"
        @click="gotab(item, index)"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="teacherfootitemtop shou">
          <img
            :src="
              currentTabIndex == index ? item.selectedIconPath : item.iconPath
            "
            alt=""
          />
        </div>
        <div
          class="teacherfootname"
          :class="currentTabIndex == index ? 'activename' : ''"
        >
          {{ item.text }}
        </div>
      </div>
    </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>
export default {
  props: {
    active: Number
  },
  data() {
    return {
      list: [{
        "pagePath": "/",
        "iconPath": require("../assets/home.png"),
        "selectedIconPath": require("../assets/homeactive.png"),
        "text": "首页",

      }, {
        "pagePath": "/xiaoxi",
        "iconPath": require("../assets/xiaoxi.png"),
        "selectedIconPath": require("../assets/xiaoxiactive.png"),
        "text": "消息"
      },
      {
        "pagePath": "",
        "iconPath": require("../assets/fabu.png"),
        "selectedIconPath": require("../assets/fabu.png"),
        "text": "发布"
      },
      {
        "pagePath": "",
        "iconPath": require("../assets/kefu.png"),
        "selectedIconPath": require("../assets/kefu.png"),
        "text": "客服"
      },
      {
        "pagePath": "/mine",
        "iconPath": require("../assets/mine.png"),
        "selectedIconPath": require("../assets/mineactive.png"),
        "text": "个人中心"
      }
      ],
      currentTabIndex: this.active,
      showpublish: false,
      showphone: false,
    }
  },
  methods: {
    gotab(item, index) {
      if (index == 2) {
        this.showpublish = true;
      } else if (index == 3) {

        this.showphone = true;
      } else {
        this.$router.push({
          path: item.pagePath
        })
      }


    },
    // 短视频跳转
    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
          }
        });
      }
    },
    hidetanceng() {
      this.showpublish = false;
    },
    cancelphone() {
      this.showphone = false;
    },


  }
}
</script>
<style  scoped>
@import "./style/homepage.css";
.teacherfooter {
  width: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0.7rem;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  border-top: 1px solid #f5f5f5;
}

.teacherfootitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.teacherfootname {
  color: #5b5e63;
  font-size: 0.22rem;
  margin-top: 0.05rem;
}
.shou {
  width: 0.35rem;
  height: 0.33rem;
  font-size: 0;
}
.activename {
  color: #f19b18;
}
</style>