<template>
  <section class="tagManage">
    <div class="card" v-for="(group, i) in tags" :key="i">
      <AiCell title :label="group.name" />
      <u-row>
        <div class="tag" v-for="(op, j) in group.tagList" :key="j" :class="{ selected: selected.includes(op.id) }" @tap="$u.debounce(handleToggle(op.id))">
          {{ op.name }}
        </div>
      </u-row>
    </div>

  </section>
</template>

<script>
export default {
  name: 'tagManage',
  inject: ['top'],
  data() {
    return {
      tags: [],
    }
  },
  computed: {
    selected() {
      return this.top.groupId ? this.top.detail?.tagList.map((e) => e.tagId) : this.top.detail?.tags.map((e) => e.tagId)
    },
  },
  methods: {
    getTags() {
      this.$http
        .post(this.top.groupId ? '/app/wxcp/wxgroupchattag/listAll' : '/app/wxcp/wxcorptag/listAll', null, {
          params: { size: 9999 },
        })
        .then((res) => {
          if (res?.data) {
            this.tags = res.data.records
          }
        })
    },
    handleToggle(tagId) {
      uni.showLoading({
        title: '提交中',
      })

      this.$http
        .post(this.top.groupId ? '/app/wxcp/wxgroupchattag/markTagForCP' : '/app/wxcp/wxcorptag/markTagForCP', null, {
          params: this.top.groupId ? { tagId, groupId: this.top.groupId } : { tagId, customerId: this.top.custom },
        })
        .then((res) => {
          uni.hideLoading()
          if (res?.code == 0) {
            this.$u.toast('操作成功!')
            this.getTags()
            this.top.getContact()
          }
        })
        .catch((err) => {
          uni.hideLoading()
          this.$u.toast(err)
        })
    },
  },
  created() {
    this.getTags()
  },
}
</script>

<style lang="scss" scoped>
.tagManage {
  padding-top: 16px;

  .tag {
    cursor: pointer !important;

    &.selected {
      background-color: $uni-color-primary !important;
      color: #fff;
    }

    &.disabled {
      color: #999;
      cursor: not-allowed;
    }

    & + .tag {
      margin-left: 16px;
    }
  }
}
</style>
