<template>
  <div class="label-remark">
    <!-- RemoteId -->
    <div class="friend-item">
      <div class="friend-item-title">RemoteId</div>
      <div class="friend-item-content">{{ currentContact.RemoteId || '' }}</div>
    </div>
    <!-- UnionId -->
    <div v-show="currentContact.UnionId" class="friend-item">
      <div class="friend-item-title">UnionId</div>
      <div class="friend-item-content">{{ currentContact.UnionId }}</div>
    </div>
    <!-- Name -->
    <div class="friend-item">
      <div class="friend-item-title">昵称</div>
      <div class="friend-item-content">
        {{ currentContact.Name }}
        <span v-show="currentContact.Suffix" style="color: #67c23a">@{{ currentContact.Suffix }}</span>
      </div>
    </div>
    <!-- 备注 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">备注名</span>
        <!-- 暂时不提供修改备注的接口 -->
        <!-- <div class="btns">
          <el-button type="primary" plain icon="el-icon-edit-outline" circle @click="modifyMemo"></el-button>
          <el-button type="danger" plain icon="el-icon-delete" circle @click="deleteMemo"></el-button>
        </div>-->
      </div>
      <div class="friend-item-content">{{ currentContact.Alias || '' }}</div>
    </div>
    <!-- 描述 | 没用接口中不再提供此信息 -->
    <!-- <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">描述</span>
        <div class="btns">
          <el-button type="primary" plain icon="el-icon-edit-outline" circle @click="modifyDesc"></el-button>
          <el-button type="danger" plain icon="el-icon-delete" circle @click="deleteDesc"></el-button>
        </div>
      </div>
      <div class="friend-item-content">{{currentContact.Desc || ''}}</div>
    </div>-->
    <!-- 电话 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">电话</span>
        <!-- <div class="btns">
          <el-button type="primary" plain icon="el-icon-plus" circle @click="addPhone"></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            @click="deleteAllPhone"
            title="清空号码"
          ></el-button>
        </div>-->
      </div>
      <div class="friend-item-content">
        <div class="phone-item" v-for="(phone, index) in phones" :key="index">
          <span v-text="phone"></span>
          <!-- <el-button
            class="delete-one-phone"
            type="primary"
            plain
            icon="el-icon-close"
            circle
            @click="deleteOnePhone(index)"
          ></el-button>-->
        </div>
      </div>
    </div>

    <!-- 企业联系人 -->
    <template v-if="currentContact.hasOwnProperty('DepartIds')">
      <!-- 职位 -->
      <div class="friend-item">
        <div class="friend-item-title">职位</div>
        <div class="friend-item-content">{{ currentContact.Job || '无' }}</div>
      </div>
      <!-- 部门 -->
      <div v-show="currentContact.DepartIds" class="friend-item">
        <div class="friend-item-title">
          <span class="tip">部门</span>
        </div>
        <div class="friend-item-content">
          <el-tag v-for="(departId, index) in currentContact.DepartIds" :key="index" type>
            {{ (departments[currentWeChatId] && departments[currentWeChatId][departId]) || departId }}
          </el-tag>
        </div>
      </div>
    </template>

    <!-- 我的客户 -->
    <template v-else>
      <!-- 来源 -->
      <div class="friend-item">
        <div class="friend-item-title">
          <span class="tip">来源</span>
        </div>
        <div class="friend-item-content">
          {{ currentContact.Source | getFriendSource }}
        </div>
      </div>
      <!-- 添加时间 -->
      <div class="friend-item">
        <div class="friend-item-title">添加时间</div>
        <div class="friend-item-content">
          {{ currentContact.AddTime | timeFilter }}
        </div>
      </div>
      <!-- 标签 -->
      <div class="friend-item">
        <div class="friend-item-title">
          <span class="tip">标签</span>
          <div class="btns">
            <!-- <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              circle
              title="创建标签"
              @click="addNewLabel"
            ></el-button> -->
            <el-button
              style="padding: 2px"
              type="primary"
              plain
              icon="el-icon-price-tag"
              circle
              title="打标签"
              @click="showLabelDialog"
            ></el-button>
          </div>
        </div>
        <div class="friend-item-content">
          <el-tag v-for="(label, index) in labelIds" :key="index" closable type @close="removeLabel(label)">
            {{ labelMap[label] || label }}
          </el-tag>
        </div>
      </div>
    </template>

    <!-- dialog -->
    <el-dialog
      title="添加标签"
      :visible.sync="labelDialogVisible"
      width="60%"
      class="label-dialog"
      :modal="true"
      :before-close="handleClose"
    >
      <!-- 手机标签 -->
      <div v-for="(lg, index) in currentLabels" :key="'labelGroups' + index">
        <p class="p-class">
          <span style="margin-right: 10px">
            {{ lg.Name }}
          </span>
        </p>
        <el-tag
          class="label-class"
          style="margin: 10px; cursor: pointer"
          :class="{ chose: labelId === label.Id }"
          v-for="(label, index) in lg.Labels"
          :key="'label' + index"
          @click="choseLabel(label, lg.Type)"
          @close="deleteLabel(label)"
        >
          {{ label.Name }}
        </el-tag>
      </div>

      <span slot="footer">
        <el-button  @click="labelDialogVisible = false">取 消</el-button>
        <el-button  type="primary" @click="modifyLabels">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { UserLabelSetTask } from '@/api/webSocketApi'

export default {
  name: 'FriendInfo',
  data() {
    return {
      labelDialogVisible: false,
      labelName: '', // 标签名
      labelId: 0, // 标签id
      labelType: 0 // 标签id
    }
  },
  computed: {
    ...mapGetters({
      //   currentUser: 'currentUser', // 用户信息
      departments: 'conversation/departments', // 部门
      currentContact: 'conversation/currentFriend', // 当前好友
      currentLabels: 'conversation/currentLabels', // 当前微信的所有标签
      currentWeChatId: 'conversation/currentWeChatId' // 当前wxid
    }),
    // 该好友的标签Id[1,2,3...]
    labelIds() {
      return this.currentContact.LabelIds || []
    },
    myLabels() {
      let ml = []
      for (const lg of this.currentLabels) {
        if (lg.Type === 2 && lg.Labels) {
          for (const label of lg.Labels) {
            ml.push(label.Id)
          }
        }
      }
      return ml
    },
    // 标签id-标签name
    labelMap() {
      let lm = {}
      let mln = [] // 我的标签的name
      if (this.currentLabels.length > 0) {
        // 优先展示我的标签
        for (const lg of this.currentLabels) {
          if (lg.Type === 2 && lg.Labels) {
            for (const label of lg.Labels) {
              lm[label.Id] = label.Name
              mln.push(label.Name)
            }
          }
        }
        // 后展示企业标签
        for (const lg of this.currentLabels) {
          if (lg.Type === 1 && lg.Labels) {
            for (const label of lg.Labels) {
              lm[label.Id] = mln.indexOf(label.Name) > 0 ? lg.Name + ':' + label.Name : label.Name
            }
          }
        }
      }
      return lm
    },
    // 电话号码
    phones() {
      if (this.currentContact.Mobile) {
        return this.currentContact.Mobile.split(',')
      }
      return []
    }
  },
  methods: {
    // 显示标签
    showLabelDialog() {
      if (!this.currentContact.RemoteId) return
      this.labelDialogVisible = true
    },
    // 移除好友的标签
    removeLabel(labelId) {
      this.$confirm('移除该标签?', '移除标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let message = {
            WxId: this.currentWeChatId, //string 商家所属微信号
            LabelId: labelId, //int32 标签id，0则新建标签（如存在同名标签则会失败）
            IsCorp: this.myLabels.indexOf(labelId) === -1 ? true : false,
            DelUsers: [this.currentContact.RemoteId], //string 删除的wxid，用,分隔
            TaskId: this.currentContact.RemoteId
          }
          UserLabelSetTask(message)
        })
        .catch(() => {})
    },
    // 处理关闭
    handleClose(done) {
      this.labelName = ''
      this.labelId = 0
      done()
    },
    // 选择标签
    choseLabel(label, type) {
      this.labelType = type
      this.labelName = label.Name
      this.labelId = label.Id
    },
    // 打标签
    modifyLabels() {
      if (this.labelIds.indexOf(this.labelId) === -1) {
        let message = {
          WxId: this.currentWeChatId, //string 商家所属微信号
          LabelId: this.labelId, //int32 标签id，0则新建标签（如存在同名标签则会失败）
          IsCorp: this.labelType === 1 ? true : false,
          AddUsers: [this.currentContact.RemoteId],
          TaskId: this.currentContact.RemoteId
        }
        UserLabelSetTask(message)
        // 隐藏dialog
        this.labelDialogVisible = false
        // 数据重置
        this.labelName = ''
        this.labelId = 0
      } else {
        this.$message({
          type: 'warning',
          message: '该标签已经存在!',
          duration: 1000
        })
      }
    }
    // 新建一个标签
    // createLabel() {
    //   console.log('新建标签')
    //   this.$prompt('标签名不能与现有的重复！', '新建标签', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     inputPattern: /\S{1,200}/,
    //     inputErrorMessage: '标签长度不对'
    //   }).then(({ value }) => {
    //     let message = {
    //       WxId: this.currentWeChatId, //string 商家所属微信号
    //       LabelName: value, //string 标签名 id!=0 会设置为该标签名
    //       LabelId: 0, //int32 标签id，0则新建标签（如存在同名标签则会失败）
    //     }
    //     console.log(message)
    //     this.$store.dispatch('websocket/UserLabelModifyTask', message)
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '取消新建标签',
    //       duration: 1000
    //     })
    //   });
    // },
    // 删除标签
    // deleteLabel(label, type) {
    //   console.log('删除标签')
    //   //   this.labelType = type
    //   //   this.labelName = label.Name
    //   //   this.labelId = label.Id
    // },
    // 修改备注
    // modifyMemo() {
    //   if (!this.currentContact.FriendId) {
    //     this.$message.warning('请先选择一个好友！')
    //     return
    //   }
    //   if (this.currentContact.isGh) {
    //     this.$message.warning('不能修改公众号的备注！')
    //     return
    //   }
    //   this.$prompt(`修改<b style="color:green;"> ${this.currentContact.FriendNick} </b>的备注`, '修改备注', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     inputPlaceholder: this.currentContact.Memo,
    //     inputValue: this.currentContact.Memo,
    //     dangerouslyUseHTMLString: true,
    //     inputPattern: /\S{1,50}/,
    //     inputErrorMessage: '备注长度1-50，不能含有特殊字符！'
    //   })
    //     .then(({ value }) => {
    //       let message = {
    //         WeChatId: this.currentContact.WeChatId,
    //         FriendId: this.currentContact.FriendId,
    //         Memo: value
    //       }
    //       this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '取消输入'
    //       })
    //     })
    // },
    // 删除备注
    // deleteMemo() {
    //   if (!this.currentContact.FriendId) {
    //     this.$message.warning('请先选择一个好友！')
    //     return
    //   }
    //   if (!this.currentContact.Memo) {
    //     this.$message.warning('该好友没有备注，无需删除！')
    //     return
    //   }
    //   this.$confirm('删除备注?', '删除备注', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       let message = {
    //         WeChatId: this.currentContact.WeChatId,
    //         FriendId: this.currentContact.FriendId,
    //         DelFlag: 1
    //       }
    //       this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       })
    //     })
    // },
    // 修改描述
    // modifyDesc() {
    //   if (!this.currentContact.FriendId) {
    //     this.$message.warning('请先选择一个好友！')
    //     return
    //   }
    //   if (this.currentContact.isGh) {
    //     this.$message.warning('不能修改公众号的描述！')
    //     return
    //   }
    //   this.$prompt(`修改<b style="color:green;"> ${this.currentContact.FriendNick} </b>的描述`, '修改描述', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     inputPlaceholder: this.currentContact.Desc,
    //     inputValue: this.currentContact.Desc,
    //     dangerouslyUseHTMLString: true,
    //     inputPattern: /\S{1,200}/,
    //     inputErrorMessage: '备注长度1-200，不能含有特殊字符！'
    //   })
    //     .then(({ value }) => {
    //       let message = {
    //         WeChatId: this.currentContact.WeChatId,
    //         FriendId: this.currentContact.FriendId,
    //         Desc: value
    //       }
    //       this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '取消输入'
    //       })
    //     })
    // },
    // 删除描述
    // deleteDesc() {
    //   if (!this.currentContact.FriendId) {
    //     this.$message.warning('请先选择一个好友！')
    //     return
    //   }
    //   if (!this.currentContact.Desc) {
    //     this.$message.warning('该好友没有描述，无需删除！')
    //     return
    //   }
    //   this.$confirm('删除描述?', '删除描述', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       let message = {
    //         WeChatId: this.currentContact.WeChatId,
    //         FriendId: this.currentContact.FriendId,
    //         DelFlag: 2
    //       }
    //       this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       })
    //     })
    // },
    // 添加电话
    // addPhone() {
    //   if (!this.currentContact.FriendId) {
    //     this.$message.warning('请先选择一个好友！')
    //     return
    //   }
    //   if (this.currentContact.isGh) {
    //     this.$message.warning('不能修改公众号的电话！')
    //     return
    //   }
    //   //   this.$prompt('固话或者手机号码', '添加电话', {
    //   this.$prompt(`修改<b style="color:green;"> ${this.currentContact.FriendNick} </b>的电话号码`, '修改电话号码', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     inputPlaceholder: '两个号码之间用逗号隔开',
    //     inputValue: this.currentContact.Phone,
    //     dangerouslyUseHTMLString: true
    //     // inputPattern: /0\d{2,3}-[1-9]\d{6,7}|1[3-9]\d{9}/,
    //     // inputErrorMessage: '电话号码格式或长度不对！'
    //   })
    //     .then(({ value }) => {
    //       let preg = new RegExp(/0\d{2,3}-[1-9]\d{6,7}|1[3-9]\d{9}/)
    //       let phoneArry = value.replace(/,/g, '，').split('，')
    //       let phoneAccept = phoneArry.filter((p) => {
    //         return preg.test(p)
    //       })
    //       if (phoneAccept.length === 0) {
    //         this.$message.warning('电话号码的格式有问题，请重新输入！')
    //       } else {
    //         // if (this.currentContact.Phone) {
    //         //   phone = this.currentContact.Phone + value
    //         // }
    //         let message = {
    //           WeChatId: this.currentContact.WeChatId,
    //           FriendId: this.currentContact.FriendId,
    //           Phone: phoneAccept.join(',').replace(/,/g, '，')
    //         }
    //         this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
    //       }
    //     })
    //     .catch((err) => {
    //       this.$message({
    //         type: 'warning',
    //         message: err
    //       })
    //     })
    // },
    // 清空所有电话
    // deleteAllPhone() {
    //   if (!this.currentContact.FriendId) {
    //     this.$message.warning('请先选择一个好友！')
    //     return
    //   }
    //   if (!this.currentContact.Phone) {
    //     this.$message.warning('该好友没有电话，无需清空！')
    //     return
    //   }
    //   this.$confirm('清空电话?', '清空电话', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       let message = {
    //         WeChatId: this.currentContact.WeChatId,
    //         FriendId: this.currentContact.FriendId,
    //         DelFlag: 4
    //       }
    //       this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       })
    //     })
    // },
    // // 删除选择的电话
    // deleteOnePhone(index) {
    //   if (!this.currentContact.FriendId) {
    //     this.$message.warning('请先选择一个好友！')
    //     return
    //   }
    //   if (!this.currentContact.Phone) {
    //     this.$message.warning('该好友没有电话，无需清空！')
    //     return
    //   }
    //   this.$confirm('删除该电话?', '删除该电话', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       let phoneStr = ''
    //       for (const phone of this.phones) {
    //         if (phone !== this.phones[index]) {
    //           phoneStr = phone + '，'
    //         }
    //       }
    //       phoneStr = phoneStr.replace(/，$/, '')
    //       let message = {
    //         WeChatId: this.currentContact.WeChatId,
    //         FriendId: this.currentContact.FriendId,
    //         Phone: phoneStr
    //       }
    //       if (phoneStr !== '') {
    //         this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
    //       } else {
    //         let delMessage = {
    //           WeChatId: this.currentContact.WeChatId,
    //           FriendId: this.currentContact.FriendId,
    //           DelFlag: 4
    //         }
    //         this.$store.dispatch('websocket/ModifyFriendMemoTask', delMessage)
    //       }
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       })
    //     })
    // },
  }
}
</script>

<style lang="scss" scoped>
.label-remark {
  width: 100%;
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;

  .friend-item {
    width: 100%;
    margin: 5px 0;

    .friend-item-title {
      height: 30px;
      padding: 5px;
      background: $bg-color-nav-title-3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tip {
        line-height: 20px;
      }
      .btns {
        line-height: 20px;
      }
    }

    .friend-item-content {
      background: white;
      min-height: 30px;
      padding: 5px;
      //   border: solid red 1px;
      .phone-item {
        // border: solid red 1px;
        padding: 5px 0;
        .delete-one-phone {
          margin-left: 20px;
        }
      }
      .el-tag {
        // border: solid yellow 1px;
        margin: 2px;
      }
    }
  }
}
</style>

