<template>
    <div>
      <el-row :gutter="40">
        <el-col :span="12">
          <div style="max-height: 800px;overflow: auto;max-width: 800px">
            <video-upload :formData="formData.fun"/>
          </div>
        </el-col>
        <el-col :span="12">
          <div :style="{backgroundImage:`url(${background})`}" class="view">
          <!--视频显示-->
          <div class="view-content" v-if="!formData.fun.type && !type">
            <img :src="luolaUrl" class="luola"/>
            <img :src="luolaComing" class="luolacoming"/>
            <div v-for="data in formData.fun.video" class="video-block">
              <video :src="data.url" controls></video>
            </div>
            <div class="tips-block" v-if="formData.fun.change">
              <div class="active">视频教学</div>
              <div @click="type=true">音频教学</div>
            </div>
          </div>
          <!--音频显示-->
          <div class="view-content" v-if="formData.fun.type || type">
            <div v-if="formData.fun.audio[0]">
              <img :src="formData.fun.audio[0].image" class="audio-img">
              <audio :src="formData.fun.audio[0].url"></audio>
              <div class="title-block">
                <div class="title">
                  {{formData.fun.audio[0].title}}
                </div>
                <div class="tips">
                  {{formData.fun.audio[0].tips}}
                </div>
              </div>
              <div class="range-block">
                <input type="range" v-model="range" :style="{backgroundSize:`${range}% 100%`}"/>
                <div>
                  <img :src="playAudio" class="play-btn"/>
                </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 background from '../../assets/mould/funBlock.png'
  import videoUpload from '../textarea/videoUpload'
  import luolaUrl from '../../assets/mould/playLuola.png'
  import luolaComing from '../../assets/mould/luoLacoming.png'
  import playAudio from '../../assets/mould/playAudio.png'
    export default {
        name: "funBlock",
      props:[
        'formData'
      ],
      data(){
        return{
          background:background,
          luolaUrl:luolaUrl,
          luolaComing:luolaComing,
          playAudio:playAudio,
          type:false,
          range:0
        }
      },
      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: auto;
      border-radius: 8px;
      .audio-img{
        width: 188px;
        height: 188px;
        border-radius: 8px;
        display: block;
        margin: 40px auto 0 auto;
      }
      .range-block{
        text-align: center;
        width: 237px;
        margin: auto;
        margin-top: 11px;
        .play-btn{
          margin-top: 28px;
          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: 16px auto 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>