<template>
  <div @click="handleGroupClick" class="group-container">
    <div class="group-item">
      <!--      <avatar :src="group.avatar" />-->
      <el-avatar v-if="group.avatar" :size="48" :src="group.avatar" @error="handleImgError">
        <!--        <div class="avatar">{{ conversation.userProfile.nick }}</div>-->
      </el-avatar>
      <div class="group-name text-ellipsis">{{ group.name }}</div>
      <i v-if="closeVisible" class="el-icon-remove-outline" @click.stop.prevent="disGroup"></i>
    </div>
  </div>
</template>

<script>
import tim from "@/tim";

export default {
  props: ["group"],
  data() {
    return {
      visible: false,
      options: [
        {
          text: "退出群组",
          handler: this.quitGroup,
        },
      ],
      isImgError: false,
      closeVisible: false,
    };
  },
  methods: {
    handleImgError() {
      this.isImgError = true;
    },
    handleGroupClick() {
      const conversationID = `GROUP${this.group.groupID}`;
      this.$store.dispatch("checkoutConversation", conversationID);
    },
    quitGroup() {
      this.tim.quitGroup(this.group.groupID).catch((error) => {
        this.$store.commit("showMessage", {
          type: "error",
          message: error.message,
        });
      });
    },
    disGroup() {
      console.log(this.group.groupID);
      let promise = tim.dismissGroup(this.group.groupID);
      promise
        .then(function (imResponse) {
          // 解散成功
          console.log(imResponse.data.groupID); // 被解散的群组 ID
        })
        .catch(function (imError) {
          console.warn("dismissGroup error:", imError); // 解散群组失败的相关信息
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.group-container {
  //overflow-y: scroll;
  //flex: 1;
  .group-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.2s;

    &:hover {
      background-color: rgba(14, 112, 255, 0.1);
    }

    .avatar {
      width: 100%;
      height: 100%;
      //margin-right: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      //margin-right: 16px;
      background: #0e71ff;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
    }

    .group-name {
      flex: 1;
      color: #333333;
      line-height: 30px;
      margin-left: 16px;
    }
  }
}
</style>
