<template>
  <div class="reader-operations">
    <span
      class="operations"
      :style="{
        color,
      }"
    >
      <span class="operation-item">
        <svg-icon
          icon-class="view"
          :style="{
            fontSize: iconSize + 'px',
            color,
          }"
        ></svg-icon>
        <span>{{ formatNum(info.browseCount) }}</span>
      </span>
      <span class="operation-item">
        <svg-icon
          :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'"
          :style="{
            fontSize: iconSize + 'px',
            color: info.loveCountStatus ? selectColor : color,
          }"
        ></svg-icon>
        <span>{{
          formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
        }}</span>
      </span>
      <span class="operation-item">
        <svg-icon
          :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'"
          :style="{
            fontSize: iconSize + 'px',
            color: info.collectCountStatus ? selectColor : color,
          }"
        ></svg-icon>
        <span>{{
          formatNum(info.collectCount) == 0
            ? "收藏"
            : formatNum(info.collectCount)
        }}</span>
      </span>
      <span class="operation-item">
        <svg-icon
          icon-class="share2"
          :style="{
            fontSize: iconSize + 'px',
            color,
          }"
        ></svg-icon>
        <span>分享</span>
      </span>
    </span>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { formatNum } from "@/utils/index";
export default {
  name: "ReaderOperations",
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
    // 来源类型 biz_cultural_relic-文物；biz_exhibition-布展；biz_elite_exhibition-精品展
    sourceType: {
      type: String,
      default: "",
    },
    iconSize: {
      type: [Number, String],
      default: 28,
    },
    color: {
      type: String,
      default: "#fff",
    },
    selectColor: {
      type: String,
      default: "#fff",
    },
  },
  data() {
    return {
      loginDialogVisible: false,
      shareDialogVisible: false,
      curLink: "", //当前地址栏的链接
    };
  },
  computed: {
    ...mapGetters(["token", "showLoginDialog"]),
  },
  methods: {
    formatNum(num) {
      return formatNum(num);
    },
  },
};
</script>

<style lang="scss" scoped>
.reader-operations {
  width: 100%;
  max-width: 500px;
}

.operations {
  // margin-top: 22px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .operation-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
  }

  .svg-icon {
    margin-right: 10px;
    font-size: 24px;
  }

  .like {
    color: #831122;
  }

  .collect {
    color: #831122;
  }
}

.el-button--text {
  color: $deepBlue;
}

.copy {
  display: flex;
  align-items: center;
  height: 180px;
}

.qrcode {
  .img-container {
    width: 200px;
    height: 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

::v-deep .el-input-group__append {
  padding: 0 40px;
}

::v-deep .dialog-footer {
  .el-button {
    border-radius: 0;
  }

  .el-button--primary {
    border: none;
    background-color: $deepBlue;
  }
}
</style>
