<template>
  <div class="shopDetails">
    <div class="header container">
      <img class="logo fl" :src="`${$basePath}${shopInfo.defaultImgUrl}`" />
      <div class="desc fl">
        <h3>{{ shopInfo.companyName }}</h3>
        <span class="rz">已认证</span>
        <div @click="gz">
          <img src="@assets/guanzhu.png" />
          <span class="gz">关注商家</span>
        </div>
      </div>
      <div class="fr search">
        <el-input
          class="input"
          placeholder="请输入关键词"
          prefix-icon="el-icon-search"
        />
        <div class="fr qz">搜全站</div>
        <div class="fr bd">搜本店</div>
      </div>
    </div>
    <div class="navs ">
      <div class="container">
        <router-link class="nav " :to="`/shop/${sid}/products`"
          >首页
        </router-link>
        <router-link class="nav  " :to="`/shop/${sid}/profile`"
          >企业简介
        </router-link>
        <router-link class="nav " :to="`/shop/${sid}/honor`"
          >资质荣誉
        </router-link>
      </div>
    </div>
    <router-view :shopInfo="shopInfo" />
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component
export default class extends Vue {
  private shopInfo: IAny = {};
  @Prop(String)
  private sid!: string;
  @Watch("sid", { immediate: true })
  async load(id: number) {
    const [err, data] = await this.$post("/company/details", { id });
    if (err) return;
    this.shopInfo = data;
  }
  async gz() {
    const [err, data] = await this.$post("/member/follow/addMemberFollow", {
      companyId: this.sid
    });
    console.log(data);
  }
}
</script>
<style lang="scss" scoped>
.shopDetails {
  background: #fff;
  .header {
    height: 137px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 30px 0;
    .logo {
      width: 142px;
      height: 80px;
    }
    .desc {
      margin-left: 20px;
      h3 {
        font-size: 18px;
        color: rgb(51, 51, 51);
        margin-bottom: 20px;
      }
      .rz {
        margin-right: 20px;
        background: rgb(253, 85, 34);
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
      }
      .gz {
        margin-left: 5px;
        font-size: 12px;
        color: rgb(51, 51, 51);
      }
      div {
        display: inline-block;
        cursor: pointer;
      }
    }
    .search {
      margin-top: 20px;
      .input {
        width: 440px;
        height: 40px;
      }
      div {
        width: 90px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        &.bd {
          background: rgb(253, 85, 34);
          color: #fff;
          margin: 0 10px;
        }
        &.qz {
          border: 1px solid #fd5522;
          color: #fd5522;
        }
      }
    }
  }
  .navs {
    background: rgb(253, 85, 34);
    height: 40px;
    line-height: 40px;
    .nav {
      color: #fff;
      height: 100%;
      display: inline-block;
      width: 120px;
      text-align: center;
      border-left: 1px solid #ff672e;
      &:last-child {
        border-right: 1px solid #ff672e;
      }
      &.router-link-exact-active {
        background: rgb(237, 68, 17);
      }
    }
  }
}
</style>
