<!-- 我的好友列表 -->
<template>
  <div class="tellist">
    <p class="lianxi">联系人({{friendList.length}})</p>
    <!-- 字母检索 -->
    <!-- <ul class="zimu">
      <li v-for="item in letter" :b="item" @click="zimujian(item)">{{item}}</li>

    </ul> -->
    <div class="dingwei">
      <ul class="friendList" v-for="items in letter">
        <p class="nameTitle" :id="gernerateId(items)">{{items}}</p>
        <li class="dianlist" v-for="(item, index) in friendList" :id='item.toUid' @click="choose(item, index)"
            @mouseenter="mouseFriend(index)"
            @mouseleave="mouseLeave" v-if="item.initials==items">
          <el-checkbox class="checkbox" v-if="checkVisable!=undefined && checkVisable == true"
                       @change="checkFriends($event,item,index)"/>
          <img @click.stop="getuserinfo(item.toUid)" :src="'http://101.132.238.98:9090/' + item.image" class="header"
               v-if="item.image"/>
          <img @click.stop="getuserinfo(item.toUid)" src="../../assets/chat/default-c2c-header.png" class="header"
               v-if="!item.image"/>

          <p class="name checked" v-if="checkedIndex == index">{{item.name}} <a v-if="item.remark!=null" class="bllck">({{item.remark}})</a>
          </p>
          <p class="name" v-if="checkedIndex != index">{{item.name}}<a v-if="item.remark!=null"
                                                                       class="bllck">({{item.remark}})</a></p>

          <el-dropdown v-if="!checkVisable" class="dianright" trigger="hover">
			<span class="el-dropdown-link">
        <span v-if="sindex==index" class="diandian">...</span>
      </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus"><span @click.stop="beiZhu(item.toUid)">备注</span></el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus"><span @click.stop="deleteFriend(item.toUid)">删除</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
      <el-button v-if="checkVisable!=undefined && checkVisable == true" type="primary" @click="confirm">确 定</el-button>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      center>
      <md-card>
        <md-card-header>
          <md-card-header-text>
            <div class="md-title">{{userInfos.userName}}</div>

          </md-card-header-text>

          <md-card-media>
            <img :src="userInfos.photo" v-if="!!userInfos.photo">
            <img src="../../assets/maildatou.png" v-if="!userInfos.photo">
          </md-card-media>

        </md-card-header>
        <div class="pd16">
          <div class="md-subhead"><span class="textdq">手机号</span>&nbsp&nbsp{{userInfos.mobNo}}</div>
          <div class="md-subhead"><span class="textdq">单位</span>&nbsp&nbsp{{userInfos.companyName}}</div>
          <span class="chaochuhh md-subhead"><span class="textdq">个人简介</span>&nbsp&nbsp{{userInfos.profile}}</span>

        </div>

      </md-card>

    </el-dialog>
  </div>
</template>

<script>
  import {
    getApi,
    postApi,
    getMessage
  } from '../../api/commonApi'
  export default {
    data() {
      return {
        friendList: [], // 好友列表
        checkedIndex: 0, // 选中的索引
        sindex: '-1',
        // 字母列表
        letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        letter: [],
        centerDialogVisible: false,
        userInfos: {},
        chooseFriends: [],
        chooseIndexs: []
        // checkVisable: true
      }
    },
    props: ['checkVisable'],
    /* 周期方法 start */
    created() {
      this.getFiredList()
    },

    mounetd() {

    },

    watch: {},
    /* 周期方法  end */

    methods: {
      checkFriends(checked, item, index) {
        let that = this
        let i = that.chooseFriends.indexOf(item)
        if (checked && i < 0) {
          that.chooseFriends.push(item)
          that.chooseIndexs.push(index)
        } else if (!checked && i >= 0) {
          that.chooseFriends.splice(i, 1)
          that.chooseIndexs.splice(i, 1)
        }
      },
      confirm() {
        let obj = {
          friends: this.chooseFriends,
          indexs: this.chooseIndexs
        }
        this.$emit('confirm', obj)
      },
      gernerateId(index) {
        return 'div' + index
      },
      // 字母检索
      zimujian(e) {
        var a = 'div' + e
        console.log(a)
        document.getElementById(a).scrollIntoView({block: 'start', behavior: 'smooth'})
      },
      /**
       * 获取我的好友列表数据
       */
      // 获取好友列表
      getFiredList(queryKey) {
        let that = this
        that.letter = []
        getApi('/txCloud/friend/msg/list', {
          userId: localStorage.getItem('userId'),
          queryKey: queryKey
        }, function (data) {
          that.friendList = data.list
          for (let i = 0; i < data.list.length; i++) {
            for (let j = 0; j < that.letters.length; j++) {
              if (data.list[i].initials === that.letters[j]) {
                if (that.letter.indexOf(that.letters[j]) == -1) {
                  that.letter.push(that.letters[j])

                  console.log(that.letter)
                }
              }
            }
          }
        }, function (data) {

        })
      },

      /**
       * 选择某一个好友
       */
      choose(item, index) {
        if (this.checkVisable) {
          return
        }
        this.checkedIndex = index
        console.log(item)
        let obj = {
          item: item,
          index: index
        }
        console.log(obj)
        this.$emit('chooseFriend', obj)
        this.readyidu(item)
      },
      // 标记已读
      readyidu(item) {
        // debugger
        let that = this
        postApi('/chat/chatinfo/modify/readFlag', {
          msgType: 1,
          userId: localStorage.getItem('userId'),
          toUid: item.toUid,
          readFlag: true
        }, function (data) {
          // getMessage('标记已读', 'success')
          // that.getFiredList()
        }, function (data) {
          getMessage(data.msg, 'error')
        })
      },
      // 删除好友
      deleteFriend(id) {
        this.$confirm('确定删除好友?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let that = this
          let list = []
          list.push(id)
          postApi('txCloud/friend/delete', {
            fromUid: localStorage.getItem('userId'),
            toUidList: list
          }, function (data) {
            getMessage('已删除', 'success')
            that.getFiredList()
          }, function (data) {
            getMessage(data.msg, 'error')
          })
        }).catch(() => {
          getMessage('已取消', '')
        })
      },
      // 鼠标经过
      mouseFriend(index) {
        this.sindex = index
      },
      // 鼠标移除
      mouseLeave() {
        this.sindex = '-1'
      },
      // 添加备注名
      beiZhu(id) {
        this.$prompt('请输入备注名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '备注名不能为空'
        }).then(({
                   value
                 }) => {
          let that = this
          postApi('txCloud/friend/update', {
            fromUid: localStorage.getItem('userId'),
            toUid: id,
            remark: value
          }, function (data) {
            that.getFiredList()
          }, function (data) {
            getMessage(data.msg, 'error')
          })
        }).catch(() => {
          getMessage('已取消', '')
        })
      },
      // 添加标注
      guanZhu(id, index) {
        let times = ''
        if (index == 1) {
          times = new Date().getTime()
        } else {
          times = 0
        }
        let that = this
        postApi('txCloud/friend/update', {
          fromUid: localStorage.getItem('userId'),
          toUid: id,
          topTime: times
        }, function (data) {
          that.getFiredList()
        }, function (data) {
          getMessage(data.msg, 'error')
        })
      },
      // 获取详细资料
      getuserinfo(userId) {
        if (!this.checkVisable) {
          let that = this
          that.userInfos = {}
          that.centerDialogVisible = true
          getApi('/user/team', {
              userId: userId
            },
            function (data) {
              that.userInfos = data.userInfo
              console.log(data.userInfo)
            },
            function (data) {
              getMessage(data.msg, 'error')
            })
        }
      }
    }
  }
</script>

<style scoped>
  .diandian {
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
    display: inline-block;
    line-height: 10px;
    position: relative;
    right: 20px;
    top: 26px;
  }

  .friendList {
    overflow: auto;
    width: 100%;
  }

  .tellist {
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .dingwei {
    position: relative;
    width: 100%;
    overflow: auto;
    height: 100%;
    behavior: 'smooth';
    /*padding-bottom: 100px;*/
  }

  /*定义滚动条轨道*/

  .dingwei::-webkit-scrollbar-track {
    border-radius: 0;
    background: 0 0;
    -webkit-box-shadow: inset 0 0 5px transparent
  }

  /*定义滚动条高宽及背景*/

  .dingwei::-webkit-scrollbar {
    width: 10px;
    height: 5px
  }

  /*定义滚动条*/

  .dingwei::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: hsla(0, 0%, 100%, .1);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .3)
  }

  .zimu {
    position: absolute;
    top: 50px;
    right: 15px;
    list-style: none;
    z-index: 9999;
  }

  .zimu > li {
    margin-top: 5px;
    width: 100%;
    height: 20px;
    color: #6469CC;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    opacity: .6;
    cursor: pointer
  }

  .zimu > li:hover {
    opacity: 1;
    color: #6469CC;
  }

  .nameTitle {
    padding: 2px 10px;
    background: #f3f3f3;
    font-size: 14px;
    padding-left: 17px;
  }

  .lianxi {
    padding-left: 17px;
    margin-bottom: 13px;
    margin-top: 13px;
  }

  .dianlist {
    position: relative;
  }

  .dianright {
    position: absolute;
    top: -25px;
    right: 0;
  }

  .chaochuhh {
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }

  .pd16 {
    padding: 16px;
    border-top: 1px solid rgb(242, 242, 242)
  }

  .textdq {

    width: 70px;
    float: left;
    text-align-last: justify;
  }

</style>

<style>
  @import url("friendList.css");

  .tellist .popper__arrow::after {
    border-bottom-color: transparent;
    border-width: 0
  }

  .tellist .md-card {
    width: 340px;
    display: inline-block;
    vertical-align: top;
  }

  .tellist .el-dialog {
    overflow: hidden !important;
    background: transparent !important;
    border: none;
    box-shadow: none;
  }

  .tellist .el-dialog__header {
    display: none;
  }

  .tellist .v-modal {
    background: transparent
  }

</style>
