<template>
  <div class="position-nav" :style="'background:' + bg">
    <div class="icon">
      <i class="iconfont icon-dingwei"></i>
    </div>
    <div class="inp">
      <input :style="'background:' + bg" type="text" v-model="groupName" readonly/>
    </div>
    <div class="right" @click="openNavigation(address)">导航</div>
  </div>
</template>

<script>
// import wxMap from "@/pages/weixin/wxMap";
export default {
  // wxMap
  mixins: [],
  props: {
    groupName: {
      type: String,
      default: "",
    },
    address: {
      type: String,
      default: "",
    },
    bg: {
      type: String,
      default: "#f2f3f5",
    },
  },
  data() {
    return {
      show: "",
    };
  },
  mounted() {
    this.show = this.address;
  },
  methods: {
    openNavigation() {
      this.navigation(this.address);
    },
  },
};
</script>

<style lang="scss" type="text/scss" scoped>
.position-nav {
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
  align-items: center;
  border-radius: 35px;
  height: 70px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
  .icon {
    width: 60px;
    i {
      font-size: 36px;
      color: $color2;
    }
  }
  .inp {
    width: 470px;
    input {
      width: 100%;
      line-height: 36px;
      font-size: 26px;
      color: $color4;
    }
  }
  .right {
    width: 100px;
    border-left: 1px solid $color3;
    font-size: 26px;
    color: $text7;
    text-align: center;
  }
}
</style>
