<template>
  <view class="store-detail">
    <view v-if="!loading">
		<view class="flex">
			<image class="img-logo" :src="info.logo" mode="aspectFill"></image>
		</view>
		<view class="detail-contetn">
			<view class="content-h border-btm flex al-item-center">
				<view class="h-l">
					<view class="title">{{ info.name }}</view>
					<view class="text-n fs12">{{ followCount || 0 }}人关注</view>
				</view>
				<view class="su"></view>
				<view class="h-r flex ">
					<view class="h-r__info flex flex-colum al-item-center" @click="followFn">
						<!-- <image class="follow-icon" v-if="!shopInfo.isFollow" :src="event_rul + '/static/theme/follow-icon.svg'" mode="widthFix"></image> -->
						<text class="iconfont" :class="{'isFollow icon-aixin_shixin': info.isFollow, 'icon-aixin': !info.isFollow}" style="font-size: 44rpx;color: #CE0000;"></text>
						<text class="follow-tx fs12">{{info.isFollow ? "已关注" : "关注"}}</text>
					</view>
				</view>
			</view>
			<view class="content-t border-btm flex al-item-center" v-show="info.content">
				<text class="iconfont icon-icon-themes-coupon"></text>
				<view class="flex flex-colum">
					<view class="title">店铺简介</view>
					<view class="text fs12">{{ info.content }}</view>
				</view>
			</view>
			<view class="content-t border-btm flex al-item-center" v-show="info.address">
				<text class="iconfont icon-icon-location"></text>
				<view class="flex flex-colum ">
					<view class="title">店铺地址</view>
					<view class="text fs12">{{ info.address }}</view>
				</view>
			</view>
			<view class="content-t border-btm flex al-item-center" v-show="info.createtime">
				<text class="iconfont icon-rilitianchong"></text>
				<view class="flex flex-colum ">
					<view class="title">开店时间</view>
					<view class="text fs12">{{ info.createtime }}</view>
				</view>
			</view>
			<view class="content-t border-btm flex al-item-center" v-show="info.start_hours || info.end_hours">
				<text class="iconfont icon-icon-clock"></text>
				<view class="flex flex-colum ">
					<view class="title">营业时间</view>
					<view class="text fs12">{{ info.start_hours || "" }}-{{ info.end_hours || "" }}</view>
				</view>
			</view>
			<view class="content-t  flex al-item-center" v-show="info.tel">
				<text class="iconfont icon-icon-phone"></text>
				<view class="flex flex-colum ">
					<view class="title">联系电话</view>
					<view class="text fs12">{{ info.tel }}</view>
				</view>
			</view>
		</view>
		<button class="btn" @tap="goback">去看看全部商品</button>
    </view>
    <loading v-else></loading>
    <!-- 悬浮按钮 -->
    <drag-button></drag-button>
  </view>
</template>

<script>
var app = getApp();
import { mapState } from "vuex";
export default {
  data() {
    return {
      info: {},
      loading: false,
	  event_rul: app.globalData.event_url,
	  followCount: 0,
    shopData: uni.getStorageSync('header_data') || {}, 
    };
  },
  computed: {
    ...mapState(['opt'])
  },
  created() {
    this.loading = true;
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    goback() {
      uni.navigateBack(1);
    },
    followFn() {
      var that = this;

      // 暂时写死follow_id：27，正确为 follow_id: that.opt.bid
      app.post(
        "ApiMy/addFollow",
        { follow_id: that.opt.bid || "", type: "store" },
        function (res) {
          if (res) {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
          that.getInfo()
          setTimeout(() => {
            that.$set(that.shopData,'attention',that.info.fans_count);
            that.$set(that.shopData,'isFollow',that.info.isFollow);
            uni.setStorage({
              key: "header_data",
              data: that.shopData,
            });
          }, 200);
        }
      );
    },
	// 获取详情信息
    getInfo() {
      var that = this;
      // 暂时写死id: 27,正确为 id: that.opt.bid
      app.get(
        "ApiBusiness/newIndex",
        { id: that.opt.bid || "" },
        function (res) {
          that.info = res.business;
		  that.followCount = res.followCount
          that.loading = false;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.store-detail {
  letter-spacing: 2rpx;
  color: #333;
  
  .img-logo {
	  width: 100%;
	  height: 400rpx;
  }
  .detail-contetn {
	  padding: 0 40rpx;
	  background-color: #fff;
	  .content-h {
		  padding: 28rpx 0;
		  
		  .h-l {
			  width: 452rpx;
			  padding-right: 10rpx;
			 .title {
				 font-weight: 500;
			 	 font-size: 34rpx;
			 }
			 .text-n {
			 	padding-top: 14rpx;
				color: #666;
				font-weight: 400;
			 } 
		  }
		  .su {
			  width: 2rpx;
			  height: 56rpx;
			  background-color: #FF5E5E;
		  }
		  .h-r {
			  width: 180rpx;
			  justify-content: flex-end;
        &__info {
          width: 80rpx;
        }
        .icon-aixin {
          color: #666666;
          &.isFollow {
            color: #EB2407;
          }
        }
			  
			  .follow-icon {
			    width: 44rpx;
			  }
			  .follow-tx {
				  color: #666;
			  }
		  }
	  }
	  
	  .content-t {
		  padding: 20rpx 0;
      .iconfont {
        color: #FF8800;
        font-size: 44rpx;
        flex-shrink: 0;
        margin-right: 26rpx;
      }
		  
		  .title {
			font-weight: 500;
		  }
		  .text {
			  font-weight: 500;
			  padding-top: 8rpx;
			  color: #666;
		  }
	  }
  }
  .btn {
    font-size: 36rpx;
    // font-weight: bold;
    width: 630rpx;
    margin: 90rpx auto;
    border-radius: 400rpx;
    height: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to left, #FF5E07, #FF9F28);
    color: #fff;
  }
  .border-btm {
	  border-bottom: 2rpx solid #ECECEC;
  }
  
  .attention {
    padding: 30rpx 20rpx;

    .attention-box {
      padding: 30rpx 20rpx;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      border-radius: 10rpx;

      .attention-l {
        display: flex;
        align-items: center;

        .attention-l-img {
          width: 120rpx;
          height: 120rpx;
          border-radius: 16rpx;
          flex-shrink: 0;
        }
        .attention-l-text {
          height: 100%;
          padding-left: 20rpx;
          display: flex;
          flex-direction: column;
          .attention-l-title {
            font-size: 30rpx;
            font-weight: bold;
          }
          .attention-l-text-s {
            padding-top: 10rpx;
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #bdbdbd;

            .icon_arrow_right {
              padding-left: 20rpx;
            }
          }
        }
      }
      .attention-r {
        width: 120rpx;
        height: 54rpx;
        line-height: 54rpx;
        text-align: center;
        flex-shrink: 0;
        border-radius: 8rpx;
        &.isFollow {
          background-color: #efbd6f;
          color: #FFF;
        }
        &.followed {
          color: #efbd6f;
          position: relative;
          &::before {
            content: "";
              position: absolute;
              left: 0;
              width: 200%;
              height: 200%;
              border: 2rpx solid #efbd6f;
              box-sizing: border-box;
              transform: scale(0.5,0.5);
              border-radius: 16rpx;
              transform-origin: 0 0;
          }
        }
      }
    }
  }

  .store-detail-conten {
    padding: 0 20rpx;
    .detail-conten-b {
      display: flex;
      flex-direction: column;
      border-radius: 10rpx;
      background-color: #fff;

      .detail-conten-c {
        min-height: 400rpx;
        padding: 0 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }
      .detail-conten-t {
        display: flex;
        // align-items: center;
        .detail-conten-t-tilt {
          width: 150rpx;
          font-weight: bold;
          font-size: 30rpx;
        }

        .detail-conten-t-text {
          flex: 1;
          // color: #bdbdbd;
          padding-top: 4rpx;
          // font-weight: bold;
          color: #111111;
        }
      }

      .btn {
        font-size: 30rpx;
        font-weight: bold;
        width: 650rpx;
        margin: 30rpx auto;
        border-radius: 400rpx;
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to right, #fbd89e, #eec071);
        color: #fff;
      }
    }
  }
}
</style>
