<template>
  <view class="custom-navigation" :style="{ height: total }">
    <view
      :class="['nav-header', { fixed: fixed }]"
      :style="{
        paddingTop: menuTop,
        height: menuHeight,
        background: background,
      }"
    >
      <!-- <view class="nav-content" :style="{color:color||theme}" :class="{ 'nav-content-new': hideMenu }"> -->
      <!-- <template v-if="!root">
          <view class="custom-icon" v-if="backIcon" :style="'width:'+menuHeight+';height:'+menuHeight">
            <image @click="goBack" v-if="canBack" :src="backIcon" mode="aspectFit" />
            <image @click="goHome" v-else :src="homeIcon" mode="aspectFit" />
          </view>
          <block v-else>
            <view :class="['icon',{block:!background}]"  :style="'width:'+menuHeight+';height:'+menuHeight" v-if="!hideMenu">
              <image class="back" v-if="canBack" @click="goBack" src="https://ttmini.yizhiwechat.com/constellationPavilion/index/left-black.svg" mode="aspectFit" />
              <image class="home" v-else @click="goHome" :src="homeIcon || 'https://ttmini.yizhiwechat.com/constellationPavilion/index/home-black.svg'" mode="aspectFit" />
            </view>
          </block> -->
      <!-- <view :class="['icon',{block:!background}]" v-else-if="!root">
            <image class="back" v-if="canBack" @click="goBack"  src="https://ttmini.yizhiwechat.com/constellationPavilion/index/left-white.svg" mode="aspectFit" />
            <image class="home" v-else @click="goHome" :src="homeIcon || 'https://ttmini.yizhiwechat.com/constellationPavilion/index/home-white.svg'" mode="aspectFit" />
          </view> -->
      <!-- </template> -->

      <!-- #ifdef MP-TOUTIAO -->
      <!-- <view
					class="title-value"
					v-if="hideMenu"
					:style="{ width: titleWidth + 'px', 'margin-left': titleLeft + 'px' }"
					>{{ title }}</view
				>
				<view v-else class="title-value">{{ title }}</view> -->

      <!-- #endif -->

      <!-- #ifdef MP-KUAISHOU -->
      <!-- <view class="title-value">{{ title }}</view> -->
      <!-- #endif -->
      <!-- </view> -->
      <view
        :class="['agnet', { show: showCode || isAgent }]"
        :style="'color:' + (color || theme)"
        @longtap="onlongTap"
      >
        {{ code }}
        <!-- #ifdef MP-KUAISHOU -->
        <text class="review-btn" v-if="agent_id <= 0" @click="toBindAgent"
          >绑定代理商</text
        >
        <!-- #endif -->
      </view>
    </view>
    <view
      class="amusement-tip"
      :style="{
        paddingTop: background || title ? total : menuTop,
        lineHeight: menuHeight,
        color: background || title ? 'white' : color || theme,
        left: background || title ? '50%' : `calc(50% - ${titleLeft}px)`,
      }"
      v-if="index"
      >—本产品仅供娱乐—</view
    >
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "yt-navbar",
  props: {
    background: {
      type: String,
      default: "",
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 标题字体颜色
    color: {
      type: String,
      default: "",
    },
    // 图标主题 ,黑白两色
    theme: {
      type: String,
      default: "white", // 'black'
    },
    // 是否首页列表
    root: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Boolean,
      default: false,
    },
    homePath: {
      type: String,
      default: "",
    },
    homeIcon: {
      type: String,
      default: "",
    },
    backIcon: {
      type: String,
      default: "",
    },
    // 是否撑开导航栏高度
    prop: {
      type: Boolean,
      default: false,
    },
    fixed: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    background: {
      handler(val) {
        if (!val && !this.prop) {
          this.total = 0;
        } else {
          this.total = this.navbarHeight;
        }
      },
      immediate: true,
    },
    prop: {
      handler(val) {
        if (!val && !this.background) {
          this.total = 0;
        } else {
          this.total = this.navbarHeight;
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapState("index", [
      "openid",
      "agent_name",
      "tid",
      "agent_id",
      "spread_id",
      "login_agent_id",
    ]),
    // #ifdef MP-TOUTIAO
    hideMenu() {
      let status = false;
      // if (
      // 	tt.getCustomButtonBoundingClientRect &&
      // 	tt.canIUse("getCustomButtonBoundingClientRect")
      // ) {
      // 	const res = tt.getCustomButtonBoundingClientRect();
      // 	const { leftIcon, capsule } = res;
      // 	if (capsule && leftIcon && leftIcon.width) {
      // 		this.titleLeft = leftIcon.left + leftIcon.width + 10;
      // 		this.titleWidth = capsule.left - this.titleLeft - 10;
      // 		this.titleHeight = capsule.height;
      // 		status = true;
      // 	}
      // } else {
      // 	status = false;
      // }
      // if (process.env.NODE_ENV == "development") {
      // 	status = false;
      // }
      return status;
    },
    // #endif
    canBack() {
      return getCurrentPages().length > 1;
    },
    code() {
      return `ID:${this.agent_id}-${this.spread_id}`;
    },
    isAgent() {
      // eslint-disable-next-line eqeqeq
      return (
        /\d+/.test(this.agent_id) &&
        parseInt(this.agent_id) > 0 &&
        this.login_agent_id == this.agent_id
      );
    },
  },
  data() {
    const { top, height, width } = uni.getMenuButtonBoundingClientRect();
    const navbarHeight = top + height + 12 + "px";
    return {
      navbarHeight,
      total: navbarHeight,
      menuTop: top + "px",
      menuHeight: height + "px",
      tipsRight: width + 15 + "px",
      tipsTop: top + 3 + "px",
      favorite: true,
      resultTop: top + height + "px",
      resultRight: (width + 15) / 2 + "px",
      showCode: false,
      titleWidth: 0,
      titleLeft: 0,
      titleHeight: 0,
    };
  },
  methods: {
    goHome() {
      uni.$yt.route({
        type: "reLaunch",
        url: this.homePath ? this.homePath : "/pages/index/index" + this.tid,
      });
    },
    goBack() {
      uni.$yt.route({ type: "navigateBack" });
    },
    toBindAgent() {
      uni.$yt.route({
        url: "/pages/bindAgent",
      });
    },
    onlongTap() {
      this.showCode = !this.showCode;
      uni.vibrateShort();
      // #ifdef MP-KUAISHOU
      if (this.showCode) {
        uni.setClipboardData({
          data: this.openid,
          success() {
            uni.showToast({
              title: "复制成功！",
            });
          },
        });
      }
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-navigation {
  width: 750rpx;
  height: 0;
  position: relative;
  z-index: 9998;
  flex: 0 0 auto;
  .nav-header {
    box-sizing: content-box;
    background: transparent;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding-bottom: 12px;
    &.fixed {
      position: fixed;
    }
  }
  .nav-content {
    width: 100%;
    height: 100%;
    position: relative;

    // padding:0 90px ;
    display: flex;
    align-items: center;
    justify-content: center;
    .title-value {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
    }
    .title-value-new {
      background: rgba($color: #000000, $alpha: 0.2);
      height: 68rpx;
      border-radius: 34rpx;
      display: flex;
      align-items: center;
      .authorAvatar {
        flex: 0 0 60rpx;
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 10rpx;
        margin-left: 4rpx;
      }
      .authorBox {
        flex: 1;
        .authorName {
          width: 100%;
          font-size: 26rpx;
          font-weight: bold;
          color: #fefefe;
        }
        .lessonTitle {
          width: 100%;
          font-size: 20rpx;
          font-weight: 500;
          color: rgba($color: #ffffff, $alpha: 0.6);
        }
      }
    }
    .custom-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      image {
        width: 100%;
        height: 100%;
      }
    }
    .icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      //#ifndef MP-KUAISHOU
      &.block {
        border-radius: 10px;
        background: rgba($color: #ffffff, $alpha: 0.4);
        box-shadow: 0 0 1px rgba($color: #000000, $alpha: 0.2);
      }
      image {
        width: 24px;
        height: 24px;
        transform: translateX(-1px);
      }
      image.home {
        width: 20px;
        height: 20px;
        transform: translateX(0);
      }
      //#endif

      //#ifdef MP-KUAISHOU
      &.block {
        border-radius: 50%;
        background: rgba($color: #ffffff, $alpha: 1);
        box-shadow: 0 0 1px rgba($color: #000000, $alpha: 0.2);
      }
      image {
        width: 22px;
        height: 22px;
        // transform: translateX(-1px);
      }
      image.home {
        width: 19px;
        height: 19px;
        transform: translateX(0);
      }
      //#endif
    }
  }
  .nav-content-new {
    justify-content: left;
    .title-value {
      width: 750rpx;
    }
  }
}
.agnet {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  padding: 0 30rpx 0;
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  &.show {
    opacity: 0.8;
  }
}
.amusement-tip {
  white-space: nowrap;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  font-size: 24rpx;
  font-weight: bold;
  letter-spacing: 2px;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
  text-stroke: 1px rgb(0, 0, 0);
  opacity: 0.3;
}
.review-btn {
  display: inline-block;
  width: 170rpx;
  height: 40rpx;
  line-height: 40rpx;
  background: #ffc600;
  text-align: center;
  color: #333;
  font-size: 26rpx;
  margin-left: 12rpx;
  border-radius: 10rpx;
}
.review-btn:hover {
  background: #ffc600;
}
</style>
