<template>
  <section class="AiThumbsUp flex" :class="{checked}" @click.native="handleClick">
    <div class="count" v-text="count||0"/>
    <u-icon :name="thumbIcon"/>
  </section>
</template>

<script>
export default {
  name: "AiThumbsUp",
  props: {
    bid: {default: ""},
    count: {default: 0},
    btn: Boolean,
    type: {default: "content"},
    action: {default: ""}
  },
  computed: {
    thumbIcon() {
      return this.checked ? "thumb-up-fill" : "thumb-up"
    }
  },
  data() {
    return {
      checked: false,
      actions: {
        content: "/app/appcontentinfo/supportById",
        comment: "/app/appcontentcomment/supportById",
      }
    }
  },
  methods: {
    handleClick() {
      if (!this.checked) {
        let {action, type, actions, bid: id} = this
        this.$instance.post(action || actions[type], null, {
          params: {id}
        }).then(res => {
          if (res?.code == 0) {
            this.checked = true
            this.$emit("update:count", ++this.count)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.AiThumbsUp {
  color: #666;

  &.checked {
    color: #2D7DFF;
  }

  .count {
    margin-right: 8px;
  }
}
</style>
