<template>
  <div class="shop-info-con bg-grey">
    <div class="header flex-default">
      <img class="avatar" :src="shopData.shopImage" />
      <div class="content">
        <div class="name">{{ shopData.shopName }}</div>
        <div class="follow-num">关注数&nbsp;&nbsp;&nbsp;{{ getfollows }}</div>
      </div>
      <div class="follow flex-default" @click="handleFollow">
        <m-icon icon="icon-collect2" :size="12" />
        <div class="text">{{ isFollows ? "取消关注" : "关注" }}</div>
      </div>
    </div>
    <div class="desc">
      <div class="title">简介</div>
      <div class="content">
        {{ shopData.introduction }}
      </div>
    </div>
    <!-- <div class="link">
      <div class="link-item flex-default">
        <span class="label">联系人</span>
        <span class="info">{{ shopData.contact }}</span>
      </div>
      <div class="link-item flex-default">
        <span class="label">联系方式</span>
        <span class="info">{{ shopData.contactPhone }}</span>
      </div>
      <div class="link-item flex-default">
        <span class="label">联系地址</span>
        <span class="info">{{ shopData.shopAddress }}</span>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      merchantId: "",
      shopData: {},
      shopCount: {
        commont: 0,
        follow: 0,
      },
      isFollows: false,
    };
  },
  computed: {
    getfollows() {
      if (this.shopCount.follow < 10000) {
        return this.shopCount.follow;
      } else {
        const follow = this.shopCount.follow / 10000;
        return follow.toFixed(2) + "万";
      }
    },
  },
  methods: {
    requestData() {
      this.$showLoading();
      this.$api({
        apiName: "getShop",
        postData: { merchantId: this.merchantId },
        success: (res) => {
          this.shopData = res;
        },
        complete: this.$hideLoading,
      });
    },
    requestCount() {
      this.$api({
        apiName: "getShopCount",
        postData: { merchantId: this.merchantId },
        success: (res) => {
          this.shopCount = res;
        },
      });
    },
    requestFollow() {
      this.$api({
        apiName: "isFollow",
        requiresAuth: false,
        postData: { merchantId: this.merchantId },
        success: (res) => {
          this.isFollows = res;
        },
      });
    },
    handleFollow() {
      if (!this.checkLogin()) {
        return;
      }
      this.$showLoading();
      this.$api({
        apiName: "followMerchantId",
        postData: {
          merchantId: this.merchantId,
        },
        success: (res) => {
          this.isFollows = !this.isFollows;
          this.$toast(this.isFollows ? "已取消" : "关注成功");
        },
        complete: this.$hideLoading,
      });
    },
  },
  created() {
    this.merchantId = this.$route.params.merchantId;
    this.requestData();
    this.requestCount();
    if (this.hasLogin) {
      this.requestFollow();
    }
  },
};
</script>

<style lang="less">
.shop-info-con {
  .header {
    background: #ffffff;
    padding: 10px 16px 20px 16px;
    margin-bottom: 10px;
    .avatar {
      width: 45px;
      height: 45px;
      border-radius: 4px;
      object-fit: cover;
      margin-right: 10px;
    }
    .content {
      flex: 1;
      .name {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 3px;
      }
      .follow-num {
        font-size: 10px;
      }
    }
    .follow {
      background:#FA9F37;
      border-radius: 22px;
      padding: 6px 11px;
      .text {
        margin-left: 3px;
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
  .desc {
    padding: 16px;
    background: #ffffff;
    margin-bottom: 10px;
    > .title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    > .content {
      font-size: 14px;
      color: #999999;
    }
  }
  .link {
    background: #ffffff;
    padding: 0 16px;
    .link-item {
      padding: 16px 0;
      border-bottom: 1px solid #f1f1f1;
      font-size: 14px;
      &:last-of-type {
        border: none;
      }
      > .label {
        width: 80px;
        margin-right: 10px;
        font-weight: bold;
      }
      > .info {
        flex: 1;
        color: #999999;
      }
    }
  }
}
</style>