<template>
  <div class="track-follow-page" v-if="isShowFollowButton">
    <view class="container-track-follow">
      <view>若对该赛道不感兴趣，可点击 </view>
      <view class="cancel-follow" @click="isFollowHandler">{{ isFollowData ? "取消关注" : "已取消" }} </view>
      <Icon name="warning-o" @click="followInfoHandler" size="16" color="#fff" />
      <Icon class="close-follow" name="cross" @click="cancelFollowClick" size="16" color="#fff" />
    </view>
    <van-dialog v-model:show="show" closeOnClickOverlay :show-confirm-button="false" @cancel="onClickHide">
      <view class="content-dialog">
        <div class="close">
          <Icon name="cross" color="#333" @click="onClickHide" />
        </div>
        <p class="tips">提示</p>
        <p>取消关注后，该赛道下的更新内容都不会对您做消息推送，您也可以在【查研观向小助手】公众号菜单栏【推送规则】下修改您关注的赛道</p>
        <div class="img-dlg">
          <img @click="previewImage" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/follow_dialog.png" />
        </div>
      </view>
    </van-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, toRefs, ref } from "vue";
import { Icon, Dialog, Toast } from "vant";
import { RaiApi, FreeButton } from "@/api/cygx/api.js";
const VanDialog = Dialog.Component;
const props = defineProps({
  isShowFollowButton: {
    type: Boolean,
    required: true,
    default: false,
  },
  isFollowData: {
    type: Boolean,
    required: true,
    default: false,
  },
  sourceId: {
    type: Number,
    required: true,
    default: null,
  },
});
const emits = defineEmits(["update:isShowFollowButton", "update:isFollowData"]);
const show = ref(false);
// 打开弹框
const followInfoHandler = () => {
  show.value = true;
};
// 取消或者添加关注
const isFollowHandler = async () => {
  const res = await RaiApi.userIndustryFollow({
    SourceId: props.sourceId,
    Source: "article",
    DoType: props.isFollowData ? "cancel" : "add",
  });
  if (res.Ret === 200) {
    emits("update:isFollowData", res.Data.Status == 1 ? true : false);
  }
  Toast(res.Msg);
};
// 关闭弹框
const onClickHide = () => {
  show.value = false;
};
// 预览图片
const previewImage = () => {
  wx.previewImage({
    current: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/follow_dialog.png", // 当前显示图片的 http 链接
    urls: ["https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/follow_dialog.png"], // 需要预览的图片 http 链接列表
  });
};
// 关闭横幅
const cancelFollowClick = () => {
  emits("update:isShowFollowButton", false);
};
</script>

<style scoped lang="scss">
.track-follow-page {
  position: relative;
  width: calc(100% + 40px);
  margin-left: -35px;
  .container-track-follow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    padding-right: 30px;
    background-color: #3385ff;
    color: #fff;
    .cancel-follow {
      width: 136px;
      height: 44px;
      background-color: #fff;
      color: #3385ff;
      text-align: center;
      line-height: 46px;
      margin: 0 20px 0 15px;
    }
    .close-follow {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
    }
  }
  .content-dialog {
    position: relative;
    font-size: 32px;
    color: #666;
    line-height: 40px;
    .close {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      height: 30px;
      padding: 20px;
      .van-icon-cross {
        float: right;
      }
    }
    p {
      text-align: center;
      padding: 0 20px;
    }
    .tips {
      color: #333;
      font-size: 34px;
      font-weight: 500;
      margin-bottom: 12px;
    }
    img {
      width: 545px;
      height: 579px;
    }
  }
  .img-dlg {
    margin: 35px 0 0;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
</style>
