<template>
  <div>
    <el-row :gutter="40">
      <el-col :span="12">
        <el-form ref="form" label-width="120px">
          <el-form-item label="课程内容">
            <el-input v-model="formData.content.tips.content"></el-input>
          </el-form-item>
          <el-form-item label="title1">
            <el-input rows="4" v-model="formData.content.tips.title1"></el-input>
          </el-form-item>
          <el-form-item label="title1-内容">
            <el-input rows="4" type="textarea" v-model="formData.content.tips.title1_content"></el-input>
          </el-form-item>
          <el-form-item label="title2">
            <el-input rows="4" v-model="formData.content.tips.title2"></el-input>
          </el-form-item>
          <el-form-item label="title2-内容">
            <el-input type="textarea" rows="4" v-model="formData.content.tips.title2_content"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div class="view" :style="{backgroundImage:`url(${background})`}">
          <div class="title">
            {{formData.title}}
          </div>
          <div class="lessonContent">
            {{formData.content.tips.content}}
          </div>
          <div class="tips title1">
            {{formData.content.tips.title1}}
          </div>
          <div class="title-content">
            <ul>
              <li v-for="data in splitContent">{{data}}</li>
            </ul>
          </div>
          <div class="tips title2">
            {{formData.content.tips.title2}}
          </div>
          <div class="title-content title2">
            {{formData.content.tips.title2_content}}
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import background from '../../assets/mould/lessonContentBGI.png'
  export default {
    name: "lessonContent",
    props:[
      'formData'
    ],
    computed:{
      splitContent(){
        let arr = [];
        if(this.formData.content.tips.title1_content){
           arr = this.formData.content.tips.title1_content.split('\n');
        }
        return arr
      },
    },
    data(){
      return{
        background:background
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .view{
    width: 275px;
    height: 447px;
    background-size: 100% 100%;
    padding: 97px 49px 93px 51px;
    margin: auto;
    .title{
      width:235px;
      font-size:24px;
      margin: 36px auto 16px;
      text-align: center;
      font-family:Helvetica-Bold;
      font-weight:bold;
      color:rgba(255,255,255,1);
      line-height:26px;
      height: 52px;
      overflow: hidden;
    }
    .lessonContent{
      margin:8px auto;
      font-size:16px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(255,255,255,1);
      text-align: center;
      line-height:22px;
      width: 83px;
      padding: 7px 5px;
      background: rgba(51,51,51,0.2);
      border-radius: 4px;
      height: 22px;
    }
    .tips{
      height:20px;
      width: fit-content;
      margin: 12px auto 10px auto;
      font-size:16px;
      font-family:PingFangSC-Semibold;
      font-weight:600;
      color:rgba(145,237,250,1);
      line-height:22px;
      display: block;
      border-radius: 1000px;
      padding: 3px 18px;
      border: 2px solid #91EDFA;
      &.title1{
        margin-top: 55px;
      }
    }
    .title-content{
      word-break:break-all;
      padding: 0 18px;
      font-size:12px;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(136,136,136,1);
      line-height:17px;
      &.title2{
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(102,102,102,1);
        line-height:20px;
      }
      ul{
        margin: 0;
        padding: 0;
        font-size:14px;
        height:58px;
        overflow: hidden;
        margin-bottom: 14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(102,102,102,1);
        line-height:20px;
        list-style-type:none;
        &:after{
          content: '';
          display: block;
          clear: both;
        }
        li{
          width: 50%;
          float: left;
        }
      }
    }
  }
</style>