<template>
  <div class="box-center">
    <div class="topbox">
      <div class="topzuo">
          <div class="title" style="display: flex;">
            <div style="flex:1;">
              <span class="span1">首次到访</span>
              <span class="span2">无效录音｜未标注｜反面案例</span>
            </div>
            <div style="width: 120px;display: flex;color:#2671E2;">
                <div>加精</div>
                <div style="margin-left: 20px;">接待标记</div>
            </div>
          </div>
          <div class="title" style="margin-top: 6px;">
            <span class="span3">宋先生</span>
            <span class="span2">2021-10-01 10:00:00</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;">李先生</span>
        </div>
        <div style="display: flex;font-size:15px;margin-top: 8px;">
          <div style="width:40%;">
            <div style="margin-top: 6px;">负责顾问：李先生</div>
            <div style="margin-top: 6px;">接待时长：155min</div>
            <div style="margin-top: 6px;">客户等级：A</div>
          </div>
          <div style="width:60%;">
              <div style="margin-top: 6px;">到访次数：3次</div>
              <div style="margin-top: 6px;">最近到访：2021-10-01 14:00:00</div>
              <div style="margin-top: 6px;">客户阶段：初访</div>
          </div>
        </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;">
                  <div class="input" >请输入关键词</div>
                  <div class="input2">搜索</div>
                </div>
              </div>
              <div style="width:100px;display: flex; justify-content: center;align-items: center;">
                <div class="searchbutt">文本优化</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 class="headpade">
                  <div class="biaoji" @click="biaoji()">标记</div>
                </div>
              </div>
              <div style="width: 100%">
                <div class="center2" style="width: 100%;height:410px;overflow-y: scroll;">
                    <div class="text" :data-bg="item.bg" :data-ed="item.ed"
                      v-for="(item,index) in list" :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>
                      <div class="content123"  style="cursor:pointer;">
                        <div v-html="item.onebest"></div>
                      </div>
                    </div>
                  </div>
              </div>

          </div>
        </div>
        <div class="topzuo-you">
            <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 style="flex: 1;font-size: 16px;color: #2671E2;text-indent:70%;">校准</div>
            </div>
            <div class="pingfenbox" >
              <div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)">
                系统分析
              </div>
              <div :class="{ activecllasscet: zhixingcenterindex == 1 }" @click="recordclick(1)">人工校准</div>
            </div>

            <div>
                <div class="intentionBox">
                  <div  class="intentionName">置业需求</div>
                  <div class="intentionChe">
                    <div>投资</div>
                    <div>管家</div>
                    <div>婚房</div>
                    <div>山水相逢</div>
                    <div>青山不改</div>
                  </div>
                </div>
            </div>

        </div>
      </div>
      <div class="topyou">
          <div class="pingfenbox" >
            <div :class="{ activecllasscet: zhixingcenterindex == 0 }" @click="recordclick(0)">销讲总执行率10%</div>
            <div :class="{ activecllasscet: zhixingcenterindex == 1 }" @click="recordclick(1)">禁忌执行</div>
          </div>
          <div>
            <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>

          <div>
            <div class="zxlBox">
              <div class="zxlLev1">
                <div style="width:60%;" class="zxlLev1box">超市 29%</div>
                <div style="width:40%;">
                  <div style="width:60px; text-align: center;"> <i style=" font-size: 18px;" class="el-icon-arrow-down"></i> </div>
                </div>
              </div>
              <div class="zxlLev2">
                <div style="width:60%;" class="zxlLev2tit">蔬菜</div>
                <div style="width:40%;display: flex;align-items: center;">
                  <div class="zxlzx">执行</div>
                </div>
              </div>
            </div>
          </div>

      </div>
    </div>

  </div>
</template>

<script>
import "aplayer/dist/APlayer.min.css";
import APlayer from "aplayer";
export default {
  data() {
    return {
      aplayer: null,
      aplayerSpeedNum: "1", //点击字体更换
      arr: [],
      aplayerId: 0,
      aplayerLength: 0,
      audioList: [
        {
          name: "音频1",
          url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3",
        },
        {
          name: "音频2",
          url: "https://static.quhouse.com/record/dev/2021-09-26/1632648911706-56129.mp3",
        },
      ],
      tablist:[ {name:'全部',}, {name:'A',}, {name:'b',}, {name:'c',},{name:'c',},{name:'c',},{name:'c',},],
      roleindex:0,
      zhixingcenterindex:0,
      list:[]

    };
  },
  mounted() {
    this.bofangchushihua();
    this.init()
  },
  methods: {
    init(){
         this.$api.http.findByCusIdcusId({cusId:'e9d0e3b6a34f41abb3691d89b83fe9e5'}).then((res) => {
           this.list=JSON.parse(res.data[0].audioContent)
           console.log(this.list)
         })
    },



    recordclick(i){
      this.zhixingcenterindex=i;
    },
    tapspagek(i){
      this.roleindex=i;
    },
    bofangchushihua() {
      var that = this;
      this.$nextTick(() => {
        this.aplayer = new APlayer({
          container: document.getElementById("aplayer"),
          theme: "#2671E2",
          audio: [
            {
              url: "https://static.quhouse.com/audio/d7879fbcdfcc436189ce79e643e0aeb8.mp3",
              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);
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
  background: #FFFFFF;
}


// 播放
.center2{
  padding-left: 10px;
  padding-right: 10px;
}
.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;
			/*background: rgb(79,194,103);*/
			border-radius:8px;
			margin: 0 12px;
			line-height: 1.5;
			max-width: 365px;
		}



		 .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;
		 }



//指标执行率
.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 ;
    }
  }
  .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;
}
.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;
}


.topbox{
  width: 100%;
  display: flex;
  .topzuo{
    width:75% ;
    min-width: 800px;
    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: 380px;
    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 - 150px);
  .topzuo{
    width:75% ;
    min-width: 800px;
    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: 380px;
    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;
	}


</style>
