<template>
  <view style="height: 66rpx" v-if="isShowFollowButton">
    <view class="track-follow-page">
      <view class="container-track-follow">
        <view>若无需此赛道更新推送，请点击 </view>
        <view class="cancel-follow" @click="isFollowHandler">{{ isFollowData ? "取消关注" : "已取消" }} </view>
        <icon @click="followInfoHandler" type="info" size="16" color="#E37318 " />
        <van-icon @click="cancelFollowClick" class="close-follow" name="cross" size="16" color="#999" />
      </view>
      <van-dialog use-slot :show="show" close-on-click-overlay show-cancel-button :showConfirmButton="false" :showCancelButton="false" @close="onClickHide">
        <view class="content-dialog">
          <view class="close"><van-icon name="cross" color="#333" @click="onClickHide" /></view>
          <text class="tips">提示</text>
          <text>取消关注后，该赛道下的更新内容都不会对您做消息推送，您也可以在【查研观向小助手】公众号菜单栏【推送规则】下修改您关注的赛道</text>
          <image show-menu-by-longpress src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/follow_dialog.png"></image>
        </view>
      </van-dialog>
    </view>
  </view>
</template>

<script>
import { User, Reports } from "@/config/api.js";
export default {
  name: "",
  components: {},
  props: {
    isShowFollowButton: {
      type: Boolean,
      required: true,
      default: false,
    },
    source: {
      type: String,
      required: true,
      default: "",
    },
    sourceId: {
      type: Number,
      required: true,
      default: null,
    },
    isFollowData: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 开启弹框
    followInfoHandler() {
      this.show = true;
    },
    // 关闭弹框
    onClickHide() {
      this.show = false;
    },
    // 取消或者添加关注
    async isFollowHandler() {
      const res =
        this.source == "resources"
          ? await Reports.reportFllow({
              IndustrialManagementId: this.sourceId,
            })
          : await User.userIndustryFollow({
              SourceId: this.sourceId,
              Source: "activity",
              DoType: this.isFollowData ? "cancel" : "add",
            });
      if (res.Ret === 200) {
        uni.showToast({
          title: res.Msg,
          duration: 2000,
        });
        this.$emit("update:isFollowData", res.Data.Status == 1 ? true : false);
      }
    },
    // 点击关闭感兴趣条幅
    cancelFollowClick() {
      this.$emit("update:isShowFollowButton", false);
    },
  },
};
</script>
<style scoped lang="scss">
.track-follow-page {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 9;
  .container-track-follow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60rpx;
    padding-right: 30rpx;
    background-color: #fff1e9;
    color: #e37318;
    .cancel-follow {
      width: 136rpx;
      height: 44rpx;
      background-color: #e37318;
      color: #fff;
      text-align: center;
      line-height: 46rpx;
      margin: 0 20rpx 0 15rpx;
    }
    .close-follow {
      position: absolute;
      top: 50%;
      right: 20rpx;
      transform: translateY(-50%);
      width: 30rpx;
      height: 30rpx;
    }
  }
  .content-dialog {
    text-align: center;
    font-size: 32rpx;
    color: #666;
    line-height: 40rpx;
    padding: 0 20rpx;
    .close {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 60rpx;
      padding-right: 10rpx;
    }
    .tips {
      color: #333;
      font-size: 34rpx;
      font-weight: 500;
      margin-bottom: 12rpx;
    }
    image {
      margin-top: 35rpx;
      width: 545rpx;
      height: 579rpx;
    }
  }
}
</style>