<template>
  <div id="containt">
    <div class="ico-online" :class="{no:isExitsRead}" ref="talkRef" @mousedown="bindMove" @click="openDialog"
         v-if="isCanUserTalk">
      <span>在线沟通</span>
    </div>
    <el-dialog
      :title="title"
      v-if="dialogTableVisible"
      :visible.sync="dialogTableVisible"
      width="1050px"
      custom-class="dialog-style onlineCommunicate"
      :append-to-body="true"
      v-el-drag-dialog
      v-el-dialog-center
      :fullscreen="isFullscreen"
      @close="handleClose"
      ref="talkDialog"
      :modal="false"
    >
      <el-button class="isFullIcon" v-if="!isFullscreen" @click="isFullscreen = true">
        <el-tooltip effect="dark" content="全屏" placement="top">
          <i class="iconfont icon-quanping"></i>
        </el-tooltip>

      </el-button>
      <el-button class="isFullIcon" v-else @click="isFullscreen = false">
        <el-tooltip effect="dark" content="缩小" placement="top">
          <i class="iconfont icon-suoxiao"></i>
        </el-tooltip>
      </el-button>
      <div class="cont">
        <div class="online-left">
          <div class="chat-box" @scroll="handleScroll1" ref="chatBox">
            <!--            <div class="txt"><span>上次聊到这里</span></div>-->
            <template v-for="(record,index1) in records">
              <div class="time" :key="'a'+index1">{{ record.time }}</div>
              <template v-for="(item,index2) in record.datas">
                <div class="item" :key="index1+'_'+index2" :class="item.sendUser == userInfo.id ? 'right' : 'left'">
                  <div class="name">{{ item.sendUserName }}</div>
                  <div class="cont" :class="{nobg:item.contentType == 1}">
                    <template v-if="item.contentType == 0">
                      {{ item.content }}
                    </template>
                    <template v-else-if="item.contentType == 1">
                      <baseUpload accept="file" multi="false" :file.sync="item.file" :edit="false"
                                  :showProperties="false" :showSize="true" :createBy="false"></baseUpload>
                    </template>
                    <template v-else-if="item.contentType == 2">
                      <ul class="onlieTalk-search-list">
                        <div class="tit"><i class="el-icon-chat-round"></i><b>猜你想问</b></div>
                        <div class="o-cont">
                        <li v-for="(answer,index) in item.answers" :key="index">
                          <a href="javascript:void(0);" class="a-link"
                             @click="answerCheckHandle(answer)">{{index+1}}、{{ answer.question }}</a>
                        </li>
                        </div>
                      </ul>
                    </template>
                  </div>
                </div>
              </template>
            </template>
          </div>
          <label id="labBtn" class="transverse">
            <div class="icon"><i class="el-icon-more"></i><i class="el-icon-more"></i></div>
          </label>
          <div class="chat-oper">
            <!-- <div class="btns">
              <el-tooltip :enterable="false" effect="dark" content="发送文件" placement="top">
                <i class="el-icon-folder-opened btn" @click="addFile" :disabled="!talkUserId"></i>
              </el-tooltip>
            </div> -->
            <!--            <div class="pop-inputTips" v-show="false">
                          <p>该商品的<span>有效</span>日期?</p>
                          <p><span>有效</span>使用时间是什么时候？</p>
                          <p>该商品的<span>有效</span>日期?</p>
                          <p><span>有效</span>使用时间是什么时候？</p>
                          <p>该商品的<span>有效</span>日期?</p>
                          <p><span>有效</span>使用时间是什么时候？</p>
                          <p>该商品的<span>有效</span>日期?</p>
                          <p><span>有效</span>使用时间是什么时候？</p>
                        </div>-->
            <el-input type="textarea" :rows="6" class="txt-textarea" v-model="talkUser.content" placeholder="请输入
选择此处，可粘贴文件（Ctrl+V）"
                      :disabled="!talkUserId" ref="contentRef" @paste.native="pasteMessage"
                      @keydown.ctrl.enter.native="handleEnterWithCtrl">
            </el-input>
            <div class="online-upload" v-if="hasFile">
              <ul class="el-upload-list el-upload-list--picture">
                <template v-for="(file,index) in files">
                  <li class="el-upload-list__item is-success" :key="index" v-if="file.status!=='success'">
                    <div>
                      <img
                        :src="getShowImage(file)"
                        class="el-upload-list__item-thumbnail"
                      />
                      <div class="el-upload-list__item-name">
                        <!-- <p class="input">
                          <el-input size="mini" v-model="file.fileName" @change="changeFileName(file)"></el-input>
                          <span>.{{ file.fileSuffix }}</span>
                        </p> -->
                        <div class="txt-box">
                          <div class="tb-left"></div>
                          <div class="tb-mid name">
                            <div class="txt">
                              <span>{{ file.fileName }}.{{ file.fileSuffix }}</span>
                              <span><i class="el-icon-edit" @click="openFileNameDialog(file,index)"></i></span>
                            </div>
                          </div>
                          <div class="format"><i class="el-icon-edit" @click="openFileNameDialog(file,index)"></i></div>
                        </div>
                        <p>{{ formatFileSize(file.size) }} </p>
                        <p v-if="file.status=='fail'" class="f-red">{{ file.failMsg }}</p>

                      </div>
                      <div class="el-upload-list__item-status-label error" v-if="file.status == 'fail'"><i
                        class="el-icon-upload-success iconfont icon-gantanhao"></i></div>
                      <div class="el-icon-close" @click="deleteFile(index)">
                        <i class="el-tooltip iconfont iconshanchu"></i>
                      </div>
                      <el-progress :percentage="file.percentage"
                                   v-if="file.status=='uploading' || file.status=='success'"></el-progress>
                    </div>
                  </li>
                </template>
              </ul>
            </div>
            <div class="clearfix">
              <div class="fl" v-if="!!talkUserId">
                <el-button type="warning" class="button-sty" slot="trigger" @click="$refs.inputFile.click()">
                  <input type="file" multiple @change="changeFile" ref="inputFile" style="display:none;"/>
                  <i class="el-icon-plus"></i>
                  从本地选择
                </el-button>
                <el-button type="success" class="button-sty" @click="showPrivateProfileDialog=true"
                           v-if="showPrivateUploadBtn">
                  <i class="iconfont icon-wendangshangchuan"></i>
                  从个人文档工作区选择
                </el-button>
                <el-button type="info" plain class="button-sty" @click="openHistoryDialog"><i
                  class="el-icon-time"></i>历史记录
                </el-button>
              </div>
              <div class="fr">
                <span class="t">Ctrl + Enter </span>
                <el-button type="primary" class="button-sty fr" @click="sendMsg" :disabled="!talkUserId">发送
                </el-button>
              </div>

            </div>

          </div>
        </div>
        <div class="online-user">
          <div class="u-oper">
            <el-input class="search-input" max="200" v-model="keyword" clearable placeholder="搜索"></el-input>
          </div>
          <div class="u-oper" style="padding: 2px 18px 0;">
            <el-checkbox class="checkbox-box" v-model="unread">未读</el-checkbox>
            <el-button @click="openUserDialog" class="button-sty" type="primary">
              <i class="iconfont icon-tianjiarenyuan"></i>选择人员
            </el-button>
          </div>
          <div class="u-list" ref="userBox">
            <template v-for="(talkUser,index3) in talkUserDatas">
              <div class="item" :key="'c'+index3" :class="getUserItemClass(talkUser)" @click="checkUser(talkUser)">
                <p class="name">
                  <b>{{ talkUser.nickName }}</b>
                  <span> ({{ talkUser.mobile }})</span>
                  <i class="iconfont icon-weidu" v-show="talkUser.readed==1"></i>
                </p>
                <i class="el-icon-error close" @click.stop="deleteTalkUser(talkUser,index3)"></i>
              </div>
            </template>
          </div>
        </div>
      </div>
    </el-dialog>
    <userDialog v-if="showUserDialog" :visiable.sync="showUserDialog" @confirm="confirmInserUser" multi="false"
                :param="{roleCodes:roleCodes}"/>
    <privateProfileDialog v-if="showPrivateProfileDialog" :visiable.sync="showPrivateProfileDialog"
                          @confirm="confirmPrivateProfileDialog"></privateProfileDialog>
    <el-dialog
      title="文件名修改"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      v-if="showFileNameDialog"
      :visible.sync="showFileNameDialog"
      :modal="false"
      custom-class="dialog-style list-dialog dialog-checkbox pd_8"
      width="400px"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div class="cont">
        <el-form ref="editForm" label-width="110px" class="adSearchForm" style="width: 362px;height: auto;">
          <el-form-item label="文件名称">
            <el-input v-model="editFileName" clearable class="all-width"/>
          </el-form-item>
          <el-form-item label="文件格式">
            {{ editFileSuffix }}
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain class="button-sty" @click="showFileNameDialog=false">
        <i class="el-icon-close el-icon"></i>
        {{ $t2('取 消', 'system.button.cancel2') }}
      </el-button>
      <el-button type="primary" @click="confirmFileNameDialog" class="button-sty">
        <i class="el-icon-check el-icon"></i>
        {{ $t2('确 定', 'system.button.confirm2') }}
      </el-button>
    </span>
    </el-dialog>

    <el-dialog
      title="历史记录"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      v-if="showHistoryDialog"
      :visible.sync="showHistoryDialog"
      :modal="false"
      custom-class="dialog-style list-dialog history-dialog"
      width="586px"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div class="history-box">
        <div class="h-form">
          <div class="search-box">
            <div class="search-classify" v-if="historyType == 2" @click="checkHistoryType(null)"><i
              class="el-icon-files"></i><span>文件</span><i
              class='el-icon-close'></i></div>
            <div class="search-classify" v-if="historyType == 1" @click="checkHistoryType(null)"><i
              class="el-icon-files"></i><span>图片</span><i
              class='el-icon-close'></i></div>
            <el-input class="search-input" v-model="historyKeyword" clearable @input="changeHistoryKeyword"></el-input>
          </div>
          <div class="keys-box">
            <span @click="checkHistoryType(2)">文件</span>
            <span @click="checkHistoryType(1)">图片</span>
          </div>
        </div>
        <div class="h-list" @scroll="handleScrollH" >
          <div class="item" v-for="(item,index) in talkHRecords" :key="index" :class="'talk_h'+item.id">
            <div class="name">{{ item.sendUserName }}</div>
            <div class="time">{{ item.createDate }}</div>
            <div>
              <template v-if="item.contentType == 0">
                {{ item.content }}
              </template>
              <template v-else-if="item.contentType == 1">
                <baseUpload accept="file" multi="false" :file.sync="item.file" :edit="false"
                            :showProperties="false" :showSize="true" :createBy="false"></baseUpload>
              </template>
              <template v-else-if="item.contentType == 2">
                <ul class="onlieTalk-search-list">
                  <div class="tit"><i class="el-icon-chat-round"></i><b>猜你想问</b></div>
                  <div class="o-cont">
                  <li v-for="(answer,index) in item.answers" :key="index">
                    <a href="javascript:void(0);" class="a-link">{{index+1}}、{{ answer.question }}</a>
                  </li>
                  </div>
                </ul>
              </template>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mixins} from "./mixins";
import userDialog from './talkUserDialog.vue';

export default {
  mixins: [mixins],
  components: {
    userDialog,
    privateProfileDialog: () => import('../../components/VabUpload/privateProfileDialog')
  },
  data() {
    return {};
  },
  mounted() {
  },
};
</script>
<style scoped lang="scss">
@import '~@/styles/variables.scss';
.onlieTalk-search-list{
  list-style: none;margin: -8px -4px 0;padding: 0;min-width: 360px;max-width: 90%;
  .tit{color: #333;font-size: 14px;margin: 10px 0 3px;padding-left: 6px;
    i{margin-right: 3px;}
  }
  .o-cont{background: #FFF;border-radius: 5px;margin-top: 7px;padding: 0 12px;}
  li{
    padding: 10px 2px;border-bottom: dashed 1px #dfdfdf;display: block;position: relative;font-size: 12px;cursor: pointer;
    &:after{content:"\e6e0";font-family: element-icons!important;color:#747474;height:30px;border-radius: 50%;position: absolute;top:50%;margin-top:-15px;right:0;line-height:30px;}
    &:last-child{
      border-bottom: none;
    }
  }
}
.history-box {
  .h-form {
    padding: 2px 16px 10px;

    .search-classify {
      background: #F4F4F4;
      line-height: 28px;
      height: 28px;
      padding: 0 8px;
      border-radius: 3px;

      > i, > span {
        vertical-align: middle;
        font-size: 13px;
        margin-top: 2px;
      }

      > span {
        margin: 0 2px 0 4px
      }

      .el-icon-close {
        cursor: pointer;
      }
    }

    ::v-deep .search-box {
      border: solid 1px #eee;
      padding: 5px;
      border-radius: 8px;
      display: flex;
      background: #FFF;

      .el-input {
        flex: 1;

        .el-input__inner {
          border: none;
        }
      }
    }

    .keys-box {
      margin-top: 10px;
      padding: 0 2px;

      span {
        display: inline-block;
        margin-right: 42px;
        font-size: 13px;
        color: #2A6494;
        cursor: pointer;
        border-bottom: solid 1px #F7F7F7;

        &:hover {
          border-bottom: solid 1px #2A6494
        }
      }
    }
  }

  .h-list {
    height: 520px;
    overflow: auto;
    padding: 2px 0;
    background-color: #FFF;

    .item {
      border-bottom: solid 1px #f2f2f2;
      position: relative;
      padding: 12px 16px;
      color: #323232;
      font-size: 13px;
      overflow: hidden;
      .onlieTalk-search-list{
        border: solid 1px #eee;padding:0 8px 6px;border-radius: 6px;margin: 10px 0 4px;background: #f7f7f7;overflow: hidden;
      }
      .name {
        color: #999;
        margin-bottom: 5px;
        font-size: 12px;
      }

      .time {
        position: absolute;
        right: 16px;
        top: 14px;
        font-size: 12px;
        color: #999;
      }
      ::v-deep .upload-box{margin:-10px 0 0 0 !important;border-top:none}
      &:hover {
        background: #f7f7f7;
      }

    }
  }

  .h-pic {
    height: 520px;
    overflow: auto;
    padding: 8px 14px;
    background-color: #FFF;

    .item {
      width: 133px;
      height: 133px;
      display: inline-block;
      vertical-align: middle;
      margin: 3px;

      .el-image {
        width: 100%;
        height: 100%;
      }

      &:hover .el-image {
        border: solid 1px #2A6494
      }
    }
  }

  .h-file {
    height: 520px;
    overflow: auto;
    padding: 8px 0;
    background-color: #FFF;

    .item {
      position: relative;
      padding: 8px 16px 0;
      color: #323232;
      font-size: 13px;
      display: flex;

      .img {
        width: 58px;
        height: 58px;

        .el-image {
          width: 100%;
          height: 100%;
        }
      }

      .txt {
        border-bottom: solid 1px #f2f2f2;
        flex: 1;
        display: flex;
        color: #999;
        font-size: 12px;
        padding: 0 0 6px;
        margin-left: 12px;

        p {
          margin: 0 0 8px;
        }

        .name {
          color: #323232;
          font-size: 13px;
        }

        .t-l {
          flex: 1
        }

        .t-r {
          font-size: 12px;
          text-align: right;

          .ico {
            display: inline-block;
            color: #2A6494;
            margin-left: 8px;
            font-size: 16px;
          }
        }
      }
    }
  }
}


.ico-online {
  background: url(~@/resources/images/ico-service.png) no-repeat center 19px #FFF;
  background-size: 40px;
  position: fixed;
  right: 28px;
  bottom: 28px;
  padding: 63px 10px 10px;
  border-radius: 50%;
  box-shadow: 0 0 24px rgb(34 80 118 / 24%);
  width: 100px;
  text-align: center;
  font-size: 12px;
  height: 100px;
  cursor: pointer;
  color: #225076;
  z-index: 9999;

  &.no:after {
    content: "新消息";
    position: absolute;
    right: -5px;
    top: 12px;
    height: 22px;
    background-color: #ff5c5c;
    border-radius: 16px;
    border: solid 3px #FFF;
    color: #FFF;
    line-height: 16px;
    font-size: 12px;
    padding: 0 5px;
  }
}

::v-deep .dialog-style.onlineCommunicate {
  margin-top: 28.5px !important;

  &.is-fullscreen {
    top: 0 !important;
    left: 0 !important;
    margin-top: 0 !important;

    .el-dialog__body .cont {
      height: calc(100vh - 42px);
    }
  }

  .el-dialog__header {
    background: #FAFAFA;
    border-bottom: solid 1px #E9E9E9;
    border-radius: 8px 8px 0 0;

    .el-dialog__title {
      &:before {
        content: "\e72e";
      }
    }
  }

  .el-dialog__body {
    padding: 0;

    .isFullIcon {
      position: absolute;
      top: 0;
      right: 69px;
      border: none !important;
      background: none !important;
      box-shadow: none !important;
      color: #464646d6;
      height: 42px;
      line-height: 42px;
      padding: 0;
    }

    .cont {
      display: flex;
      height: 620px;
      overflow: hidden;

      .online-left {
        flex: 1;

        #labBtn.transverse {
          margin: 0;
          width: 100%;
          border-bottom: solid 1px #e9e9e9;
          background: #f5f5f5;
          height: 10px;
          margin-bottom: -11px;
        }

        .chat-box {
          height: calc(100% - 257px);
          overflow: auto;
          padding: 4px 20px 0;
          font-size: 12px;

          .txt {
            text-align: center;
            color: #808080;
            padding: 10px 0;

            &:before, &:after {
              content: "";
              width: 70px;
              height: 1px;
              vertical-align: middle;
              background-color: #f7f7f7;
              display: inline-block
            }

            span {
              padding: 0 12px
            }
          }

          .time {
            text-align: center;
            color: #808080;
            margin-top: 15px;
          }

          .item {
            margin: 10px 0;
            font-size: 14px;

            .name {
              color: rgba(102, 102, 102, 0.6);
              margin-bottom: 4px;
            }

            .cont {
              display: inline-block;
              border-radius: 6px;
              padding: 8px 12px;
              position: relative;
              height: auto;
              overflow: visible;
              min-height: 32.8px;

              .upload-box {
                margin: -5px 0;
                text-align: left;
                border-top: 0;
              }

              &:after {
                content: "";
                position: absolute;
                width: 13px;
                top: 10px;
                height: 12px;
              }

              &.nobg {
                background: #FFF !important;
                padding: 0;

                &:after {
                  display: none;
                }

                .el-upload-list__item {
                  margin-right: 0;
                }
              }
            }

            &.right {
              text-align: right;
              font-size: 14px;

              .cont {
                background-color: #D8E8F9;

                &:after {
                  right: -10px;
                  background: radial-gradient(180% 182% at right -71% top -72%, transparent 99%, #d8e8f9);
                  transform: rotate(67deg)
                }
              }
            }

            &.left {
              text-align: left;

              .cont {
                background-color: #F2F2F2;

                &:after {
                  left: -10px;
                  background: radial-gradient(180% 182% at left -71% top -72%, transparent 99%, #F2F2F2);
                  transform: rotate(282deg)
                }
              }
            }
          }
        }

        .chat-oper {
          border-top: solid 1px #e9e9e9;
          position: relative;
          height: 257px;
          padding: 10px 12px;
          display: flex;
          flex-direction: column;

          .pop-inputTips {
            position: absolute;
            background: #FFF;
            left: 10px;
            border: solid 1px #eee;
            overflow: auto;
            height: 160px;
            width: 400px;
            font-size: 13px;
            bottom: 100%;
            margin-bottom: -22px;
            z-index: 22;
            box-shadow: 0 0 14px rgb(0 0 0 / 11%);
            padding: 2px 0;

            p {
              padding: 10px 16px;
              margin: 0;
              cursor: pointer;

              &:hover {
                background: #f7f7f7
              }

              span {
                color: $red
              }
            }
          }

          .btns {
            background-color: #FAFAFA;
            height: 36px;
            line-height: 36px;

            .btn {
              font-size: 18px;
              color: #B9B9B9;
              outline: none;
              box-shadow: none;
            }
          }

          .txt-textarea {
            flex: 1;
            padding-top: 20px;

            .el-textarea__inner {
              border: none;
              height: 100%;
              border-radius: 0 0 0 8px;
              background: #FFF;
              resize: none;
              padding: 0;
            }
          }

          .online-upload {
            border-top: dashed 1px #E9E9E9;
            overflow-x: auto;
            overflow-y: hidden;
            width: 778px;

            .el-upload-list {
              white-space: nowrap;

              .el-upload-list__item {
                width: 238px;
                height: 74px;
                padding-left: 60px;
                display: inline-block;

                .el-upload-list__item-thumbnail {
                  width: 72px;
                  height: 72px;
                  padding: 6px;
                  margin-left: -60px;
                  border-radius: 6px;
                }

                .txt-box {
                  width: 150px;
                  height: 33px;
                  overflow: hidden;
                  margin-top: 5px;
                  margin-left: -5px;
                  margin-bottom: 2px;

                  .tb-left {
                    float: left;
                    height: 36px;
                    width: 1px;
                  }

                  .tb-mid {
                    float: right;
                    word-break: break-all;
                    width: 145px;

                    .txt {
                      font-size: 12px;
                      line-height: 1.2;
                      margin-top: 3px;
                      display: table-cell;
                      width: 135px;
                      height: 36px;
                      white-space: break-spaces;

                      .name {
                        word-break: break-all;
                      }

                      span {
                        vertical-align: middle;
                        display: inline;
                      }

                      i {
                        position: inherit;
                        top: inherit;
                        left: inherit;
                        display: inline-block;
                        font-size: 12px;
                        line-height: 20px;
                        height: 20px;
                        color: #2a6494;
                        margin-left: 6px;
                      }
                    }
                  }

                  .format {
                    float: right;
                    position: relative;
                    background-color: #FFF;
                    font-size: 12px;
                    padding: 0 2px 0 6px;
                    line-height: 1;
                    width: 22px;
                    height: 18px;
                    top: -20px;
                    left: 136px;
                    margin-left: -17px;
                    text-align: right;

                    i {
                      display: block;
                      font-size: 12px;
                      color: $baseColor;
                      position: inherit;
                    }
                  }
                }

                .el-input {
                  width: 107px !important;

                  .el-input__inner {
                    height: 24px !important;
                    line-height: 24px;
                  }

                  + span {
                    margin-left: 5px;
                    vertical-align: middle;
                  }
                }

                p {
                  line-height: 1.2;

                  &.input {
                    margin-top: 5px;
                    margin-bottom: 5px;
                  }

                  .f-red {
                    color: #ff2626
                  }

                }

                .el-progress {
                  position: absolute;
                  left: -3px;
                  bottom: -3px;
                  right: -3px;
                  margin: 0;
                  top: inherit;
                  z-index: 2;
                  width: auto;

                  .el-progress__text {
                    display: none
                  }
                }
              }
            }
          }

          .fl {
            .button-sty .el-icon-time {
              margin-bottom: 2px;
              margin-right: 2px;
            }
          }

          .fr {
            .t {
              vertical-align: middle;
              line-height: 28px;
              color: #808080
            }

            .button-sty {
              margin-left: 15px;
            }
          }
        }
      }

      .online-user {
        width: 248px;
        border-left: solid 1px #e9e9e9;

        .u-oper {
          padding: 16px 18px 6px;
          display: flex;

          .search-input {
            flex: 1;
            height: 28px;

            .el-input__inner {
              padding: 0 8px 0 26px;
            }

            &:before {
              content: "\e778";
              font-family: element-icons !important;
              position: absolute;
              height: 28px;
              line-height: 28px;
              left: 8px;
              color: #C0C4CC;
              font-size: 13px;
            }
          }

          .button-sty {
            min-width: auto;
            flex: 1;

            .iconfont {
              font-size: 12px;
              margin-right: 6px;
            }

          }

          .checkbox-box {
            margin-bottom: 0;
            margin-right: 46px;
            line-height: 28px;
          }
        }

        .u-list {
          height: calc(100% - 80px);
          overflow: auto;
          padding: 10px 18px 0;

          .item {
            border: solid 1px #EEEEEE;
            border-radius: 12px;
            padding: 10px 36px 10px 20px;
            margin-bottom: 8px;
            position: relative;

            p {
              margin-bottom: 0;
              color: #C0C4CC;
              font-size: 12px;

              &.name {
                line-height: 18px;
                position: relative;

                &:before {
                  content: "";
                  width: 5px;
                  height: 5px;
                  border-radius: 50%;
                  position: absolute;
                  left: -10px;
                  top: 50%;
                  margin-top: -2.5px;
                  background: #C0C4CC;
                }

                b {
                  color: #333;
                  vertical-align: middle;
                  font-weight: 400;
                  margin-right: 4px;
                }

                span {
                  vertical-align: middle;
                  display: inline-block;
                }

                i {
                  vertical-align: middle;
                  position: absolute;
                  right: -29px;
                  top: 50%;
                  margin-top: -9px;
                  font-size: 28px;
                }
              }
            }

            .close {
              position: absolute;
              right: -7px;
              top: -7px;
              background: #FFF;
              border-radius: 50%;
              color: #999999;
              opacity: 1;
              font-size: 18px;
              display: none;
            }

            &:hover .close {
              display: block;
            }

            &.on {
              background-color: transparentize($baseColor, 0.92);
              border-color: $baseColor;

              p.name:before {
                background-color: $baseColor;
              }
            }

            &.noRead {
              p.name:before {
                background-color: $red;
              }

              .icon-weidu {
                color: $red;
                display: block;
              }
            }
          }
        }
      }
    }
  }
}
</style>
