<template>
  <div>
    <div class="operations">
      <span class="operation-item" @click="handleLike" v-if="like">
        <svg-icon
          icon-class="like"
          :class="loveCountStatus ? 'like' : ''"
        ></svg-icon>
        <span>{{ loveCount }}</span>
      </span>
      <span class="operation-item" @click="handleCollect" v-if="collect">
        <svg-icon
          icon-class="collect"
          :class="collectCountStatus ? 'collect' : ''"
        ></svg-icon>
        <span>{{ collectCount }}</span>
      </span>
      <span v-if="share" class="operation-item" @click="handleShare">
        <svg-icon icon-class="share"></svg-icon>
      </span>
    </div>
    <el-dialog
      title="登录提示"
      :visible.sync="loginDialogVisible"
      width="30%"
      :before-close="handleLoginClose"
    >
      <span>读者功能需登录进行使用，是否去登录？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleToLogin">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="分享"
      :visible.sync="shareDialogVisible"
      width="40%"
      :before-close="handleShareClose"
    >
      <div class="qrcode">
        <div>
          <img
            src="@/assets/404_images/no-pic.png"
            alt="二维码"
            width="100px"
            height="100px"
          />
        </div>
        <div>扫描左侧二维码，跳转到对应小程序页面后分享，或复制下方链接</div>
      </div>
      <div class="copy">
        <div class="link">{{ curLink }}</div>
        <el-button type="text" @click.native="copyUrl">
          <svg-icon icon-class="copy"></svg-icon>
          复制链接</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
  name: "ReaderOperations",
  props: {
    // 是否需要点赞,默认需要
    like: {
      type: Boolean,
      default: true,
    },
    // 是否需要收藏，默认需要
    collect: {
      type: Boolean,
      default: true,
    },
    // 是否需要分享，默认需要
    share: {
      type: Boolean,
      default: true,
    },
    // 点赞数量
    loveCount: {
      type: String,
      default: "0",
    },
    // 收藏数量
    collectCount: {
      type: String,
      default: "0",
    },
    // 点赞状态
    loveCountStatus: {
      type: Boolean,
      default: false,
    },
    // 收藏状态
    collectCountStatus: {
      type: Boolean,
      default: false,
    },
    sourceId: {
      type: String,
      default: "",
    },
    // 来源类型 biz_cultural_relic-文物；biz_exhibition-布展；biz_elite_exhibition-精品展
    sourceType: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loginDialogVisible: false,
      shareDialogVisible: false,
      curLink: "", //当前地址栏的链接
    };
  },
  computed: {
    ...mapGetters(["token"]),
  },
  methods: {
    handleCollect: debounce(function () {
      if (this.token) {
        const params = {
          sourceId: this.sourceId,
          sourceType: this.sourceType,
          title: this.title,
        };
        this.$store.dispatch("user/toggleCollect", params).then(() => {
          if (!this.collectCountStatus) {
            // 点赞
            this.$message.success("已收藏！");
          } else {
            this.$message.success("已取消收藏！");
          }
          this.$emit("reload");
        });
      } else {
        this.loginDialogVisible = true;
      }
    }),
    // 点赞
    handleLike: debounce(function () {
      if (this.token) {
        const params = {
          sourceId: this.sourceId,
          sourceType: this.sourceType,
          title: this.title,
        };
        this.$store.dispatch("user/toggleLike", params).then(() => {
          if (!this.loveCountStatus) {
            // 点赞
            this.$message.success("已点赞！");
          } else {
            this.$message.success("已取消点赞！");
          }
          this.$emit("reload");
        });
      } else {
        this.loginDialogVisible = true;
      }
    }, 500),

    handleShare() {
      this.curLink = window.location.href.toString();
      this.shareDialogVisible = true;
    },

    handleLoginClose() {
      this.loginDialogVisible = false;
    },
    handleShareClose() {
      this.shareDialogVisible = false;
    },

    handleToLogin() {
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },

    copyUrl() {
      let inputElement = document.createElement("input");
      inputElement.value = this.curLink;
      document.body.appendChild(inputElement);
      inputElement.select();
      document.execCommand("Copy");
      inputElement.remove();
      this.$message.success('复制成功！赶快去分享吧~')
    },
  },
};
</script>

<style lang="scss" scoped>
.operations {
  margin-top: 22px;
  display: flex;
  //   justify-content: space-between;
  .operation-item {
    display: flex;
    align-items: center;
    margin-right: 32px;
    cursor: pointer;
  }
  .svg-icon {
    margin-right: 16px;
    font-size: 36px;
    color: #61666d;
  }
  .like {
    color: #d4237a;
  }
  .collect {
    color: #2069c4;
  }
}
.qrcode,.copy {
  display: flex;
//   justify-content: space-between;
  align-items: center;
}
</style>