<template>
  <div>
    <div class="operations">
      <span class="operation-item" v-if="like">
        <svg-icon
          :style="{ fontSize: iconSize + 'px' }"
          icon-class="like"
          :class="loveCountStatus ? 'like' : ''"
        ></svg-icon>
        <span>{{ loveCount }}</span>
      </span>
      <span class="operation-item" v-if="collect">
        <svg-icon
          :style="{ fontSize: iconSize + 'px' }"
          icon-class="collect"
          :class="collectCountStatus ? 'collect' : ''"
        ></svg-icon>
        <span>{{ collectCount }}</span>
      </span>
      <span v-if="share" class="operation-item">
        <svg-icon
          icon-class="share"
          :style="{ fontSize: iconSize + 'px' }"
        ></svg-icon>
      </span>
    </div>
  </div>
</template>

<script>
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: "",
    },
    iconSize: {
      type: [Number, String],
      default: 36,
    },
  },
  data() {
    return {
      loginDialogVisible: false,
      shareDialogVisible: false,
      curLink: "", //当前地址栏的链接
    };
  },
};
</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: #831122;
  }
  .collect {
    color: #2069c4;
  }
}
</style>