<template>
  <div class="box-center">
    <div class="topbox">
      <div class="topzuo">
          <div class="title">
            <span class="span1">首次到访</span>
            <span class="span2">无效录音｜未标注｜反面案例</span>
          </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">
              <input class="input" placeholder="请输入关键词" type="text">
              <div class="searchbutt">搜索</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>
        </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: 15px;color: #333333;text-indent:5%;">客户意向</div>
              <div style="flex: 1;font-size: 15px;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>
      <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="flex: 1;font-size: 15px;color: #333333;text-indent:23%;">指标</div>
              <div style="flex: 1;font-size: 15px;color: #333333;text-indent:23%;">执行率</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',},],
      roleindex:0,
      zhixingcenterindex:0,


    };
  },
  mounted() {
    this.bofangchushihua();
  },
  methods: {
    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;
}
.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;
  }
}
.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;
          .input{
            width: 80%;
            height: 32px;
            line-height: 32px;
            background: #FFFFFF;
            border-radius: 2px;
            text-indent: 6px;
            border: 1px solid #E0E0E0;
          }
          .searchbutt{
            width: 68px;
            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;
		text-indent: 20px;
	}
	.activecllasscet{
		color: #2671E2;
	}


</style>
