<template>
  <div class="customer">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card v-loading="infoLoading">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold;padding-right: 20px;">今日实时数据</span>
            <el-button size="mini" type="primary" @click="getData">刷新</el-button>
          </div>
          <div>
            <el-breadcrumb style="padding-bottom: 30px;">
              <el-breadcrumb-item class="hand" @click.native="customerNum('录音', 2)">
                通次：<span>{{infoData.phone_counts}}</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item>通时：{{infoData.phone_total_time}}min</el-breadcrumb-item>
              <el-breadcrumb-item>聊天次数：{{infoData.chat_counts}}</el-breadcrumb-item>
              <el-breadcrumb-item>沟通人数：{{infoData.chat_contact_count}}</el-breadcrumb-item>

            </el-breadcrumb>
            <el-breadcrumb>
              <el-breadcrumb-item class="hand" @click.native="customerNum('查看聊天记录', 1)">
                有效沟通：<span>{{infoData.valid_chat_contact_count}}</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item class="hand"  @click.native="customerNum('全部好友', 3)">总好友：<span>{{infoData.wechat_friend_total}}</span></el-breadcrumb-item>
              <el-breadcrumb-item class="hand"  @click.native="customerNum('添加好友', 4)">添加好友：<span>{{infoData.add_friend}}</span></el-breadcrumb-item>
              <!--<el-breadcrumb-item class="hand"  @click.native="customerNum('待添加', 5)">待添加好友：<span>{{infoData.wait_add_friend}}</span></el-breadcrumb-item>-->
              <!--<el-breadcrumb-item>好友处理率：{{ infoData.wait_add_friend ? parseInt(strip(infoData.add_friend*100/infoData.wait_add_friend)) + '%' : '-' }}</el-breadcrumb-item>-->
            </el-breadcrumb>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog append-to-body :visible.sync="dialogTableVisible" width="90%" top="5vh" :title="dialogTitle">
      <div class="block">
        <el-date-picker @change="getSTime" v-model="realTime" type="date" placeholder="选择日期"></el-date-picker>
      </div>

      <table class="custom-table" v-show="infoShow != 3"  v-loading="infoLoadingDialog">
        <thead>
        <tr>
          <th v-for="th in table.th">{{ th }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-if="table.td1.length != 0">
          <td v-for="td in table.td1">{{ td }}</td>
        </tr>
        <tr v-if="table.td2.length != 0">
          <td v-for="td in table.td2">{{ td }}</td>
        </tr>
        <tr v-if="table.td3.length != 0">
          <td v-for="td in table.td3">{{ td }}</td>
        </tr>
        </tbody>
      </table>

      <table class="custom-table" v-loading="infoLoadingDialog" style="margin-top: 50px;" v-show="phoneRecordList.pageData.length != 0">
        <thead>
        <tr>
          <th v-for="item in phoneRecordList.headerTh" :key="item.id">{{ item }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in phoneRecordList.pageData" :key="item.id" style="text-align: center">
          <template v-if="infoShow == 2">
            <td>{{ index + 1 }}</td>
            <td>{{ customerObj.name }}</td>
            <td>{{ item.contact_name }}</td>
            <td>{{ item.contact_phone }}</td>
            <td>{{ item.start_time }}</td>
            <td>{{ (item.duration / 60) % 1 === 0 ? item.duration / 60: (item.duration / 60).toFixed(2) }}min</td>
            <td>{{ item.visit_desc }}</td>
            <td>{{ item.next_visit_at }}</td>
            <td>
              <audio style="display: none;" controls="controls" class="sourceFile-audio" :id="'sourceFile'+item.id">
                <source :src="item.source_file" type="audio/mp3">
              </audio>
              <el-button size="mini" type="primary" @click="sourceFileClick('sourceFile' + item.id, index)" round>{{ infoText }}</el-button>
            </td>
          </template>

          <template v-if="infoShow == 1">
            <td>{{ index + 1 }}</td>
            <td>{{ customerObj.name }}</td>
            <td>{{ item.friend_uid }}</td>
            <td>{{ item.nick }}</td>
            <td>{{ item.chat_count }}</td>
            <td>{{ item.visit_desc }}</td>
            <td>{{ item.next_visit_at }}</td>
            <td @click="dialogTableClick(item.friend_id)">
              <el-button size="mini" type="primary" round>{{ infoText }}</el-button>
            </td>
          </template>

          <template v-if="infoShow == 3">
            <td >
              <img style="width: 40px; height: 40px;" :src="item.headimg" alt="">
            </td>
            <td>{{ item.nick }}</td>
            <td>{{ item.friend_uid }}</td>
            <td>{{ item.mobile }}</td>
            <td>{{ item.create_time }}</td>
            <td>{{ item.last_login_at }}</td>
            <td>{{ item.visit_intention == 1 ? '低意向' : item.visit_intention == 2 ? '中意向' : item.visit_intention == 3 ? '高意向' : '不跟踪' }}</td>
            <td>{{ item.last_contact }}</td>
            <td>{{ item.next_visit_at }}</td>
          </template>

          <template v-if="infoShow == 4">
            <td >{{ customerObj.name }}</td>
            <td>{{ item.friend_uid }}</td>
            <td>{{ item.friend_nickname }}</td>
            <td>{{ item.mobile }}</td>
            <td>{{ item.allow_time }}</td>
            <td>{{ item.add_time_long }}min</td>
          </template>
        </tr>
        </tbody>
      </table>

       <page v-show="phoneRecordList.pageData.length != 0" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    </el-dialog>

    <el-dialog append-to-body :visible.sync="dialogTable">
      <div style="height: 500px; overflow: auto;" class="liaotian-content">
        <div class="real-time">{{ realTime }}</div>
        <div class="chat-record" v-for="item in chatrecord" :key="item.id">
          <div class="le">
            <div class="le-content" v-if="item.author == 'left'">
              <div class="le-content-image">
                <img :src="item.headimg" alt="">
              </div>
              <div class="le-content-box">
                <div class="le-content-box-title">{{ item.nick }} {{ item.gmt_create }}</div>
                <!-- 聊天内容 -->
                <div class="chat-record-content" v-if="item.image_type == 1000" v-html="item.sentence"></div>
                <!-- 聊天图片 -->
                <div class="chat-record-content-image" v-if="item.image_type == 3">
                  <img :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" alt="">
                </div>
                <!-- 聊天语音 -->
                <div class="chat-record-content-audio" v-if="item.image_type == 34">
                  <audio controls="controls" width="260px" height="40px" class="le-content-audio" @play="audioClick('sourceFile'+item.id)" :id="'sourceFile'+item.id" :data-id="'sourceFile'+item.id">
                    <source :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" type="audio/mp3">
                  </audio>
                </div>
                <!-- 分享名片 -->
                <div class="share-business-card" v-if="item.image_type == 42">
                  <div class="share-business-card-image">
                    <div class="share-business-card-image-avtive">
                      <img :src="item.sentence.small_headimg" alt="">
                    </div>
                    <div class="share-business-card-name">{{ item.sentence.nickname }}</div>
                  </div>
                  <div class="card">
                    个人名片
                  </div>
                </div>
                <!-- 发送视频 -->
                <div class="video-news" style="width: 65%;" v-if="item.image_type == 42"> <!--  v-if="item.image_type == 42" -->
                  <video class="my-video" @play="videoClick('sourceFile'+item.id)" :data-id="'sourceFile'+item.id" :src="item.sentence.video_url" :poster="item.sentence.img_url" style="width: 100%;outline: none" controls="controls"></video>
                </div>
                <!-- 聊天动态图 -->
                <div class="chat-record-content" style="width: 20%" v-if="item.image_type == 47">
                  <img width="100%" :src="item.sentence" alt="">
                </div>
                <!-- 分享内容 -->
                <div class="share-kuang" v-if="item.image_type === 49">
                  <div class="title">
                    {{ item.sentence.des }}
                  </div>
                  <div class="share-kuang-content">
                    <div class="kuang-content">
                      {{ item.sentence.title }}
                    </div>
                    <div class="kuang-image">
                      <img :src="item.sentence.img_url" width="100%" height="100%" alt="">
                    </div>
                  </div>
                </div>
                <!-- 红包 -->
                <div class="red-envelopes" v-if="item.image_type == 436207665 || item.image_type == 419430449" >
                  <div class="red-envelopes-content">
                    <div class="red-envelopes-content-image">
                      <img v-if="item.image_type == 436207665" src="https://wx.gtimg.com/hongbao/1800/hb.png" alt="">
                      <img v-if="item.image_type == 419430449" src="../../assets/gou.png" alt="">
                    </div>
                    <div class="red-envelopes-content-gongxi">
                      {{ item.sentence.des }}
                    </div>
                  </div>
                  <div class="title">{{ item.sentence.title }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="ri" v-show="item.author == 'right'">
            <div class="ri-content">
              <div class="le-content-image">
                <img :src="item.headimg" alt="">
              </div>
              <div class="le-content-box">
                <div class="le-content-box-title">{{ item.gmt_create }} {{ item.nick }}</div>
                <!-- 聊天内容 -->
                <div class="chat-record-content" v-if="item.image_type == 1000">{{ item.sentence }}</div>
                <!-- 聊天图片 -->
                <div class="chat-record-content-image" v-if="item.image_type == 3">
                  <img :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" alt="">
                </div>
                <!-- 聊天语音 -->
                <div class="chat-record-content-audio" v-if="item.image_type == 34" >
                  <audio controls="controls" width="260px" height="40px" class="le-content-audio" @play="audioClick('sourceFile'+item.id)" :id="'sourceFile'+item.id" :data-id="'sourceFile'+item.id">
                    <source :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" type="audio/mp3">
                  </audio>
                </div>
                <!-- 分享名片 -->
                <div class="share-business-card" v-if="item.image_type == 42">
                  <div class="share-business-card-image">
                    <div class="share-business-card-image-avtive">
                      <img :src="item.sentence.small_headimg" alt="">
                    </div>
                    <div class="share-business-card-name">{{ item.sentence.nickname }}</div>
                  </div>
                  <div class="card">
                    个人名片
                  </div>
                </div>
                <!-- 发送视频 -->
                <div class="video-news" style="width: 65%; float:right;" v-if="item.image_type == 43">
                  <video class="my-video" @play="videoClick('sourceFile'+item.id)" :data-id="'sourceFile'+item.id" :src="item.sentence.video_url" :poster="item.sentence.img_url" style="width: 100%;outline: none" controls="controls"></video>
                </div>
                <!-- 聊天动态图 -->
                <div class="chat-record-content" style="width: 20%" v-if="item.image_type == 47">
                  <img width="100%" :src="item.sentence" alt="">
                </div>
                <!-- 分享内容 -->
                <div class="share-kuang" v-if="item.image_type === 49">
                  <div class="title">
                    {{ item.sentence.des }}
                  </div>
                  <div class="share-kuang-content">
                    <div class="kuang-content">
                      {{ item.sentence.title }}
                    </div>
                    <div class="kuang-image">
                      <img :src="item.sentence.img_url" width="100%" height="100%" alt="">
                    </div>
                  </div>
                </div>
                <!-- 红包 -->
                <div class="red-envelopes" v-if="item.image_type == 436207665 || item.image_type == 419430449" >
                  <div class="red-envelopes-content">
                    <div class="red-envelopes-content-image">
                      <img v-if="item.image_type == 436207665" src="https://wx.gtimg.com/hongbao/1800/hb.png" alt="">
                      <img v-if="item.image_type == 419430449" src="../../assets/gou.png" alt="">
                    </div>
                    <div class="red-envelopes-content-gongxi">
                      {{ item.sentence.des }}
                    </div>
                  </div>
                  <div class="title">{{ item.sentence.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import task1 from './task1'
  import { getRealTimeDataApi, getPhoneRecordApi, getValidchatApi, getAddfriendlistApi, getFriendlistApi, getChatrecordApi, task1Api } from "../../service/api";
  import page from '../framework/page'
  import Util from '../../util/Za'
  import addEmoji from '../../util/wechatEmoji'

  export default {
    name: "customer",
    props: {
      customerObj: {
        type: Object,
        default () {
          return {}
        }
      },
    },
    components: {
      page, task1
    },
    data() {
      return {
        customerO: this.customerObj.alias ? this.customerObj : JSON.parse(window.localStorage.phoneNum),
        total: 0,
        limit: 10,
        pageIndex: 1,
        chatrecord: [],
        infoData: {
          add_friend: '',
          chat_contact_count: '',
          chat_counts: '',
          phone_counts: '',
          phone_total_time: '',
          valid_chat_contact_count: '',
          wait_add_friend: '',
          wechat_friend_total: '',
        },
        infoLoading: true,
        infoLoadingDialog: true,
        table: {
          th: [],
          td1: [],
          td2: [],
          td3: [],
        },
        phoneRecordList: {
          headerTh: [],
          pageData: []
        },
        dialogTitle: '',
        dialogTableVisible: false,
        dialogTable: false,
        infoText: '',
        infoShow: '',
        realTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      strip(num) {
        return +parseFloat(num.toPrecision(12));
      },
      getData() {
        if (this.customerO.alias) {
          this.infoLoading = true;
          getRealTimeDataApi(this.customerO.alias).then(res => {
            this.infoData = res;
            this.infoLoading = false;
          })
        }
      },
      /**
       * 时间获取value
       */
      getSTime(val) {
        if(Util.isEmpty(val)) val = new Date()
        this.realTime = val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate()
        this.infoLoadingDialog = true;
        let data = { page: this.pageIndex, start_at: this.realTime, limit: this.limit }
        if (this.infoShow === 2) {
          // 通次
          this.infoPhonerecord(getPhoneRecordApi, data, this.infoShow)
        }else if(this.infoShow === 1) {
          // 有效沟通
          this.infoPhonerecord(getValidchatApi, data, this.infoShow)
        }else if(this.infoShow === 3){
          // 全部好友
          data = Object.assign({}, data, { limit: 10 })
          this.infoPhonerecord(getFriendlistApi, data, this.infoShow)
        }else if(this.infoShow === 4) {
          // 添加好友
          this.infoPhonerecord(getAddfriendlistApi, data, this.infoShow)
        }
      },
      /**
       * 聊天记录
       */
      dialogTableClick(friendId) {
        getChatrecordApi(friendId, { start_at: this.realTime }).then(res => {
          if(res.length > 0) {
            this.dialogTable = true
            res.map(item => {
              if(!Util.isJSON(item.sentence) && String(item.image_type).toUpperCase() === 'NULL') {
                item.image_type = 1000
              }
            })
            this.chatrecord = res
          }else {
            this.$message.error('没有聊天记录');
          }
        })
      },
      /**
       * 音频点击
       */
      audioClick(id) {
        var leContentAudio = document.querySelectorAll('.le-content-audio');
        for(var i = 0; i < leContentAudio.length; i++) {
          let dataId = leContentAudio[i].getAttribute('data-id')
          if(dataId === id) {
            leContentAudio[i].play();
          }else {
            leContentAudio[i].pause();
          }
        }
      },
      /**
       * 视频点击
       */
      videoClick(id) {
        var myVideo = document.querySelectorAll('.my-video');
        for(var i = 0; i < myVideo.length; i++) {
          let dataId = myVideo[i].getAttribute('data-id');
          if(dataId == id) {
            myVideo[i].play();
          }else {
            myVideo[i].pause();
          }
        }
      },
      /**
       * 客户管理详情
       * @param infoText
       * @param infoShow
       */
      customerNum(infoText, infoShow) {
        this.infoLoadingDialog = true;
        this.infoText = infoText;
        this.infoShow = infoShow;
        let data = { page: 1, start_at: this.realTime }
        if (infoShow === 2) {
          // 通次
          this.infoPhonerecord(getPhoneRecordApi, data, infoShow)
        }else if(infoShow === 1) {
          // 有效沟通
          this.infoPhonerecord(getValidchatApi, data, infoShow)
        }else if(infoShow === 3){
          // 全部好友
          data = Object.assign({}, data, { limit: 10 })
          this.infoPhonerecord(getFriendlistApi, data, infoShow)
        }else if(infoShow === 4) {
          // 添加好友
          this.infoPhonerecord(getAddfriendlistApi, data, infoShow)
        }
//        else {
//          // 待添加好友
//          task1Api(this.customerObj.id).then(res => {
//            this.$refs.mychild.showTask1Detail(res[0]);
//          });
//        }
      },
      /**
       * 客户管理详情 -> customerNum
       * @param api   {Function}
       * @param data  {Object}
       * @param infoShow {Number}
       */
      infoPhonerecord(api, data, infoShow) {

        api(this.customerO.alias, data).then(res=>{
          console.log(res)
          if(Util.isEmpty(res)){
            this.dialogTableVisible = false;
            this.$message.error('暂无数据');
            return
          }
          this.infoLoadingDialog = false;
          this.dialogTableVisible = true;
          let friendTotal = infoShow === 3 ? ' 全部好友：' + res.friend_total : ''

          this.dialogTitle = '老师名：' + this.customerO.name + '　销售顾问：' + this.customerO.adviser + friendTotal;
          // 下面列表

          if(infoShow === 2) {
            this.phoneRecordList.headerTh = ['序号', '老师', '客户名称', '电话号码', '呼出时间', '通话时长', '最后一次备注', '下次回访', '操作']
            this.phoneRecordList.pageData = res.phone_record_list.page_data
            this.total = res.phone_record_list.total
          }else if(infoShow === 1){
            this.phoneRecordList.headerTh = ['序号', '老师', 'UID', '客户微信昵称', '聊天条数', '备注信息', '下次回访', '操作']
            this.phoneRecordList.pageData = res.chat_friend_list.page_data
            this.total = res.chat_friend_list.total
          }else if(infoShow === 3){
            this.phoneRecordList.headerTh = ['用户头像', '用户昵称', 'UID', '电话号码', '添加时间', '用户属性', '意向度', '最后沟通', '下次回访']
            this.phoneRecordList.pageData = res.friend_list
            this.total = res.friend_total
          }else if(infoShow === 4) {
            this.phoneRecordList.headerTh = ['老师', 'UID', '客户微信昵称', '电话号码', '添加时间', '添加间隔']
            this.phoneRecordList.pageData = res.add_friend_list.page_data
            this.total = res.add_friend_list.total
          }

          // 上面列表
          if(infoShow === 2 || infoShow === 1) {
            res.time.unshift(' ');
            res.time.push('合计');
            this.table.th = res.time;
            // table 第一行
            let chatCount = infoShow === 2 ? res.min_count : infoShow === 1 ? res.chat_count : '',
                minCountTotal = infoShow === 2 ? res.min_count_total : ''
            chatCount.unshift(this.customerO.name + '(总)');
            this.table.td1 = chatCount;

            // table 第二行
            let chatCountTwo = infoShow === 2 ? res.one_min : infoShow === 1 ? res.chat_count10 : '',
                strZiDuan = infoShow === 2 ? '1分钟+' : infoShow === 1 ? '10条+' : '',
                minCountTotalOne = infoShow === 2 ? res.one_min_total : ''
            chatCountTwo.unshift(strZiDuan);
              this.table.td2 = chatCountTwo;

            // table 第三行
            let chatCountThree = infoShow === 2 ? res.three_min : infoShow === 1 ? res.chat_count20 : '',
                minCountTotalThree = infoShow === 2 ? res.three_min_total : ''
                chatCountThree.unshift(infoShow === 2 ? '3分钟+' : infoShow === 1 ? '20条+' : '')
              this.table.td3 = chatCountThree;

            if(infoShow === 2) {
              chatCount.push(minCountTotal)
              chatCountTwo.push(minCountTotalOne);
              chatCountThree.push(minCountTotalThree);
            }
          }else if(infoShow === 4){
            res.time.unshift(' ');
            res.time.push('合计');
            this.table.th = res.time;
            let chatCount = res.count
            chatCount.unshift(this.customerO.name + '(总)');
            chatCount.push(res.count_total);
            this.table.td1 = chatCount;
            this.table.td2 = []
            this.table.td3 = []
          }
        })
      },
      /**
       * 分页第几页
       * @param val
       */
      onPageChange(val) {
        this.pageIndex = val
        let data = { page: val, limit: this.limit, start_at: this.realTime }
        this.infoLoadingDialog = true
        if (this.infoShow === 2) {
          // 通次
          this.infoPhonerecord(getPhoneRecordApi, data, this.infoShow)
        }else if(this.infoShow === 1) {
          // 有效沟通
          this.infoPhonerecord(getValidchatApi, data, this.infoShow)
        }else if(this.infoShow === 3){
          // 全部好友
          data = Object.assign({}, data, { limit: 10 })
          this.infoPhonerecord(getFriendlistApi, data, this.infoShow)
        }else if(this.infoShow === 4) {
          // 添加好友
          this.infoPhonerecord(getAddfriendlistApi, data, this.infoShow)
        }
      },
      /**
       * 分页多少条
       * @param val
       */
      onSizeChange(val) {
        this.limit = val
        this.infoLoadingDialog = true
        let data = { page: 1, limit: val, start_at: this.realTime }
        if (this.infoShow === 2) {
          // 通次
          this.infoPhonerecord(getPhoneRecordApi, data, this.infoShow)
        }else if(this.infoShow === 1) {
          // 有效沟通
          this.infoPhonerecord(getValidchatApi, data, this.infoShow)
        }else if(this.infoShow === 3){
          // 全部好友
          data = Object.assign({}, data, { limit: 10 })
          this.infoPhonerecord(getFriendlistApi, data, this.infoShow)
        }else if(this.infoShow === 4) {
          // 添加好友
          this.infoPhonerecord(getAddfriendlistApi, data, this.infoShow)
        }
      },
      chatRecord() {
        this.dialogTable = true
      },
      /**
       * 播放录音
       * id
       */
      sourceFileClick(id, index) {
        var sourceFileAudio = document.querySelectorAll('.sourceFile-audio');
        for(var i = 0; i < sourceFileAudio.length; i++) {
          if(index === i) {
            sourceFileAudio[i].play()
          }else {
            sourceFileAudio[i].pause();
          }
        }
      },
      /**
       * 改变图片header颜色
       * @param row
       * @param rowIndex
       * @returns {string}
       */
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'warning-row';
        }
        return ''
      },
    }
  }
</script>

<style lang="less">
  .custom-table {
    margin-top: 20px;
    width: 100%;
    border: solid 1px #EBEEF5;
    border-spacing: 0;
    border-collapse: collapse;
    thead {
      color: #909399;
      font-weight: 500;
      th {
        padding: 12px 10px;
        border: 1px solid #EBEEF5;
      }
    }
    tbody {
      td {
        padding: 12px 10px;
        border: 1px solid #EBEEF5;
      }
    }
  }

  .el-breadcrumb__item.hand {
    cursor: pointer;
    display: inline-block;
    &:hover {
      .el-breadcrumb__inner {
        span {
          color: #409EFF;
        }
      }
    }
    .el-breadcrumb__inner {
      cursor: pointer !important;
      span {
        text-decoration: underline;
      }
    }
  }

  .el-table .warning-row {
    background: rgb(228, 239, 247);
    text-align: center;
  }

  .liaotian-content::-webkit-scrollbar {
    display: none;
  }

  .real-time {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }

  .chat-record {
    width: 100%;
    overflow: hidden;
    .le {
      text-align: left;
      /* 右边的样式 */

      .le-content {
        width: 100%;
        padding-top: 40px;
        .le-content-image {
          width: 30px;
          height: 30px;
          float: left;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .chat-record-content-image {
          width: 40%;
          float: left;
          img {
            width: 100%;
          }
        }

        .share-business-card {
          width: 30%;
          height: 100px;
          background: #EDEDED;
          float: left;
          padding: 0 10px;
          box-sizing: border-box;
          .share-business-card-image {
            width: 100%;
            height: 70px;
            padding-top: 15px;
            box-sizing: border-box;
            border-bottom: 1px solid #B8B8B8;
            .share-business-card-image-avtive {
              width: 40px;
              height: 40px;
              background: green;
              display: inline-block;
              vertical-align: middle;
            }
            .share-business-card-name {
              padding-left: 5px;
              display: inline-block;
              vertical-align: middle;
              font-size: 14px;
              font-weight: 600;
            }
          }
          .card {
            font-size: 13px;
            color: #A1A1A1;
            line-height: 30px;
          }
        }

        .red-envelopes {
          width: 200px;
          height: 75px;
          border-radius: 5px;
          float: left;
          box-sizing: border-box;
          background: #F7F7F7;
          .title {
            font-size: 10px;
            color: #999;
            line-height: 20px;
            padding-left: 10px;
            text-align: left;
          }
          .red-envelopes-content {
            width: 100%;
            height: 55px;
            background: #ff9f4b;
            padding: 0 10px;
            box-sizing: border-box;
            padding-top: 8px;
            border-radius: 5px 5px 0 0;
            .red-envelopes-content-image {
              width: 40px;
              height: 40px;
              display: inline-block;
              vertical-align: middle;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .red-envelopes-content-gongxi {
              width: calc(100% - 45px);
              display: inline-block;
              font-size: 13px;
              vertical-align: middle;
              color: #ffffff;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;

            }
          }
        }

        .le-content-box {
          float: left;
          width: calc(100% - 40px);
          padding-left: 10px;

          .le-content-box-title {
            font-size: 12px;
            color: #999;
            padding-bottom: 20px;
          }
          .chat-record-content {
            width: 75%;
            float: left;
            padding-top: 3px;
          }
          .share-kuang {
            width: 45%;
            height: 120px;
            background: #EDEDED;
            float: left;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            .title {
              width: 100%;
              font-size: 13px;
              color: #000;
            }
            .share-kuang-content {
              width: 100%;
              overflow: hidden;
              .kuang-content {
                float: left;
                width: calc(100% - 40px);
                font-size: 10px;
                color: #8B8682;
              }
              .kuang-image {
                float: left;
                width: 40px;
                height: 40px;
                background: red;
              }
            }
          }
        }
      }
    }

    .ri {
      text-align: right;
      .ri-content {
        width: 100%;
        padding-top: 40px;
        .le-content-image {
          width: 30px;
          height: 30px;
          float: right;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .chat-record-content-image {
          width: 40%;
          float: right;
          img {
            width: 100%;
          }
        }

        .share-business-card {
          width: 30%;
          height: 100px;
          background: #EDEDED;
          float: left;
          padding: 0 10px;
          box-sizing: border-box;
          .share-business-card-image {
            width: 100%;
            height: 70px;
            padding-top: 15px;
            box-sizing: border-box;
            border-bottom: 1px solid #B8B8B8;
            .share-business-card-image-avtive {
              width: 40px;
              height: 40px;
              background: green;
              display: inline-block;
              vertical-align: middle;
            }
            .share-business-card-name {
              padding-left: 5px;
              display: inline-block;
              vertical-align: middle;
              font-size: 14px;
              font-weight: 600;
            }
          }
          .card {
            font-size: 13px;
            color: #A1A1A1;
            line-height: 30px;
          }
        }

        .red-envelopes {
          width: 200px;
          height: 75px;
          border-radius: 5px;
          float: right;
          box-sizing: border-box;
          background: #F7F7F7;
          .title {
            font-size: 10px;
            color: #999;
            line-height: 20px;
            padding-left: 10px;
            text-align: left;
          }
          .red-envelopes-content {
            width: 100%;
            height: 55px;
            background: #ff9f4b;
            padding: 0 10px;
            box-sizing: border-box;
            padding-top: 8px;
            border-radius: 5px 5px 0 0;
            .red-envelopes-content-image {
              width: 40px;
              height: 40px;
              display: inline-block;
              vertical-align: middle;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .red-envelopes-content-gongxi {
              width: calc(100% - 45px);
              display: inline-block;
              font-size: 13px;
              vertical-align: middle;
              color: #ffffff;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;

            }
          }
        }

        .le-content-box {
          float: right;
          width: calc(100% - 40px);
          padding-right: 10px;
          .le-content-box-title {
            font-size: 12px;
            color: #999;
            padding-bottom: 20px;
          }
          .chat-record-content {
             width: 75%;
              float: right;
            padding-top: 3px;
           }
          .share-kuang {
            width: 45%;
            height: 120px;
            background: #EDEDED;
            float: right;
            padding: 10px;
            box-sizing: border-box;
            text-align: left;
            border-radius: 5px;
            .title {
              width: 100%;
              font-size: 13px;
              color: #000;
            }
            .share-kuang-content {
              width: 100%;
              overflow: hidden;
              .kuang-content {
                float: left;
                width: calc(100% - 40px);
                font-size: 10px;
                color: #8B8682;
              }
              .kuang-image {
                float: left;
                width: 40px;
                height: 40px;
              }
            }
          }
        }
      }
    }
  }
</style>
