<template>
  <div>
    <div class="enterprise" :style="styleData.goToShopStyle" ref="fansFollowShop"
      @click="styleClick('click', 'fansFollowShop')" @mousemove="styleClick('mousemove', 'fansFollowShop')"
      @mouseout="styleClick('mouseout')">
      <!--    <div class="shop-logo-box" :style="styleData.logoStyle">-->
      <!--      <img-->
      <!--        :src="fansPlayList.shopLogoUrl"-->
      <!--        alt=""-->
      <!--        class="shop-logo"-->
      <!--        :style="styleData.shopLogoStyle"-->
      <!--        @click="goShop"-->
      <!--      />-->
      <!--    </div>-->
      <p class="shop-name" :style="styleData.shopNameStyle">
        {{ fansPlayList.shopName }}
      </p>
      <div class="shop-btn" :style="styleData.shopBtnStyle" @click="fansClick" v-lz-click="'4'">
        {{ btnName }}
      </div>
      <div style="position: absolute; top: 0px; right: 0px;" @click="goShop" v-lz-click="'4'">
        <i class="van-icon van-icon-arrow"
          style="color: black;font-size: .36rem;position: absolute;right: 0.3rem;top:0.33rem"></i>
      </div>
    </div>
    <div
      :style="{backgroundColor:'#FFFFFF',padding:'10px',position: 'absolute',width: '100%',height: '1rem',top: '4.1rem', boxSizing: 'border-box',}">
      <!--店铺头像-->
      <div
        style="border-radius: 50%;width: .6rem;height: .6rem;overflow: hidden;position: relative;display: inline-block;float: left;">
        <img :src="fansPlayList.shopLogoUrl" style="border-radius: inherit;display: block;width: 100%;height: 100%;" />
      </div>
      <div
        style="border-radius: 50%;width: .6rem;height: .6rem;overflow: hidden;position: relative;display: inline-block;float: left;margin-left: 5px">
        <img style="border-radius: inherit;display: block;width: 100%;height: 100%;"
          src="//img10.360buyimg.com/imgzone/jfs/t1/84551/3/13933/1693/5db11ed2Edb453e05/7b0f3933d4a25b03.png" />
      </div>
      <!--用户头像-->
      <div
        style="border-radius: 50%;width: .6rem;height: .6rem;overflow: hidden;position: relative;display: inline-block;float: left;margin-left: 5px">
        <img style="border-radius: inherit;display: block;width: 100%;height: 100%;"
          :src="fansPlayList.userImg?fansPlayList.userImg:'//img10.360buyimg.com/imgzone/jfs/t1/9529/39/3166/1273/5bd67241E2d74c9d5/19440fb8b44dd788.png'" />
      </div>
      <div :style="{marginLeft:'.1rem'}"
        style="border-radius: 50%;width: .6rem;height: .6rem;overflow: hidden;position: relative;display: inline-block;float: left;">
        <img style="border-radius: inherit;display: block;width: 100%;height: 100%;"
          src="//img10.360buyimg.com/imgzone/jfs/t1/47953/27/14155/1384/5db11ed2E683d6657/73f36e61e036df2d.png" />
      </div>
      <div v-if="loveScoreTotal >= 0"
        style="width: 1.25rem;height: .45rem;overflow: hidden;position: relative;display: inline-block;float: left;margin-top: 5px;margin-left: 5px;">
        <img style="border-radius: inherit;display: block;width: 100%;" :src="getFansLevel" />
      </div>
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import { FansFollowShopPopComService } from "../../../util/comCreate.js";
import store from "../../../store/store";
import { goToShopPage } from "../../../util/tools";
let { fansPlayList, fansfollowList, fansfollowStatus } = apis1;

export default {
  props: [
    "isTemplate",
    "datas",
    "keyData",
    "styleData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      fansPlayList: [],
      shareFlag: false,
      shareUserId: "",
      btnName: "点我关注",
      btnFlag: false,
      loveScore: 0,
      shopId: "",
      styleDataOld: {},
      loveScoreTotal: 0,
    };
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  mounted() { },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datasAll = this.templateData;

      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.fansPlayList = {
            shopLogoUrl: datasAll.activity.shopLogo,
            shopName: datasAll.activity.shopName,
            userImg:
              "http://storage.360buyimg.com/i.imageUpload/6a645f3536333863336362363865363831363231343238373434303630_mid.jpg",
            userName: "Artist0926",
          };
        } else {
          //没有模板的数据
          this.fansPlayList = {
            shopLogoUrl: "http://img30.360buyimg.com/popshop/jfs/t12040/167/1277706166/88856/87939c85/5a1e9842N3d659b8f.jpg",
            shopName: "XXX京东自营官方旗舰店",
            userImg:
              "http://storage.360buyimg.com/i.imageUpload/6a645f3536333863336362363865363831363231343238373434303630_mid.jpg",
            userName: "Artist0926",
          };
        }
      } else {
        fansfollowStatus((data) => {
          this.fansPlayList = data.data;
          this.loveScoreTotal = data.data.score;
          this.shopId = data.data.shopId;
          if (
            this.fansPlayList.isFollow == true &&
            this.fansPlayList.firstEntering == true
          ) {
            this.loveScore = data.data.loveScore;
          }
          if (this.fansPlayList.isFollow == false) {
            this.btnName = "点我关注";
            this.btnFlag = false;
          } else {
            this.btnName = "已关注";
            this.btnFlag = true;
            if (this.fansPlayList.firstEntering == true) {
              let actStatus = sessionStorage.getItem("actStatus");

              if (actStatus == 2) {
                // Toast
                this.$toast("活动已结束");
                return;
              }
              if (actStatus == 1) {
                this.$toast("活动尚未开始");
                return;
              }
              // FansFollowShopPopComService.create((submit) => {
              //   FansFollowShopPopComService.close();
              this.publicData.$emit("fansFollowShop1", true);
              // });
            }
          }
        });
      }
    },
    goShop() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      goToShopPage(this.shopId);
    },
    fansClick() {
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
      } else {
        let actStatus = sessionStorage.getItem("actStatus");

        if (actStatus == 2) {
          // Toast
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          return;
        }
        if (this.btnFlag == false) {
          fansfollowList((data) => {
            if (data.data.result == true) {
              if (data.data.follow == true) {
                this.loveScore = data.data.score;
              }
            }
            // FansFollowShopPopComService.create((submit) => {
            //   FansFollowShopPopComService.close();
            this.btnName = "已关注";
            this.btnFlag = true;
            this.publicData.$emit("fansFollowShop", this.loveScore);
            // });
          });
        } else {
          this.$toast("活动期间您已关注过该店铺！");
        }
      }
    },
  },
  computed: {
    getFansLevel: function () {
      if (this.loveScoreTotal <= 10) {//新粉
        return "//img10.360buyimg.com/imgzone/jfs/t1/90177/6/669/2207/5db11ed2E66a74c48/90af4886ed8511c4.png";
      } else if (this.loveScoreTotal > 10 && this.loveScoreTotal <= 20) {//宠爱粉
        return "//img10.360buyimg.com/imgzone/jfs/t1/72565/14/13812/2347/5db11ed2Eeaef4b3c/96748a6581e6a228.png";
      } else if (this.loveScoreTotal > 20 && this.loveScoreTotal <= 40) {//铁粉
        return "//img10.360buyimg.com/imgzone/jfs/t1/71558/11/13711/2110/5db11ed2Eecd2f361/84c247b4b23b5c8f.png";
      } else if (this.loveScoreTotal > 40) {//超级粉
        return "//img10.360buyimg.com/imgzone/jfs/t1/97079/5/628/2667/5db11ed2E7db81a35/59ebbee070a08832.png";
      }
    },
  }
};
</script>
<style lang="scss" scoped>
</style>
