<template>
  <div>
    <!--在线课录播课审核-->

    <el-row :gutter="10">
      <el-col :span="18" v-show="type === 0">
          <div class="player" style="min-height: 473px;border: 1px solid #d0d0d0;background-color: #FFFFFF;padding-top: 10px;">
            <!--课程基本信息-->
            <div>
              <div v-if="resType == 0" style="position: relative;">
                <el-form label-width="80px" size="mini" :rules="rules">
                  <el-form-item label="名称" prop="name"><template> 历史111与文化 </template></el-form-item>
                  <el-form-item label="分类" prop="kind"><template> 集团级、B1 </template></el-form-item>
                  <el-form-item label="资源归属" prop="location"><template> 集团级、B1 </template></el-form-item>
                  <el-form-item  label="封面" prop="face"><template>3333.jpg</template></el-form-item>
                  <el-form-item label="目标人群" prop="aim"><template> 管理员</template></el-form-item>
                  <el-form-item label="课程价值" prop="courseValue"><template> 有效沟通</template></el-form-item>
                  <el-form-item  label="课程介绍" prop="description"><template> 有效沟通 </template></el-form-item>
                  <el-form-item label="标签" prop="tag"><template> 集团级、B1 </template></el-form-item>
                  <el-form-item  label="关键字" prop="keyword"><template> 集团级、B1 </template></el-form-item>
                  <el-form-item  label="观看设置" prop="setting">
                    <template>pc端观看</template>
                  </el-form-item>
                  <el-form-item label="授课教师" prop="teacher"><template>王明宇 </template></el-form-item>
                  <el-form-item label="开放权限" prop="power"><template> 集团级</template></el-form-item>
                  <el-form-item label="课程来源" prop="fromSource">
                    <template> 外部 </template>
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="resType == 1" style="position: relative;">
                <video :src="`${webBaseUrl}/temp/video.mp4`" width="100%" controls controlslist="nodownload"
                        style="width: 100%; height: 100%; object-fit: fill"></video>
              </div>
              <div v-if="resType == 2"><img :src="`${webBaseUrl}/temp/index/image_02.png`" width="100%" /></div>
              <div v-if="resType == 3"><img :src="`${webBaseUrl}/temp/doc.png`" width="100%" /></div>
              <div v-if="resType == 4"><img :src="`${webBaseUrl}/temp/index/image_02.png`" width="100%" /></div>
              <div v-if="resType == 5"><img :src="`${webBaseUrl}/temp/index/image_02.png`" width="100%" /></div>
              <div v-if="resType == 6">
                <el-form label-width="80px" size="mini" >
                  <el-form-item label="名称">京东方质量奖导读-课程作业</el-form-item>
                  <el-form-item label="内容">作业内容包含图文</el-form-item>
                  <el-form-item label="附件">课程附件.doc</el-form-item>
                  <el-form-item label="截止时间">2020-04-10 10:00</el-form-item>
                </el-form>
              </div>
              <div v-if="resType == 7">
                <el-form label-width="80px" size="mini" >
                  <el-form-item label="名称">京东方质量奖导读-考试</el-form-item>
                  <el-form-item label="考试时长">60分钟</el-form-item>
                  <el-form-item label="尝试次数">不限制</el-form-item>
                  <el-form-item label="评分方式">最高一次</el-form-item>
                  <el-form-item label="及格线">60%</el-form-item>
                  <el-form-item label=""> <el-link>查看试题</el-link>  </el-form-item>
                </el-form>
              </div>
              <div v-if="resType == 8" style="padding:5px">
                <p style="margin: 0;text-align: center;">问卷名称</p>
                <el-table border :data="tableData">
                  <el-table-column width="500px" prop="content" label="问题">
                    <template slot-scope="scope">
                      <p>{{ scope.row.content }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="high" center label="高">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.row.high"></el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="middle" center label="中">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.row.middle"></el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="low" center label="低">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.row.low"></el-radio>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
      </el-col>
      <el-col :span="18" v-show="type === 1">
           <div class="grid-info">
            <div class="grid-item">
              <p class="item-title">目录</p>
              <p>名称：历史与文化</p>
              <p>分类：通用力</p>
              <p>资源归属：集团级、B1</p>
              <p>封面：333.jpg</p>
              <p>目标人群: 领导层</p>
              <p>课程价值：实现高效沟通</p>
              <p>课程介绍：实现高效沟通</p>
              <p>标签：实现高效沟通</p>
              <p>关键字：实现高效沟通</p>
              <p>观看设置：pc端可见</p>
              <p>授课教师：王明宇</p>
              <p>开放权限：组织部</p>
              <p>课程来源：微课</p>
            </div>
            <div class="grid-item">
              <p class="item-title">修改后</p>
              <p>历史与文化</p>
              <p>通用力</p>
              <p>集团级、B1</p>
              <p>333.jpg</p>
              <p>领导层</p>
              <p>实现高效沟通</p>
              <p>实现高效沟通</p>
              <p>实现高效沟通</p>
              <p>实现高效沟通</p>
              <p>pc端可见</p>
              <p>王明宇</p>
              <p>组织部</p>
              <p>微课</p>
            </div>
            <div class="grid-item">
              <p class="item-title">修改前</p>
              <p>历史与前行</p>
              <p>专用力</p>
              <p>集团级、B2</p>
              <p>3444.jpg</p>
              <p>领导层</p>
              <p>实现高效沟通</p>
              <p>实现高效沟通</p>
              <p>实现高效沟通</p>
              <p>实现高效沟通</p>
              <p>pc端可见</p>
              <p>王明宇</p>
              <p>组织部</p>
              <p>微课</p>
            </div>
        </div>
      </el-col>
      <el-col :span="6">
          <div><el-button  @click="resType = 0;type =0" type="info">课程基本信息</el-button> 
               <el-button  @click="type =1" type="info">修改记录</el-button>
          </div>
          <div style="padding: 5px;">课程内容目录</div>
              <div style="height: 650px;overflow: auto;">
                <div class="catalog">
                  <el-collapse class="catalog-row" size="mini" v-model="activeNames" @change="handleChange">
                    <el-collapse-item v-for="(item, index) in collapseList.children" :key="index" :name="index">
                      <template slot="title">
                        <!-- <i class="el-icon-video-camera"></i> -->
                        <span style="font-size:12px">{{ item.title }}</span>
                      </template>
                      <ul>
                        <li @click="showRes(ele.format)" v-for="(ele, i) in item.children" :key="i" class="catalog-cell">
                          <span style="font-size:12px">{{formatChoose(ele.format) }}</span>{{ ele.title }}
                        </li>
                      </ul>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        activeName:'catalog',
        resType:0,
        type: 0,
        info:{
            onlyRequired: false,
            dlgShow: false,
            fileType: '',
            shebei:[]
        },
        rules: {
          name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
          kind: [{ required: true, message: '请选择课程分类', trigger: 'change' }],
          location: [{ required: true, message: '请选择资源归属', trigger: 'change' }],
          aim: [{ required: true, message: '请输入目标人群', trigger: 'blur' }],
          courseValue:[{ required: true, message: '请输入课程价值', trigger: 'blur' }],
          tag:[{ required: true, message: '请输入标签', trigger: 'blur' }],
          power:[{ required: true, message: '请输入开放权限', trigger: 'blur' }],
        },
        activeNames: [0, 1, 2, 3, 4],
        collapseList: {
          id: 1,
          title: '资金系统操作培训',
          children: [
            {
              title: '集团账户管理',
              status: 3,
              children: [
                {
                  title: '集团账户管理',
                  status: 3, //1代表未开始 2代表进行中 3代表已完成
                  format: 1, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
                  resource: '/temp/video.mp4',
                  timeLength: '1:30:00'
                }
              ]
            },
            {
              title: '接口管理',
              status: 2,
              children: [
                {
                  title: '接口管理',
                  status: 2, //1代表未开始 2代表进行中 3代表已完成
                  format: 2, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
                  resource: '',
                  timeLength: '00:30:00'
                }
              ]
            },
            {
              title: '付款管理',
              status: 1,
              children: [
                {
                  title: '付款管理',
                  status: 1, //1代表未开始 2代表进行中 3代表已完成
                  format: 3, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
                  resource: ''
                }
              ]
            },
            {
              title: '收款管理',
              status: 1,
              children: [
                {
                  title: '收款管理',
                  status: 1, //1代表未开始 2代表进行中 3代表已完成
                  format: 4, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
                  resource: ''
                }
              ]
            },
            {
              title: '投资管理',
              status: 1,
              children: [
                {
                  title: '可行性分析原则',
                  status: 1, //1代表未开始 2代表进行中 3代表已完成
                  format: 5, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
                  resource: ''
                },
                {
                  title: '结构平衡',
                  status: 1, //1代表未开始 2代表进行中 3代表已完成
                  format: 6, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接 6代表作业
                  resource: ''
                },
                {
                  title: '投资价值的波动',
                  status: 1, //1代表未开始 2代表进行中 3代表已完成
                  format: 7, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接 7代表考试
                  resource: ''
                },
                {
                  title: '资金系统操作评估',
                  status: 1, //1代表未开始 2代表进行中 3代表已完成
                  format: 8, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接 8代表评估
                  resource: ''
                }
              ]
            }
          ]
        }
      }
    },
    methods:{
      ctabChange(tab) {
        if(tab.name=='info'){
          this.activeName='catalog';
        }
      },
      showRes(r) {
        this.resType = r;
        this.type = 0;
      },
      handleChange(val) {
        console.log(val);
      },
      formatChoose(format) {
        let text = '';
        switch (format) {
          case 1: {
            text = '视频';
            break;
          }
          case 2: {
            text = '音频';
            break;
          }
          case 3: {
            text = '文档';
            break;
          }
          case 4: {
            text = '图文';
            break;
          }
          case 5: {
            text = '外部链接';
            break;
          }
          case 6: {
            text = '作业';
            break;
          }
          case 7: {
            text = '考试';
            break;
          }
          case 8: {
            text = '评估';
            break;
          }
        }
        return text;
      },
    }
  }
</script>

<style lang="scss" scoped>
 .grid-info{
    display: flex;
    padding: 0 20px;
    .grid-item{
      flex: 1;
      .item-one{
        font-size: 18px;
      }
      .item-title{
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
  .catalog {
    .catalog-row {
      margin: 0px;
      padding: 0px 10px 10px 10px;
      ul {
        padding: 0px;
        margin: 0px;
      }
      .catalog-cell {
        line-height: 32px;
        cursor: pointer;
        list-style: none;
        margin: 0px;
        padding-left: 20px;
        color: #5c5c5c;
      }
    }
  }
</style>
