<template>
  <div class="box-center"  style="cursor:pointer;">
    <div class="biaotibox">
      <div>客户接待详情</div>
      <div><i @click="gojianyi()" class="el-icon-close"></i></div>
    </div>
    <div class="topbox">
      <div class="topzuo">
          <div class="title" style="display: flex;">
            <div style="flex:1;">
              <span class="span1">{{userinformationlist.visitRecord==1?'首':userinformationlist.visitRecord || ''}}次到访</span>
              <span class="span2">
                {{yibiaoji||''}}&nbsp;&nbsp;{{userinformationlist.validInvalidName||''}}
              </span>
            </div>
            <div style="width: 120px;display: flex;color:#2671E2;">
                <div v-if="rec_index_addJ" @click="Addtodigest()">加精</div>
                <div v-if="rec_index_receflag" style="margin-left: 20px;" @click="alllogo()">{{userinformationlist.validInvalidName}}</div>
            </div>
          </div>
          <div class="title" style="margin-top: 6px;">
            <span class="span3">{{userinformationlist.name || ''}}</span>
            <span class="span2">{{userinformationlist.createTime|| ''}}</span>
          </div>
          <div style="display: flex;width: 100%;">
            <div class="aplayer" id="aplayer"></div>
            <div style="margin-left: -5px; margin-top: 21px;" @click="download()">
              <img style="width:12px;height:12px;"
                src="/img/xiaza1.png" alt="">
            </div>
				</div>
        <div class="aplayerSpeed">
					<div style="display: flex; justify-content: space-around; width: 130px;">
						<div @click="aplayerChange('del')" style="cursor:pointer">上一首</div>
						<div style="cursor:pointer">{{(aplayerId/1+1)+'/'+aplayerLength}}</div>
						<div @click="aplayerChange('add')" style="cursor:pointer">下一首</div>
					</div>
					<div  @click="aplayerSpeed(0.5)" :class="aplayerSpeedNum==0.5?'aplayerSpeedFont':''" style="cursor:pointer">0.5x</div>
					<div  @click="aplayerSpeed(1)" :class="aplayerSpeedNum==1?'aplayerSpeedFont':''" style="cursor:pointer">1.0x</div>
					<div  @click="aplayerSpeed(1.5)" :class="aplayerSpeedNum==1.5?'aplayerSpeedFont':''" style="cursor:pointer">1.5x</div>
					<div  @click="aplayerSpeed(2)" :class="aplayerSpeedNum==2?'aplayerSpeedFont':''" style="cursor:pointer">2.0x</div>
				</div>
      </div>
      <div class="topyou" >
        <div style="font-size:16px;">
          客户：<span style="color: #2671E2;">{{userinformationlist.name || ''}}</span>
        </div>
        <div style="display: flex;font-size:15px;margin-top: 8px;">
          <div style="width:40%;">
            <div>负责顾问：{{userinformationlist.agentName|| ''}}</div>
            <div style="margin-top: 8px;">客户等级：
              <span v-if="userinformationlist.level"></span>
              <span v-if="userinformationlist.level==1">A</span>
              <span v-if="userinformationlist.level==2">B</span>
              <span v-if="userinformationlist.level==3">C</span>
              <span v-if="userinformationlist.level==4">D</span>
            </div>
          </div>
          <div style="width:60%;">
              <div >到访次数：{{userinformationlist.visitRecord|| ''}}次</div>
              <div style="margin-top: 8px;">客户阶段：</div>
          </div>
        </div>
        <div style="font-size:15px;margin-top: 8px;">最近到访时间：{{userinformationlist.createTime|| ''}}</div>
      </div>
    </div>

    <div class="topbox1">
      <div class="topzuo">
        <div class="topzuo-zuo">
          <div class="zuo-titbox">
            <div class="searchbox">
              <div style="flex:1;">
                <div style="width:96%;display: flex;margin:0 auto;" @click="searchtab()">
                  <div class="input" >请输入关键词</div>
                  <div class="input2">搜索</div>
                </div>
              </div>
              <div v-if="rec_index_textyh" style="width:100px;display: flex; justify-content: center;align-items: center;">
                <div class="searchbutt" @click="texttap()">文本优化</div>
              </div>
            </div>
           	  <div class="headboxbott">
                <div class="headovfu">
                  <div style="width: 100%;display: flex;" class="inner-container">
                    <div @click="tapspagek(index)"  :class="{ roleindexclass: roleindex == index }"  class="biaoji1"
                     v-for="(item,index) in tablist" :key="index">{{item.name}}</div>
                  </div>
                </div>
                <div v-if="rec_index_flag" class="headpade">
                  <div class="biaoji" @click="biaoji()">标记</div>
                </div>
              </div>
              <div style="width: 100%">
                <!-- v-bind:style="{ height: condivhe + 'px' }" -->
                <div class="center2"  id="center2"  >
                      <div class="text" :data-bg="item.bg" :data-ed="item.ed" v-if="roleindex==0"   v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                          <div v-if="item.speaker == 1">
                            <img style="margin: 0 auto;" v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div  v-else>A</div>
                          </div>
                          <div v-if="item.speaker == 2">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>B</div>
                          </div>
                          <div v-if="item.speaker == 3">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>C</div>
                          </div>
                          <div v-if="item.speaker == 4">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>D</div>
                          </div>
                          <div v-if="item.speaker == 5">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>E</div>
                          </div>
                          <div v-if="item.speaker == 6">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>F</div>
                          </div>
                          <div v-if="item.speaker == 7">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>G</div>
                          </div>
                          <div v-if="item.speaker == 8">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>H</div>
                          </div>
                          <div v-if="item.speaker == 9">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>I</div>
                          </div>
                          <div v-if="item.speaker == 10">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>J</div>
                          </div>
                          <div v-if="item.speaker == 11">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>K</div>
                          </div>
                          <div v-if="item.speaker == 12">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>L</div>
                          </div>
                          <div v-if="item.speaker == 13">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>M</div>
                          </div>
                          <div v-if="item.speaker == 14">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>N</div>
                          </div>
                          <div v-if="item.speaker == 15">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>O</div>
                          </div>
                          <div v-if="item.speaker == 16">
                            <img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                            <div v-else>P</div>
                          </div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>


                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==1 && item.speaker ==1" v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar" >
                           <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>A</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==2 && item.speaker ==2" v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar" >
                           <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>B</div>
                        </div>
                        <div class="content123" @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==3 && item.speaker ==3" v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                            <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>C</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==4 && item.speaker ==4" v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                           <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>D</div>
                        </div>
                        <div class="content123" @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==5 && item.speaker ==5" v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                           <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>E</div>
                        </div>
                        <div class="content123" @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==6 && item.speaker ==6" v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                           <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>F</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==7 && item.speaker ==7"  v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                           <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>G</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==8 && item.speaker ==8"  v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                            <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>H</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==9 && item.speaker ==9"  v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                            <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>I</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==10 && item.speaker ==10"  v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                            <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>J</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==11 && item.speaker ==11"  v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                           <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>K</div>
                        </div>
                        <div class="content123" @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==12 && item.speaker ==12" v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                           <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>L</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==13 && item.speaker ==13"  v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                          <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>M</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==14 && item.speaker ==14"  v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                          <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>N</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==15 && item.speaker ==15"  v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                          <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>O</div>
                        </div>
                        <div class="content123"  @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                      <div class="text" :data-bg="item.bg" :data-ed="item.ed"  v-if="roleindex==16 && item.speaker ==16" v-for="(item,index) in transcriptionlist" :key="index" :data-speaker="item.speaker">
                        <div class="avatar">
                          <img  v-if="item.isShow == 1"  src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
                          <div v-else>P</div>
                        </div>
                        <div class="content123" @click="checkMsg(item,index)" style="cursor:pointer;">
                          <div v-html="item.onebest"></div>
                        </div>
                      </div>

                  </div>
              </div>

          </div>
        </div>
        <div class="topzuo-you" style="overflow-y: auto;">
            <div style="width: 100%;height: 44px;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;border-bottom: 1px solid #E0E0E0;">
              <div style="flex: 1;font-size: 16px;color: #333333;text-indent:5%;">客户意向</div>
              <div v-if="rec_index_makesure" style="flex: 1;font-size: 16px;color: #2671E2;text-indent:70%;" @click="Acqtap()">校准</div>
            </div>
            <div class="pingfenbox" >
              <div :class="{ activecllasscet: kehuyixiangcenterindex == 0 }" @click="customerofintention(0)">系统分析</div>
              <div :class="{ activecllasscet: kehuyixiangcenterindex == 1 }" @click="customerofintention(1)">人工校准</div>
            </div>
              <div  v-if="Getintentionlist && Getintentionlist.length==0" style="width: 100%;text-align: center;line-height: 100px;">
              暂无数据
            </div>
            <div v-else>
                <div class="intentionBox" v-for="(item,index) in Getintentionlist" :key="index">
                  <div  class="intentionName">{{item.name}}</div>
                  <div class="intentionChe" v-if="kehuyixiangcenterindex==0">
                    <div v-for="(funche,i) in item.newchildren" :key="i" v-if="funche.showType==0">{{funche.name}}</div>
                     <div class="intentionview" v-for="(funche,i) in item.newchildren" :key="i" v-if="funche.showType==1">{{funche.name}}</div>
                  </div>
                  <div class="intentionChe" v-if="kehuyixiangcenterindex==1">
                    <div v-for="(funche,i) in item.newchildren" :key="i" v-if="funche.showType==0">{{funche.name}}</div>
                     <div v-for="(funche,i) in item.newchildren" :key="i">{{funche.name}}</div>
                  </div>
                </div>
            </div>
        </div>
      </div>
      <div class="topyou">
          <div class="pingfenbox" >
            <div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)">销讲总执行率{{userinformationlist.fraction|| 0}}%</div>
            <div v-if="rec_index_todo"  :class="{ activecllasscet: zhixingcenterindex == 1 }" @click="recordclick(1)">禁忌执行</div>
          </div>
          <div v-if="zhixingcenterindex==0">
            <div style="width: 100%;height: 44px;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;">
              <div style="width:60%;font-size: 16px;color: #333333;text-indent:20px;">指标</div>
              <div style="width:40%;flex: 1;font-size: 16px;color: #333333;">
                 <div style="width:60px; text-align: center;">执行</div>
              </div>
            </div>
          </div>

           <!-- v-bind:style="{ height: zxldivhe + 'px' }" -->
          <div id="zxldiv" v-if="zhixingcenterindex==0" >
            <div class="zxlBox" v-for="(item,index) in ratelist" :key="index">
              <div class="zxlLev1" @click="changeshow(index)">
                <div style="width:60%;" class="zxlLev1box">{{item.name}} {{((item.ratepercent/item.rate).toFixed(2)*100).toFixed()}}%</div>
                <div style="width:40%;">
                  <div style="width:60px; text-align: center;">
                    <i v-if="item.show==true"  style="font-size: 18px;" class="el-icon-arrow-up"></i>
                    <i v-if="item.show==false" style="font-size: 18px;" class="el-icon-arrow-right"></i>
                   </div>
                </div>
              </div>
              <div class="zxlLev2"  v-if="item.show" v-for="(subitem,i) in item.children" :key="i">
                <div style="width:60%;" class="zxlLev2tit">{{subitem.name}}</div>
                <div style="width:40%;display: flex;align-items: center;">
                  <div class="zxlzx" v-if="!subitem.selected">执行</div>
                  <div v-else class="zxlzx2">未执行</div>
                </div>
              </div>
            </div>
          </div>

          <div id="zxldiv" v-if="zhixingcenterindex==1" style="padding: 0px 10px 10px 10px;">
            <div style="margin-top:10px;" v-for="(item,index) in prohibitedlist" :key="index">{{index+1}}、{{item}}</div>
          </div>
      </div>
    </div>

    <el-dialog title="加入常错词" :visible.sync="dialogFormVisible" width="500px" center :close-on-click-modal="false" @close="$refs.form.resetFields();">
      <el-form :model="form" ref="form" label-width="80px" :rules="rules" >
        <el-form-item label="常错词" prop="wrongWord">
				  <el-input v-model="form.wrongWord" autocomplete="off"></el-input>
			  </el-form-item>
        <el-form-item label="正确词" prop="correctWord">
          <el-input v-model="form.correctWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subMsg">确 定</el-button>
      </div>
	  </el-dialog>



    <el-dialog title="标记顾问" :visible.sync="dialogFormVisible11" center width="500px" :close-on-click-modal="false">
		<div style="width: 95%;display: flex;flex-wrap: wrap;margin: 0 auto;padding-top: 30px;padding-bottom: 30px;">
			<div class="viewclace" :class="roleindexbiaoji == index ? 'bosdttom' : ''"
				 @click="biaojixuanze(index)" v-for="(item,index) in tablist.slice(1,tablist.length)" :key="index">
				<div>{{item.name}}</div>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="unmarktap()">取 消</el-button>
			<el-button type="primary" @click="subMsg11">确 定</el-button>
		</div>
	</el-dialog>


  <el-dialog title="校准" :visible.sync="dialogFormVisible12" center width="500px"   :close-on-click-modal="false">
    <div style="height:400px;width:100%;overflow: auto;">
        <div class="intentionBox" v-for="(item,index) in Acquirecustomerintentlist2"   :key="index">
          <div class="intentionName">{{item.name}}</div>
          <div class="intentionChe2">
            <div v-for='(item1,i) in item.children' :key='i' @click="Edittag(item,item1,index,i)"
              :style="{border:item1.selected==0?'1px solid #0A6EE9':'1px solid #E0E0E0'}">
              {{item1.label}}
            </div>
          </div>
        </div>
    </div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible12=false">取 消</el-button>
			<el-button type="primary" @click="intentlist2click()">确 定</el-button>
		</div>
	</el-dialog>

    <el-dialog title="接待标记" :visible.sync="dialogFormVisible13" center width="500px" :close-on-click-modal="false">
    <div style="width:80%;margin:0 auto;font-size: 30px;">
      <div>
         <el-radio v-model="effectiveindex" label="1">没电指派无录音</el-radio>
         <el-radio v-model="effectiveindex" label="2">离线指派无录音</el-radio>
      </div>
       <div>
         <el-radio v-model="effectiveindex" label="3">系统测试误操作</el-radio>
         <el-radio v-model="effectiveindex" label="4">非接访场景录音</el-radio>
       </div>
      <div >
         <el-radio v-model="effectiveindex" label="5">其他</el-radio>
      </div>
      <div v-if="effectiveindex==5">
        <textarea v-model="effectiveitext" style="width:100%;margin-top: 6px;border: 1px solid #e0e0e0;height: 100px;padding: 10px;font-size: 16px;" name="" placeholder="备注" cols="30" rows="10"></textarea>
      </div>
    </div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible13=false">取 消</el-button>
			<el-button type="primary" @click="effectiveAdd()">确 定</el-button>
		</div>
	</el-dialog>

  <div v-if="dialogFormtext" @click="dialogFormtext=false" id="zhezhao"></div>
	<div v-if="dialogFormtext" class="auDivhhh">
		<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 20px;font-weight: 400;">文本优化</div>
		<div class="center3" style="width: 95%;margin: 0 auto;border:1px solid #e3e3e3;height: 430px;overflow-y: scroll;">
			<div class="text" :data-bg="item.bg" :data-ed="item.ed"
				 v-for="(item,index) in optimizetext" :key="index" :data-speaker="item.speaker">
				<div class="buttonzu">
					<span style="cursor:pointer" @click="texteditor(item,index)">纠正</span>
					&nbsp; &nbsp;
					<span style="cursor:pointer" @click="optimdel(index)">删除</span>
          <span style="cursor:pointer; margin-left: 10px;" @click="editRole(item,index)">修改角色</span>
				</div>
				<div class="avatar">
					<div v-if="item.speaker == 1">
						<img style="margin: 0 auto;" v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div  v-else>A</div>
					</div>
					<div v-if="item.speaker == 2">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>B</div>
					</div>
					<div v-if="item.speaker == 3">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>C</div>
					</div>
					<div v-if="item.speaker == 4">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>D</div>
					</div>
					<div v-if="item.speaker == 5">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>E</div>
					</div>
					<div v-if="item.speaker == 6">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>F</div>
					</div>
					<div v-if="item.speaker == 7">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>G</div>
					</div>
					<div v-if="item.speaker == 8">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>H</div>
					</div>
					<div v-if="item.speaker == 9">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>I</div>
					</div>
					<div v-if="item.speaker == 10">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>J</div>
					</div>
					<div v-if="item.speaker == 11">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>K</div>
					</div>
					<div v-if="item.speaker == 12">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>L</div>
					</div>
					<div v-if="item.speaker == 13">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>M</div>
					</div>
					<div v-if="item.speaker == 14">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>N</div>
					</div>
					<div v-if="item.speaker == 15">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>O</div>
					</div>
					<div v-if="item.speaker == 16">
						<img style="margin: 0 auto;"  v-if="item.isShow == 1" src="http://121.42.63.138:9091/autoSR/static/plugins/audio/images/A.png" alt="">
						<div v-else>P</div>
					</div>
				</div>
				<div class="content123"  style="cursor:pointer;">
					<div v-html="item.onebest"></div>
				</div>
			</div>
		</div>
		<div style="display: flex;margin-top: 12px;height: 35px;align-items: center;justify-content: center;">
			<el-button size="small" @click="savedraft(1)">保存并更新文本</el-button>
			<el-button size="small" type="primary" @click="savedraft(0)">保存草稿</el-button>
			<el-button size="small" type="primary" @click="textrestore()">恢复当前文本</el-button>
			<el-button size="small" @click="dialogFormtext=false">取消</el-button>
		</div>
	</div>


      <el-dialog title="纠正文本" :visible.sync="texteditorishow" center width="600px" :close-on-click-modal="false">
        <div>
            <span>错误内容：</span>
			<span v-html="textareacuowu"></span>
        </div>
        <div style="margin-top: 10px;">
            <div>纠正内容：</div>
			<div style="margin-top: 6px;">
				<el-input
						type="textarea"
						:rows="2"
						placeholder="请输入内容"
						v-model="textarea">
				</el-input>
			</div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="texteditorishow=false">取消</el-button>
            <el-button type="primary" @click="summunct()">确认</el-button>
        </div>
    </el-dialog>


    <el-dialog title="搜索" :visible.sync="searchisshow" center width="500px"   :close-on-click-modal="false">
    <div style="width:100%;display: flex;height:32px;">
      <div style="width: 75%;height:100%;">
        <input @input="tabinput()" v-model="inputtest" class="inputclass" type="text" placeholder="请输入搜索内容">
      </div>
      <div style="width: 25%;height:100%;">
        <div class="inputclass2" style="margin:0 auto;">搜索</div>
      </div>
    </div>
    <div style="height:400px;width:100%;overflow: auto;padding: 15px;">
      <div class="searchbox54" v-for="(item,index) in Searchcontent" @click="tabseek(item)" :key="index" style="cursor:pointer">
				<div >
				<div class="avatar">
          <div v-if="item.speaker == 1" style="color: #4F861E">A</div>
          <div v-if="item.speaker == 2" style="color: #4F861E">B</div>
					<div v-if="item.speaker == 3" style="color: #4F861E">C</div>
					<div v-if="item.speaker == 4" style="color: #60CBEC">D</div>
					<div v-if="item.speaker == 5" style="color: #EC8B47">E</div>
					<div v-if="item.speaker == 6" style="color: #9F61C8">F</div>
					<div v-if="item.speaker == 7" style="color: #4980C8">G</div>
				</div>
				</div>
				<div>
					<div style="font-size: 14px;">{{formatTime(item.transferContent.bg)}}</div>
					<div style="padding-top: 4px;font-size: 14px;" v-html="item.text"></div>
				</div>
			</div>
    </div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="searchisshow=false">取 消</el-button>
		</div>
	</el-dialog>

  	<el-dialog title="角色纠正" :visible.sync="roleVisible" center width="600px" :close-on-click-modal="false">

		<div style="margin-top: 10px;display: flex;">
			<div  style="line-height: 38px;">角色纠正：</div>
				<el-select
				v-model="roleFlag"
				class="rolediv"
				placeholder="请选择"
				style="height: 38px;"
				filterable>
					<el-option
						v-for="(item,index) in roleList"
						:key="index"
						:label="item.name"
						:value="index">
					</el-option>
				</el-select>
			</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="roleVisible=false">取消</el-button>
			<el-button type="primary" @click="editSure()">确认</el-button>
		</div>
	</el-dialog>

  </div>
</template>

<script>
import "aplayer/dist/APlayer.min.css";
import APlayer from "aplayer";
import { mapGetters } from "vuex";
import { getStore, setStore } from "@/util/store";
export default {
  data() {
    return {
      roleVisible:false,
			roleFlag:'0',
      roleidx:'',
			roleList:[],
      dialogFormVisible:false,
      dialogFormVisible11:false,
      dialogFormVisible12:false,
      dialogFormVisible13:false,
      texteditorishow:false,
      searchisshow:false,
      effectiveindex:1,
      effectiveitext:'',
      form:{
					correctWord: '',//正确词
					cupid: '',
					wrongWord: '', // 错词
					customerId:'',
			},
			rules: {
					correctWord: [
						{ required: true, message: '请输入正确词', trigger: 'blur' },
					],
					wrongWord: [
						{ required: true, message: '请输入错词', trigger: 'blur' },
					],
			},
      aplayer: null,
      aplayerSpeedNum: "1", //点击字体更换
      arr: [],//录音文件列表
      aplayerId: 0,
      aplayerLength: 0,//文件个数
      tablist:[ {name:'全部',}, {name:'A',}, {name:'b',}, {name:'c',},{name:'c',},{name:'c',},{name:'c',},],
      roleindex:0,
      zhixingcenterindex:0,

      corpusId:0,//录音文件id
      fileId:'',//客户id
      recordPath:'',//播放src
      transcriptionlist:[],//转写内容
      playNow:0,
      userinformationlist:{},//客户信息
      kehuyixiangcenterindex:0,
      AudioIdx:0,//录音文件顺序
      isd:'',
      dshfkjsdkksodofydwfkhwdfkjh:'',
      roleindexbiaoji:0,
      aplayerSpeedNum:'1',//倍速字体更换
      Getintentionlist:[],//客户意向
      argtextindex:'',//常错词下标
      ratelist:[],//评分集合
      prohibitedlist:[],//违禁集合
			textItself:'',//原词内容
      Acquirecustomerintentlist2:[],//校准列表
      dialogFormtext:false,
      optimizetext:[],//文本优化list
      optimizeobj:{},//文本优化obj
      textarea:'',
			textareacuowu:'',
			textareaindex:0,
      Searchcontent:[],
      inputtest:'',
      info:{},
      yibiaoji:'',
      rec_index_flag:false,
       rec_index_addJ:false,
        rec_index_wrongword:false,
         rec_index_makesure:false,
          rec_index_todo:false,
           rec_index_receflag:false,
           rec_index_textyh:false
    };
  },
    created() {
    this.rec_index_flag = this.permissions["rec_index_flag"];//标记顾问
    this.rec_index_addJ = this.permissions["rec_index_addJ"];//加精
    this.rec_index_wrongword = this.permissions["rec_index_wrongword"];//常错词
    this.rec_index_makesure = this.permissions["rec_index_makesure"];//校准
    this.rec_index_todo = this.permissions["rec_index_todo"];//禁忌
    this.rec_index_receflag = this.permissions["rec_index_receflag"];//接待标记
     this.rec_index_textyh = this.permissions["rec_index_textyh"];//文本优化

  },
  mounted() {
   this.fileId=this.$route.query.flag;
   this.AudioIdx=this.$route.query.AudioIdx;
    this.info = getStore({ name: "userInfo" });
    this.init()
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  destroyed(){
       this.aplayer.destroy()
  },
  methods: {
    	editSure(){
				// console.log(this.roleFlag)
				// this.optimizetext
				// console.log(this.optimizetext[this.roleidx])
				this.optimizetext[this.roleidx].speaker=this.roleFlag/1+1
				// this.optimizetext[this.roleidx].speaker=2
				// console.log(this.optimizetext[this.roleidx])
				this.roleVisible=false
			},
			//修改角色
			editRole(item,idx){
				// console.log(item,idx)
				// console.log(this.roleList)
				this.roleFlag=item.speaker-1
				// console.log(this.roleFlag)
				this.roleidx=idx
				this.roleVisible=true
			},
    gojianyi(){
      // console.log(this.$route);
      let tag={
        group:[],
        label: "接待详情",
        params:{},
        query:this.$route.query,
        value:this.$route.fullPath,
      }
      // console.log(tag);
      this.$store.commit('DEL_TAG', tag)
      this.$router.go(-1);//返回上一层
    },
    	//上一首
			aplayerChange(str){
				this.aplayer.destroy()
				document.querySelector(".center2").scrollTop=0
				if(str=='add'){
					this.aplayerId++
					if(this.aplayerId>=this.aplayerLength){
						this.$message('没有下一首啦')
						this.aplayerId--
						this.bofangchushihua()
						return
					}else{
						this.arr[this.aplayerId].audioContent!=''?this.transcriptionlist=JSON.parse(this.arr[this.aplayerId].audioContent):this.transcriptionlist=[]
						this.recordPath=this.arr[this.aplayerId].recordPath;
					}
				}else{
					this.aplayerId--
					if(this.aplayerId<0){
						this.$message('没有上一首啦')
						this.aplayerId++
						this.bofangchushihua()
						return
					}else {
						this.arr[this.aplayerId].audioContent!=''?this.transcriptionlist=JSON.parse(this.arr[this.aplayerId].audioContent):this.transcriptionlist=[]
						this.recordPath=this.arr[this.aplayerId].recordPath;
					}
				}
				this.bofangchushihua()
				this.aplayer.play()
			},
    	//点击播放
			tabseek(item){
				this.centerindex=0;
				let num = parseInt(item.transferContent.bg / 1000)
				if(item.corpusId==this.arr[this.aplayerId].id){
					this.aplayer.seek(num)
				}else{
          let idx=this.arr.findIndex(item1=>item1.id==item.corpusId)
					if(idx==-1){
						this.$message('没有此条录音信息')
					}else{
						this.aplayerId=idx
						this.aplayer.destroy()
						console.log(idx)
						this.transcriptionlist=JSON.parse(this.arr[idx].audioContent)
						this.recordPath=this.arr[idx].recordPath
						this.bofangchushihua()
						this.$nextTick(()=>{
							this.aplayer.audio.currentTime=num
						})
					}
				}
        this.searchisshow=false;
				this.aplayer.play()
			},
    //点击搜索
    searchtab(){
      this.inputtest='';
      this.Searchcontent=[];
      this.searchisshow=true;
    },
    tabinput(){
      if(this.inputtest==''){
          return
      }else {
          this.Searchcontent=[];
          this.$api.http.keyWordsMatching({
            keyword:this.inputtest,
            customerId:this.fileId
          }).then((res) => {
            let list=res.data;
            // JSON.parse();
            list.map(item=>{
               item.transferContent=JSON.parse(item.transferContent)

              item.text=this.brightKeyword(item.transferContent.onebest)
            })
            this.Searchcontent=list;
          })
      }
    },
    	//替换方法
			brightKeyword(val) {
				if (val.indexOf(this.inputtest) !== -1) {
					return val.replace(this.inputtest,	"<text style='color: red'>"+this.inputtest+"</text>");
				} else {
					return val;
				}
			},
    //文本恢复
    textrestore(){
       this.optimizeobj=[];
       this.optimizetext={};
       this.$api.http.findText({corpusId:this.arr[this.aplayerId].id}).then((res) => {
         this.optimizeobj=res.data;
         this.optimizetext=JSON.parse(res.data.textContent)
       })
    },
    //保存并更新文本 保存草稿
    savedraft(i){
        this.$api.http.saveText({
          	saveType:i,
						corpusId:this.arr[this.aplayerId].id,
						id:this.optimizeobj.id,
						textContent:JSON.stringify(this.optimizetext)
        }).then((res) => {
            this.dialogFormtext=false;
						this.$message.success('优化完成')
						if(i==1){
							this.init()
						}
        })
			},
    //文本编辑确认
    	summunct(){
				this.optimizetext[this.textareaindex].onebest=this.textarea;
				this.texteditorishow=false;
			},
    //文本编辑
    texteditor(item,index){
      this.textarea='';
      this.textareaindex=index;
      this.textareacuowu=item.onebest;
      this.texteditorishow=true;
    },
    //文本优化删除
    optimdel(i){
        console.log(i)
        var that=this;
        this.$confirm('此操作将删除该条, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            that.optimizetext.splice(i,1)
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
        }).catch(() => {
            // this.$message({
            //     type: 'info',
            //     message: '已取消删除'
            // });
        });
    },
    //获取文本
    texttap(){
      this.optimizeobj=[];
       this.optimizetext={};
       this.$api.http.findText({corpusId:this.arr[this.aplayerId].id}).then((res) => {
         this.optimizeobj=res.data;
         this.optimizetext=JSON.parse(res.data.textContent)
           this.dialogFormtext=true;
       })
    },
    // 接待标记
    alllogo(){
        if(this.userinformationlist.validInvalid!=0){
          this.$confirm('是否标记为"有效录音"？', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$api.http.updateValidInvalid({
              id:this.fileId,
              validInvalid:0,
              invalidReason:''
            }).then((res) => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.init()
          })
        }).catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消操作",
          // });
        });
        }else{
          this.dialogFormVisible13=true;
        }
    },
    //无效标记
    effectiveAdd(){
        if(this.effectiveindex==5){
					if(this.effectiveitext.length==0){
            this.$message({
                type: "error",
                message: "备注不能为空!",
              });
						return
					}
				}
          this.$api.http.updateValidInvalid({
              id:this.fileId,
              validInvalid:'',
              validInvalid:1,
              invalidReason:Number(this.effectiveindex),
              invalidNote:this.effectiveitext
            }).then((res) => {
               this.dialogFormVisible13=false;
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.init()
          })
    },

    //加精華
    Addtodigest(){
      var that = this;
     if(that.arr[that.aplayerId].status==0){
       that.$confirm("取消加精,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          that.$api.http.delATD({"carId": that.fileId,}).then((res) => {
            that.$message({
              type: "success",
              message: "操作成功!",
            });
            this.init()
          })
        }).catch(() => {
          // that.$message({
          //   type: "info",
          //   message: "已取消操作",
          // });
        });
     }else{
        that.$confirm("加精,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          that.$api.http.addATD({"carId": that.fileId,"status": 0,}).then((res) => {
            that.$message({
              type: "success",
              message: "加精成功!",
            });
            this.init()
          })
        }).catch(() => {
          // that.$message({
          //   type: "info",
          //   message: "已取消加精",
          // });
        });
     }
    },
    //确认校准
    intentlist2click(){
        let param = {
					keywordIds:'',
					id: this.fileId,
				};
				let str = [];
				this.Acquirecustomerintentlist2.map(item => {
					item.children.map(item1 => {
						if (item1.selected == 0) {
							str.push(item1.keywordsId)
						}
					})
				});
				str = str.join(',');
				param.keywordIds = str;
        this.$api.http.updateManualCalibration(param).then((res) => {
             this.dialogFormVisible12=false;
             this.findCARKeywords()
        })
    },
    // 选择校准
    Edittag(item,item1,index,i){
      if(this.Acquirecustomerintentlist2[index].children[i].selected==0){
        this.Acquirecustomerintentlist2[index].children[i].selected=1;
      }else{
        this.Acquirecustomerintentlist2[index].children[i].selected=0;
      }
      this.$forceUpdate()
    },
    //获取校准列表
    Acqtap(){
        this.dialogFormVisible12=true;
          this.$api.http.findSystemAnalysis({customerId:this.fileId,type:2}).then((res) => {
            let newlist=res.data || [];
            if(newlist.length==0){
                 this.$message.success('暂无数据')
            }else{
              newlist.forEach(item1 => {
                item1.children.map(item => {
                  if (item.isInterval == 0) {
                    item.label = item.name + item.unit + '-' + item.endName + item
                    .unit;
                  } else {
                    item.label = item.name
                  }
                  item.value = item.id;
                })
              })
              this.Acquirecustomerintentlist2 = newlist
            }
          })
    },

    //标记
    biaoji(){
      this.dialogFormVisible11=true
    },
    //取消标记
    unmarktap(){
        this.dialogFormVisible11=false;
				this.roleindexbiaoji=this.dshfkjsdkksodofydwfkhwdfkjh;
    },
    // 标记选择
    biaojixuanze(index){
      this.roleindexbiaoji=index;
    },
    //确认标记
    subMsg11(){
       var num=this.roleindexbiaoji+1;
			 this.$api.http.markConsultant({
         speaker:num,
				 id:this.isd,
         customerId:this.fileId
        }).then((res) => {
           this.dialogFormVisible11=false;
           this.init()
					 this.biaojiall()
					 this.$message.success('保存成功')
       })
    },
    biaojiall(){
       this.$api.http.toMatchKeywords({
         carId:this.fileId,
        }).then((res) => {})
    },
    // 获取用户信息
    init(){
      this.$api.http.personalReceptionRecord({customerId:this.fileId}).then((res) => {
          this.userinformationlist=res.data
					this.userinformationlist.endTime=this.userinformationlist.endTime.substring(0, 19);
					if(this.userinformationlist.calibration==0){
						this.kehuyixiangcenterindex=0;
					}else {
						this.kehuyixiangcenterindex=1;
					}
          this.findCARKeywords()
          this.findBannedWordsByCusId()
          this.Getsthetransliteratecontent()
      })
    },




    //常错词确认
    subMsg(){
      this.$refs.form.validate((valid)=>{
					if(valid){
						this.dialogFormVisible = false;
						let sas=this.textItself.replace(this.form.wrongWord,this.form.correctWord)
            this.transcriptionlist[this.argtextindex].onebest=sas;
						this.subWrongMsg()
					}
				})
    },
    //常错词提交
    subWrongMsg(){
       this.$api.http.addCorrectWord({
         correctWord:this.form.correctWord,
         cupid:this.form.cupid,
				 wrongWord: this.form.wrongWord,
				 customerId:this.fileId,
       }).then((res) => {
           this.$message.success('保存成功')
       })
    },
    //常错词点击
    checkMsg(row,index){
      if(this.rec_index_wrongword==false){
        return
      }
      this.aplayer.pause()
      this.form.cupid=this.arr[this.aplayerId].id;
      this.textItself=row.onebest;
      let onebest=row.onebest;
      this.form.wrongWord =onebest.replace(/<.*?>/ig,"");
      this.dialogFormVisible=true;
      this.argtextindex=index;
    },
    // 销讲词禁忌tab
    recordclick(i){
      this.zhixingcenterindex=i;
    },
    // 销讲词折叠
    changeshow(index) {
        this.ratelist[index].show=!this.ratelist[index].show
    },
    //获取销讲词违禁词
    findBannedWordsByCusId(){
       this.$api.http.findBannedWordsByCusId({cusId:this.fileId}).then((res) => {
         let list1=res.data.SalesTalk || [];
         let list2=res.data.ProhibitedWords || [];
         let level1 = [] // 一级
				 list1.forEach(item =>{
            if(item.pid==0){
              level1.push({
                id: item.marketingId,
                rate: item.fraction,
                name: item.name,
                percent: 0,
                ratepercent: 0,
                show: false,
                children: []
              })
            }
          })
					list1.forEach(item =>{
            level1.forEach(el=>{
              if(item.pid==el.id){
                if (item.selected == 0) {
                  el.ratepercent += item.fraction;
                }
                el.children.push({
                  id: item.id,
                  rate: item.fraction,
                  selected: item.selected,
                  name: item.name
                })
              }
            })
          })
          level1[0].show = true;
					this.ratelist=level1;
          this.prohibitedlist=list2;
       })
    },


    //系统分析切换人工校准
    customerofintention(i){
      this.kehuyixiangcenterindex=i;
			this.findCARKeywords()
    },
    //获去系统分析，人工校准
    findCARKeywords(){
      this.Getintentionlist=[]
      if(this.kehuyixiangcenterindex==0){
          this.$api.http.findCARKeywords({customerId:this.fileId}).then((res) => {
            let newlist=res.data ||[];
            if(newlist.length==0){
                this.Getintentionlist=[];
              return
            }else{
              newlist.forEach(item=>{
                item.newchildren=[];
                item.children.forEach(fut=>{
                  if(fut.selected==0){
                    item.newchildren.push(fut)
                  }
                })
              })
              newlist.forEach(item=>{
                item.children.forEach(chen=>{
                  if(chen.isInterval==0){
                    chen.name=chen.name+chen.unit+'-'+chen.endName+chen.unit;
                  }else {
                    chen.name=chen.name;
                  }
                })
              })
              this.Getintentionlist=newlist
            }
          })
				}else {
          this.$api.http.findSystemAnalysis({customerId:this.fileId,type:1}).then((res) => {
            if(res.data==null){
              this.Getintentionlist=[];
              return
            }
            res.data.forEach(item=>{
							item.newchildren=[];
							item.children.forEach(fut=>{
								if(fut.selected==0){
									item.newchildren.push(fut)
								}
							})
						})
            res.data.forEach(item=>{
							item.children.forEach(chen=>{
								if(chen.isInterval==0){
									chen.name=chen.name+chen.unit+'-'+chen.endName+chen.unit;
								}else {
									chen.name=chen.name;
								}
							})
            })
						this.Getintentionlist=res.data;
          })
				}
    },
    //获取转写内容和播放列表
    Getsthetransliteratecontent(){
         this.$api.http.findByCusIdcusId({cusId:this.fileId}).then((res) => {
           let audopbj=res.data;
           this.recordPath=audopbj[this.AudioIdx].recordPath;
           audopbj[this.AudioIdx].audioContent!=''?this.transcriptionlist=JSON.parse(audopbj[this.AudioIdx].audioContent):this.transcriptionlist=[]
          //  this.transcriptionlist=JSON.parse(audopbj[this.AudioIdx].audioContent)
          this.tablist=[];
          if(this.userinformationlist.yon==0){
								this.isd=audopbj[this.AudioIdx].id;
								for(var i=0;i<=audopbj[this.AudioIdx].speakerNum;i++){
									if(i==0){
										this.tablist.push({
											name:'全部'
										})
									}else if(i==1){
										this.tablist.push({
											name:'A'
										})
									}else if(i==2){
										this.tablist.push({
											name:'B'
										})
									}else if(i==3){
										this.tablist.push({
											name:'C'
										})
									}else if(i==4){
										this.tablist.push({
											name:'D'
										})
									}else if(i==5){
										this.tablist.push({
											name:'E'
										})
									}else if(i==6){
										this.tablist.push({
											name:'F'
										})
									}else if(i==7){
										this.tablist.push({
											name:'G'
										})
									}else if(i==8){
										this.tablist.push({
											name:'H'
										})
									}else if(i==9){
										this.tablist.push({
											name:'I'
										})
									}else if(i==10){
										this.tablist.push({
											name:'J'
										})
									}else if(i==11){
										this.tablist.push({
											name:'K'
										})
									}else if(i==12){
										this.tablist.push({
											name:'L'
										})
									}else if(i==13){
										this.tablist.push({
											name:'M'
										})
									}else if(i==14){
										this.tablist.push({
											name:'N'
										})
									}else if(i==15){
										this.tablist.push({
											name:'O'
										})
									}else {
										this.tablist.push({
											name:'P'
										})
									}
                }
                this.roleList=this.tablist.slice(1)
                if(audopbj[this.AudioIdx].speaker==null){
                  this.yibiaoji='未标记'
									this.roleindexbiaoji=0;
									this.dshfkjsdkksodofydwfkhwdfkjh=0;
								}else{
                    this.yibiaoji='已标记'
									this.tablist[audopbj[this.AudioIdx].speaker].name=this.tablist[audopbj[this.AudioIdx].speaker].name+"顾问";
									this.roleindexbiaoji=audopbj[this.AudioIdx].speaker-1;
									this.dshfkjsdkksodofydwfkhwdfkjh=audopbj[this.AudioIdx].speaker-1;
								}
              }
           this.corpusId=audopbj[this.AudioIdx].id;
           this.aplayerId=this.AudioIdx;
           this.aplayerLength=audopbj.length;
           this.arr=res.data;
           this.bofangchushihua()
         })
    },
    tapspagek(i){
      this.roleindex=i;
    },
    //播放实例
    bofangchushihua() {
      var that = this;
      this.$nextTick(() => {
        this.aplayer = new APlayer({
          container: document.getElementById("aplayer"),
          theme: "#2671E2",
          audio: [
            {
              url:this.recordPath,
              cover:"https://qufang.oss-cn-beijing.aliyuncs.com/recording/1626251359408.png",
            }
          ],
        });
        //结束的回调
        this.aplayer.on("ended", function () {
          console.log("player ended");
        });
        this.aplayer.on("timeupdate", function () {
          that.drawActive(that.aplayer.audio.currentTime * 1000);
        });
      });
    },
    //音频播放中
		drawActive(playTime){
				var that=this;
				that.playNow=playTime;
				$(".center2 .text").each(function(index){
					if(this.dataset.bg<playTime && playTime<this.dataset.ed){
						$(this).addClass("activecoloc");
						that.$nextTick(() => {
							document.querySelector(".center2").scrollTop=$(".center2 .activecoloc")[0].offsetTop - 380
						})
					}else{
						$(this).removeClass("activecoloc")
					}
				});
		},
    //倍速更改
    aplayerSpeed(num){
      this.aplayer.audio.playbackRate=num
      this.aplayerSpeedNum=num
    },
    //格式化时间
    formatTime(num) {
      num = parseInt(num / 1000)
      //格式化时间格式
      num = num.toFixed(0);
      let second = num % 60;
      if (second < 10) second = '0' + second;
      let min = Math.floor(num / 60);
      if (min < 10) min = '0' + min;
      return min + ":" + second;
    },
      //下载
			download(){
        console.log(this.recordPath);
        //  this.$api.api.filedownload({videoSrc:this.recordPath}).then((res) => {
        //    console.log(res);
        //  })
				// window.location.href =this.recordPath
        this.exportMethodPost("/autoSR/zk/file/filedownload", "接待详情",{videoSrc:this.recordPath});
			},
    exportMethodPost(url, name, data = {}) {
      axios({
        method: "get",
        url: url,
        params:data,
        responseType: "blob",
      })
        .then((res) => {
          let blob = new Blob([res], { type: "audio/*" });
          let date = new Date();
          let time = date.toLocaleDateString();
          // console.log(time, "时间");
          if ("download" in document.createElement("a")) {
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            // link.download = res.headers['content-disposition'] //下载后文件名
            link.download = (name || "导出文件") + time + ".mp3"; //下载的文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          } else {
            // console.log("--------------------jingla")
            let fileName = (name || "导出文件") + time + ".mp3"; //下载的文件名
            navigator.msSaveBlob(blob, fileName);
          }
        })
        .catch((error) => {
          // Message.error({
          //     message: '网络连接错误'
          //  })
          console.log(error);
        });
    },
  },
};
</script>

<style scoped  lang="scss" >
#avue-view{
  overflow: hidden;
}
#zxldiv{
  overflow-y: scroll;
  //  height: 100%;
  height:calc(80vh - 270px);
}
.biaotibox{
  width: 100%;
  height: 40px;
  display: flex;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.biaotibox>div:nth-of-type(1){
  width: 50%;
}
.biaotibox>div:nth-of-type(2){
  width: 50%;
  font-size: 30px;
  text-align: right;
}
.center2{
  padding-left: 10px;
  padding-right: 10px;
   width: 100%;
  //  height: 100%;
  height:calc(80vh - 285px);
  overflow-y: scroll;
}

.box-center {
  width: 100%;
  height:100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
  background: #FFFFFF;
}
.inputclass{
  width: 100%;
  height: 32px;
  line-height: 32px;
  background: #FFFFFF;
  border-radius: 2px 0px 0px 2px;
  text-indent: 6px;
  border: 1px solid #E0E0E0;
}
.inputclass2{
  width: 70px;
  height: 32px;
  line-height: 32px;
  background: #2671E2;
  border-radius:4px 4px 4px 4px;
  color: #FFFFFF;
  text-align: center;
}

// 播放

.text {
      width: 100%;
      font-size: 12px;
      line-height: 20px;
      display: flex;
      align-items: center;
      margin:18px 0px;
      position: relative;
  }
  .text[data-speaker="2"],
  .text[data-speaker="4"],
  .text[data-speaker="6"] {
    flex-direction: row-reverse;
    text-align: left;
  }
  .content123 div{
    color:#ffffff;
    font-size:14px;
    padding:5px 14px;
    background:#3ca953;
    border-radius:8px;
    margin: 0 12px;
    line-height: 1.5;
    max-width: 365px;
  }
    .text[data-speaker="2"].activecoloc .content123 div,
    .text[data-speaker="4"].activecoloc .content123 div,
    .text[data-speaker="6"].activecoloc .content123 div{
      color: #FF7538;
    }
    .activecoloc .content123 div{
      color:#38FFF1;
    }
    .center2 .text .avatar{
      width: 34px;
      height:34px;
      background-color: #ccc;
      border-radius: 50%;
    //  margin-left: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .center2 .text .avatar img{
      width: 28px;
      height:28px;
      display: block;
    }
    .center2 .text .avatar div{
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 38px;
      color: #ffffff;
      font-size: 24px;
    }
  .aplayerSpeedFont{
    color: #2671E2;
  }


  .center3{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
 .center3 .text {
      width: 100%;
      font-size: 12px;
      line-height: 20px;
      display: flex;
      align-items: center;
      margin:26px 0px;
      position: relative;
  }
  .center3 .text .avatar{
			 width: 38px;
			 height:38px;
			 /*background-color: #f2f2f2;*/
			 background-color: #ccc;
			 border-radius: 50%;
			 margin-left: 15px;
			 display: flex;
			 justify-content: center;
			 align-items: center;
		 }
		 .center3 .text .avatar img{
			 width: 28px;
			 height:28px;
			 display: block;
		 }
		 .center3 .text .avatar div{
			 width: 100%;
			 height: 100%;
			 text-align: center;
			 line-height: 38px;
			 color: #ffffff;
			 font-size: 24px;
		 }

 .buttonzu{
    position: absolute;
    left: 70px;
    top: -20px;
  }
  .text[data-speaker="2"] .buttonzu,
  .text[data-speaker="4"] .buttonzu,
  .text[data-speaker="6"] .buttonzu{
    position: absolute;
    right: 70px;
    top: -20px;
    text-align: right;
  }



//指标执行率
.zxlBox{
  width: 100%;
  .zxlLev1{
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    background: #F8F8F8;
    font-size: 15px;
  }
  .zxlLev1box{
    text-indent: 20px;

  }
   .zxlLev2{
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    border-bottom: 1px solid #F8F8F8;
    font-size: 14px;
    .zxlzx{
     width: 60px;
     height: 24px;
     line-height: 24px;
      background: #2671E2;
      text-align: center;
      color: #FFFFFF;
      border-radius:4px ;
    }
    .zxlzx2{
       width: 60px;
      height: 24px;
      line-height: 24px;
      background: #F2F2F2;
      text-align: center;
      color: #999999;
      border-radius:4px ;
    }
  }
  .zxlLev2tit{
    line-height: 40px;
    text-indent: 20px;
  }
}

//客户意向
.intentionBox{
  width: 94%;
  margin: 0 auto;
  padding-bottom: 12px;
  border-bottom: 1px solid #E0E0E0;
}
.intentionChe{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .intentionview{
     padding: 4px  10px;
      border: 1px solid #E0E0E0;
      background: #E0E0E0;
      margin-left: 6px;
      border-radius:6px ;
      font-size: 14px;
      margin-top: 10px;
  }
}
.intentionName{
  font-size: 16px;;
   margin-top: 10px;
}
.intentionChe div{
  padding: 4px  10px;
  background: #F4F8FD;
  margin-left: 6px;
  border-radius:6px ;
  color: #2671E2;
  font-size: 14px;
  margin-top: 10px;
}

.intentionChe2{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.intentionChe2 div{
  padding: 4px  10px;
  border: 1px solid #E0E0E0;
  margin-left: 6px;
  border-radius:6px ;
  font-size: 14px;
  margin-top: 10px;
}

.topbox{
  width: 100%;
  height: 140px;
  display: flex;
  .topzuo{
    width:75% ;
    min-width: 700px;
    height: 140px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    padding: 10px;
    position: relative;

    .title{
      color: #32363D;
      .span1{
        font-size: 16px;
        font-weight: 600;
        margin-left: 2px;
      }
      .span2{
        font-size: 14px;
        margin-left: 10px;
      }
      .span3{
        font-size: 16px;
        margin-left: 2px;
      }
    }
  }
  .topyou{
    width:24% ;
    min-width: 300px;
    height: 140px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    margin-left: 20px;
  }
}

.input{
  width: 94%;
  height: 32px;
  line-height: 32px;
  background: #FFFFFF;
  border-radius: 2px 0px 0px 2px;
  text-indent: 6px;
  border: 1px solid #E0E0E0;
}
.input2{
  width: 70px;
  height: 32px;
  line-height: 32px;
  background: #2671E2;
  border-radius:0px 2px 2px 0px;
  color: #FFFFFF;
  text-align: center;
}
.topbox1{
  width: 100%;
  display: flex;
  margin-top: 18px;
  height: calc(80vh - 178px);
  .topzuo{
    width:75% ;
    min-width: 700px;
    height: 100%;
    display: flex;
    .topzuo-zuo{
      width: 60%;
      height: 100%;
      background: #FFFFFF;
      border: 1px solid #E0E0E0;
      .zuo-titbox{
        width: 100%;
        height: 100px;
        border-bottom:  1px solid #E0E0E0;
        .searchbox{
          width: 100%;
          height: 50px;
          display: flex;
          margin-top: 6px;
          justify-content: center;
          align-items: center;

          .searchbutt{
            width: 80px;
            height: 32px;
            line-height: 32px;
            background: #2671E2;
            border-radius: 2px;
            color: #FFFFFF;
            // margin-left: 20px;
            text-align: center;
          }
        }
      }
    }
    .topzuo-you{
      width: 39%;
      height: 100%;
      margin-left: 18px;
       background: #FFFFFF;
      border: 1px solid #E0E0E0;
    }
  }
  .topyou{
    width:24% ;
    min-width: 300px;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    margin-left: 20px;
  }
}

.roleindexclass{
			 background: #2671E2;
       color: #FFFFFF;
		 }
 .headboxbott{
			 width: 100%;
			 height:50px;
			 display: flex;
			 align-items: center;
		 }
		 .headovfu{
			 flex: 1;
			 height: 40px;
			 overflow: hidden;
			 margin-top: 10px;
		 }
		 .headpade{
			 width: 100px;
			 height: 40px;
			 display: flex;
			 justify-content: center;
			 align-items: center;
		 }
		 .biaoji{
			 width: 70px;
			 height: 30px;
			 background: #E6625B;
			 border-radius: 24px;
			 text-align: center;
			 line-height: 30px;
			 color: #FFFFFF;
		 }
		 .biaoji1{
			 width: 70px;
			 height: 30px;
			 text-align: center;
			 line-height: 30px;
			 margin-left: 10px;
			 flex-shrink: 0;
       border-radius: 4px;
		 }
		 .inner-container{
			 overflow-x: scroll;
			 height: 40px;
		 }
		 /*滚动条样式*/
		 .inner-container::-webkit-scrollbar {
			 height: 4px;
		 }
		 .inner-container::-webkit-scrollbar-thumb {
			 border-radius: 10px;
			 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			 background: rgba(0,0,0,0.2);
		 }
		 .inner-container::-webkit-scrollbar-track {
			 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			 border-radius: 0;
			 background: rgba(0,0,0,0.1);
		 }
     .aplayer{
			box-shadow:none;
			/*width: 80%;*/
			width: 95.3%;
		}
    .aplayer-author{
			display: none;
		}


		.aplayerSpeed{
			display: flex;
			/*justify-content: space-around;*/
			justify-content: space-between;
			padding: 0 10px;
			font-size: 14px;
			color: #999;
			/*width: 616px;*/
			width: 86.5%;
			margin: 0 auto;
			position: absolute;
			left: 78px;
		  bottom: 12px;
		}
    /deep/.aplayer-pic{
			width: 60px !important;
			height: 60px !important;
		}
		/deep/.aplayer-music{
			display: none !important;
		}
		.aplayer-controller{
			margin-top: 15px;
		}

		.aplayerSpeedFont{
			color: #2671E2;
		}
    /deep/.aplayer-info{
      padding: 22px 7px 0px 10px;;
    }
  .pingfenbox{
		width: 100%;
		height: 46px;
		line-height: 46px;
		border-bottom: 1px solid #E0E0E0;
		display: flex;
	}
	.pingfenbox div{
		flex: 1;
		text-align: center;
		font-size: 16px;
	}
	.activecllasscet{
		color: #2671E2;
    border-bottom: 2px solid #2671E2;
	}
 .viewclace{
			 height: 30px;
			 text-align: center;
			 line-height: 30px;
			 border-radius: 14px;
			 margin-right: 34px;
			 margin-top: 16px;
			 font-size: 16px;
			 border: 1px solid;
			 padding-left: 18px;
			 padding-right: 18px;
		 }
      .bosdttom{
			 color: #FFFFFF;
			 background-color: #2671E2;
		 }
      #zhezhao{
			 width: 100%;
			 height: 100vh;
			 position: fixed;
			 top: 0;
			 left: 0;
			 z-index: 1000;
			 opacity: 0.5;
			 background-color: #666666;
		 }
		 .auDivhhh{
			 width: 600px;
			 height: 540px;
			 border-radius: 4px;
			 z-index: 1003;
			 position: fixed;
			 left: 50%;
			 top: 50%;
			 transform: translate(-50%, -50%);
			 background: #ffffff;
		 }
     .searchbox54 .avatar img{
			 /*width: 53px;*/
			 /*height: 53px;*/
			 width: 32px;
			 height: 32px;
			 display: block
		 }
		 .searchbox54 .avatar {
			 width: 40px;
			 height: 40px;
			 /*background-color: #f2f2f2;*/
			 background-color: #ccc;
			 border-radius: 50%;
			 margin-left: 5px;
			 display: flex;
			 justify-content: center;
			 align-items: center;
		 }
     		.searchbox54{
			width: 100%;
			min-height: 72px;
			border-bottom:1px solid #E0E0E0;
			display: flex;
			font-size: 16px;
			color: #666666;
			padding-bottom: 20px;
		}
		.searchbox54>div:nth-of-type(1){
			width:17%;
			height: 100%;
			text-align: center;
			margin-top: 18px;
		}
		.searchbox54>div:nth-of-type(2){
			width:83%;
			margin-top: 20px;
		}
</style>
