<template>
  <div>
    <el-row :gutter="40">
      <el-col :span="12">
        <div style="max-height: 800px;overflow: auto;max-width: 800px">
          <video-upload :formData="formData.play"/>
        </div>
      </el-col>
      <el-col :span="12">
        <div :style="{backgroundImage:`url(${background})`}" class="view">
          <!--视频显示-->
          <div class="view-content" v-if="!formData.play.type && !type && !age">
            <img :src="luolaUrl" class="luola"/>
            <img :src="luolaComing" class="luolacoming"/>
            <div v-for="data in formData.play.video" class="video-block">
              <video :src="data.url" controls></video>
            </div>
            <div class="btn-block">
              <div class="change" v-if="formData.play.age" @click="age=true">
                0-3岁
                <i class="iconfont icon-zhankai1" style="font-size: 12px"></i>
              </div>
              <div class="tips-block" v-if="formData.play.change">
                <div class="active">视频教学</div>
                <div @click="type=true">音频教学</div>
              </div>
            </div>
          </div>
          <div class="view-content" v-if="!formData.play.type && !type && age">
            <img :src="luolaUrl" class="luola"/>
            <img :src="luolaComing" class="luolacoming"/>
            <div v-for="data in formData.play.video2" class="video-block">
              <video :src="data.url" controls></video>
            </div>
            <div class="btn-block">
              <div class="change" v-if="formData.play.age" @click="age=false">
                4-6岁
                <i class="iconfont icon-zhankai1" style="font-size: 12px"></i>
              </div>
              <div class="tips-block" v-if="formData.play.change2">
                <div class="active">视频教学</div>
                <div @click="type=true">音频教学</div>
              </div>
            </div>
          </div>
          <!--音频显示-->
          <div class="view-content" v-if="( formData.play.type || type )&& !age">
            <div v-if="formData.play.audio[0]">
              <img :src="formData.play.audio[0].image" class="audio-img">
              <audio :src="formData.play.audio[0].url"></audio>
              <div class="title-block">
                <div class="title">
                  {{formData.play.audio[0].title}}
                </div>
                <div class="tips">
                  {{formData.play.audio[0].tips}}
                </div>
              </div>
              <div class="range-block">
                <input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
                <div class="btn-block">
                  <img :src="listUrl"/>
                  <img :src="lastUrl"/>
                  <img :src="playAudio" class="play-btn"/>
                  <img :src="nextUrl"/>
                  <img :src="refUrl"/>
                </div>
              </div>
            </div>
            <div class="tips-block" v-if="formData.play.change">
              <div @click="type = false">视频教学</div>
              <div class="active">音频教学</div>
            </div>
          </div>
          <div class="view-content" v-if="( formData.play.type || type )&& age">
            <div v-if="formData.play.audio2[0]">
              <img :src="formData.play.audio2[0].image" class="audio-img">
              <audio :src="formData.play.audio2[0].url"></audio>
              <div class="title-block">
                <div class="title">
                  {{formData.play.audio2[0].title}}
                </div>
                <div class="tips">
                  {{formData.play.audio2[0].tips}}
                </div>
              </div>
              <div class="range-block">
                <input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
                <div class="btn-block">
                  <img :src="listUrl"/>
                  <img :src="lastUrl"/>
                  <img :src="playAudio" class="play-btn"/>
                  <img :src="nextUrl"/>
                  <img :src="refUrl"/>
                </div>
              </div>
            </div>
            <div class="tips-block" v-if="formData.play.change">
              <div @click="type = false">视频教学</div>
              <div class="active">音频教学</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import luolaUrl from '../../assets/mould/playLuola.png'
  import luolaComing from '../../assets/mould/luoLacoming.png'
  import background from '../../assets/mould/playBlock.png'
  import videoUpload from '../textarea/videoUpload'
  import playAudio from '../../assets/mould/playAudio.png'
  import lastUrl from '../../assets/mould/last.png'
  import nextUrl from '../../assets/mould/next.png'
  import listUrl from '../../assets/mould/list.png'
  import refUrl from '../../assets/mould/ref.png'
  export default {
    props:[
      'formData'
    ],
    name: "playBlock",
    data(){
      return{
        background:background,
        lastUrl:lastUrl,
        listUrl:listUrl,
        refUrl:refUrl,
        nextUrl:nextUrl,
        luolaUrl:luolaUrl,
        luolaComing:luolaComing,
        playAudio:playAudio,
        type:false,
        range:0,
        age:false,
      }
    },
    components:{
      videoUpload
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .view{
    width: 335px;
    height: 469px;
    background-size: 100% 100%;
    padding: 140px 20px 77px 20px;
    margin: auto;
    .view-content{
      background: white;
      padding: 10px;
      width: 315px;
      height: 459px;
      overflow-y: auto;
      overflow-x: hidden;
      border-radius: 8px;
      .audio-img{
        width: 188px;
        height: 188px;
        border-radius: 8px;
        display: block;
        margin: 40px auto 0 auto;
      }
      .btn-block{
        position: relative;
        margin-top: 16px;
      }
      .change{
        width: 72px;
        height: 28px;
        border-radius: 100px;
        position: absolute;
        text-align: center;
        line-height: 28px;
        font-size:12px;
        top: 0;
        left: 0;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(102,102,102,1);
        border: 1px solid #666666;
      }
      .range-block{
        text-align: center;
        width: 237px;
        margin: auto;
        margin-top: 11px;
        .btn-block{
          height: 40px;
          margin-top: 28px;
          line-height: 40px;
          img{
            width:16px ;
            vertical-align: middle;
            margin: 0 10px;
          }
          .play-btn{
            width: 40px;
          }
        }

        input[type=range] {
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          -webkit-appearance: none;
          background: -webkit-linear-gradient(#49E2A5, #49E2A5) no-repeat,#D8D8D8;
          background-size: 75% 100%;/*设置左右宽度比例*/
          display: flex;
          width: 100%;
          border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
        }
        input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
        }
        input[type=range]::-webkit-slider-runnable-track {
          height: 4px;
          border-radius: 2px ;
        }
        input[type=range]:focus {
          outline: none;
        }
        input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
          border-radius: 50%; /*外观设置为圆形*/
          height: 12px;
          width:  12px;
          margin-top: -4px; /*使滑块超出轨道部分的偏移量相等*/
          background: #49E2A5;
        }
      }
      .title-block{
        text-align: center;
        margin-top: 24px;
        .title{
          font-size:16px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(102,102,102,1);
          line-height:22px;
        }
        .tips{
          font-size:14px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
          line-height:20px;
        }
      }
      .luola{
        width: 70px;
        margin: 10px 0 0 20px;
      }
      .luolacoming{
        width: 135px;
        margin-left:42px ;
      }
      .video-block{
        width: 303px;
        padding: 8px;
        margin: auto;
        border: 1px solid #666666;
        border-radius: 12px;
        height: 171px;
        video{
          border-radius: 12px;
          width: 100%;
        }
      }
      .tips-block{
        border-radius: 1000px;
        width: 144px;
        margin: auto;
        border: 1px solid #40A9FF;
        height: 28px;
        line-height: 28px;
        &:after{
          content: '';
          display: block;
          clear: both;
        }
        div{
          float: left;
          font-size:12px;
          width: 50%;
          text-align: center;
          color: #cccccc;
          &.active{
            border-radius: 1000px;
            background: #40A9FF;
            color: #FFFFFF;
          }
        }
      }
    }
  }
</style>
