<template>
  <div
    class="friendList-item-wrapper"
    :id="'friend-'+name+'-'+index"
    @click="selectedItem"
  >
    <div class="avatar-wrapper">
      <avatar :src="friend.faceURL" class="avatar" />
      <img v-if="avatarBorder" :src="avatarBorder" class="avatar-border" />
    </div>

    <div class="item-nick text-ellipsis">
      {{ friend.remark || friend.nickname || friend.userID }}
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import doctorBorder from '@/assets/doctor.svg'
import guanjiaBorder from '@/assets/guanjia.svg'
  export default {
  props: ['friend','friendGroupNameList','type','groupName','index'],
  data() {
    return {
      addInfo: {
        name: '',
        userList: ''
      },
    }
  },
    computed: {
      avatarBorder() {
        if (this.friend.userID?.startsWith('D')) {
          return doctorBorder
        } else if (this.friend.userID?.startsWith('C')) {
          return guanjiaBorder
        }
        return null
      },
      name() {
        if(this.groupName) {
          return this.groupName
        }else {
          return ''
        }
      },
      borderClass() {
        // 判断 userID 第一个字母
        const userID = this.friend?.friendInfo?.userID || '';
        if (userID.startsWith('D')) {
          return 'doctor-border';
        } else if (userID.startsWith('C')) {
          return 'guanjia-border';
        } else {
          return ''; // 默认不加边框
        }
      },
      ...mapState({
        friendList: state => state.friend.friendList,
      }),
    },

  methods:{
    selectedItem() {
      console.log("this.friendList",this.friendList)
      this.$store.commit('resetCurrentConversation')
      this.$store.dispatch('setFriendContent', {
        friend: this.friend,
        groupName: this.groupName,
        type: this.type
      })
    },
    handleFriendClick() {
      this.tim.getConversationProfile(`C2C${this.friend.userID}`).then(({data})=>{
        this.$store.commit('updateCurrentConversation', data)
      })
      .catch(error => {
          this.$store.commit('showMessage', {
            type: 'error',
            message: error.message
          })
        })
    },
    handleCommand(value) {
      this.tim.addToFriendGroup({name: value, userIDList: [this.friend.profile.userID]}).then(() => {
        this.$store.commit('showMessage', {
          message: '添加成功',
          type: 'success'
        })
      }).catch((error) => {
        this.$store.commit('showMessage', {
          type: 'error',
          message: error.message
        })
      })
    },
    removeFromFriendList(data) {
      this.tim.deleteFriend({
        userIDList: [data.userID],
        type: 'Delete_Type_Both'
      }).then(() => {
      }).catch(error => {
        this.$store.commit('showMessage', {
          type: 'error',
          message: error.message
        })
      })
    },
    removeFromFriendGroup(userID,name) {
      this.tim.removeFromFriendGroup({
        name: name,
        userIDList: [userID],
      }).then(() => {
      }).catch(() => {
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
  .avatar-wrapper
    position relative
    width 40px
    height 40px
    margin-right 10px
    flex-shrink 0

  .avatar
    width 100%
    eight 100%
    border-radius 50%
    display block
  .avatar-border
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    pointer-events none
  .avatar
    width 40px
    height 40px
    margin-right 10px
    border-radius 50%
    flex-shrink 0
  .item-nick
    padding-left 20px
    width 100%
    color #fff
    box-sizing border-box
    word-wrap break-word
    overflow hidden
    text-overflow ellipsis
    font-size 16px
  .friendList-item-wrapper
    cursor pointer
    padding 0 40px
    padding-bottom 15px
    display flex
    align-items center
    justify-content flex-start
  .group-friend-btn
    position absolute
    right 13px

  .unread-count
    padding-left 10px
    flex-shrink 0
    color #666
    font-size 12px

  .badge
    vertical-align bottom
    background-color #f56c6c
    border-radius 10px
    color #FFF
    display inline-block
    font-size 12px
    height 18px
    max-width 40px
    line-height 18px
    padding 0 6px
    text-align center
    white-space nowrap
  .el-icon-chat-dot-round:before
    color #dddddd
</style>
