<template>
  <div>
     <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="{ padding: '0px', 'min-height': '600px' }">
            <el-row class="detail">
              <el-col :span="18">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="课件" name="courseware">
                    <div>
                      <div class="courseware-div" v-if="enrollStutas == 1">
                        <img :src="`${webBaseUrl}/images/course.png`" class="courseware-img" />
                        <el-button type="warning" @click="enroll" class="courseware-enroll-btn">报名后即可开始学习！</el-button>
                      </div>
                      <div class="courseware-div" v-else>
                        <video :src="`${webBaseUrl}/temp/video.mp4`" controls controlslist="nodownload" style="width: 100%; height: 100%; object-fit: fill" @ended="videoEnd"></video>
                        <div class="video-div" v-if="videoEnded">
                          <div class="good">
                            <div>
                              <svg-icon icon-class="like"></svg-icon>
                              赞
                            </div>
                            <div>
                              <svg-icon icon-class="like"></svg-icon>
                              踩
                            </div>
                            <!-- <el-link>
                              <i class="el-icon-thumb"></i>
                              赞
                            </el-link>
                            <el-link>
                              <i class="el-icon-thumb" style="transform: rotate(-180deg);"></i>
                              踩
                            </el-link> -->
                          </div>
                          <div class="score">
                            <el-rate v-model="courseRate" :max="5" :allow-half="true" show-score text-color="#ff9900" score-template="{value}"></el-rate>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="作业" name="homework">
                    <div>
                      <div class="homework-div">
                        <div>
                          <div class="homework-title">名称</div>
                          <div class="homework-content">京东方质量奖导读-课程作业</div>
                        </div>
                        <div>
                          <div class="homework-title">内容</div>
                          <div class="homework-content">作业内容包含图文</div>
                        </div>
                        <div>
                          <div class="homework-title">附件</div>
                          <div class="homework-content" style="color: blue">课程附件.doc</div>
                        </div>
                        <div>
                          <div class="homework-title">截止时间</div>
                          <div class="homework-content">2020-02-10 10:00</div>
                        </div>
                        <div v-if="!homeworkUpload">
                          <div class="homework-title">作业内容</div>
                          <div class="homework-content"><textarea readonly :rows="2" placeholder="请输入作业内容(限255个字)" style="width: 100%;outline: 0;"></textarea></div>
                        </div>
                        <div v-else>
                          <div class="homework-title">作业内容</div>
                          <div class="homework-content">作业作答内容</div>
                        </div>
                        <!-- <div v-if="!homeworkUpload">
                          <div class="homework-title">上传作业</div>
                          <div class="homework-content"><el-button type="text" icon="el-icon-upload">上传作业</el-button></div>
                        </div> -->
                        <div v-else>
                          <div class="homework-title">作业附件</div>
                          <div class="homework-content" style="color: blue">作业附件.doc</div>
                        </div>
                        <!-- <div><el-button type="primary" @click="homeworkUpload = true">提交</el-button></div> -->
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="考试" name="test">
                    <div>
                      <div class="test-div">
                        <div v-if="!testStart">
                          <div>
                            <div class="test-info">名称:京东方质量奖导读-考试</div>
                            <div class="test-info">考试时长：60分钟&emsp;&emsp;&emsp;&emsp;尝试次数：不限制</div>
                            <div class="test-info">评分方式：最高一次&emsp;&emsp;&emsp;&emsp;及格线：60%</div>
                          </div>
                          <!-- <div style="text-align: center; margin-bottom: 15px"><el-button type="primary" @click="testStart = true">开始考试</el-button></div> -->
                          <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="date" label="完成时间" align="center"></el-table-column>
                            <el-table-column prop="time" label="用时" width="180" align="center"></el-table-column>
                            <el-table-column prop="score" label="成绩" width="180" align="center"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="100" align="center">
                              <template slot-scope="scope">
                                <el-button type="text" >查看试卷</el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                        <div v-else>
                          <div>
                            <div class="test-info">剩余时间：倒计时共1题&emsp;&emsp;&emsp;&emsp;已完成0题</div>
                            <div class="test-info">1.【单选题】程序的三种基本结构是（）</div>
                            <div class="test-info"><el-radio v-model="testRadio" label="1">过程子、程序、分程序</el-radio></div>
                            <div class="test-info"><el-radio v-model="testRadio" label="2">顺序、选择、循环</el-radio></div>
                            <div class="test-info"><el-radio v-model="testRadio" label="3">递归、堆栈、队列</el-radio></div>
                            <div class="test-info"><el-radio v-model="testRadio" label="4">调用、返回、转移</el-radio></div>
                          </div>
                          <div style="text-align: center; margin-bottom: 15px"><el-button type="primary" @click="testStart = false">提交</el-button></div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="评估" name="assess">
                    <div>
                      <div class="assess-div">
                        <div>
                          <div class="assess-info" style="text-align: center">京东方大学课程评估V2.0</div>
                          <div class="assess-info">课程满意度计算方式：权重配置；</div>
                          <div class="assess-info">满意度：（问题1）*80%+（问题2）*10%+（问题3）*10%</div>
                          <hr />
                          <div class="assess-info">1.问题：您觉得课程对工作有帮助、启发吗？</div>
                          <div class="assess-info" style="height: 20px">
                            <span style="float: left">完全没用</span>
                            <span style="float: right">非常有帮助/启发</span>
                          </div>
                          <div class="assess-info">
                            <el-radio-group v-model="assessRadio1" class="assessRadio1">
                              <el-radio-button label="1">1</el-radio-button>
                              <el-radio-button label="2">2</el-radio-button>
                              <el-radio-button label="3">3</el-radio-button>
                              <el-radio-button label="4">4</el-radio-button>
                              <el-radio-button label="5">5</el-radio-button>
                              <el-radio-button label="6">6</el-radio-button>
                              <el-radio-button label="7">7</el-radio-button>
                              <el-radio-button label="8">8</el-radio-button>
                              <el-radio-button label="9">9</el-radio-button>
                              <el-radio-button label="10">10</el-radio-button>
                            </el-radio-group>
                          </div>
                          <div class="assess-info">2.问题：您愿意推荐其他同事来上这门课吗？</div>
                          <div class="assess-info" style="height: 20px">
                            <span style="float: left">不愿意</span>
                            <span style="float: right">非常愿意</span>
                          </div>
                          <div class="assess-info">
                            <el-radio-group v-model="assessRadio2" class="assessRadio1">
                              <el-radio-button label="1">1</el-radio-button>
                              <el-radio-button label="2">2</el-radio-button>
                              <el-radio-button label="3">3</el-radio-button>
                              <el-radio-button label="4">4</el-radio-button>
                              <el-radio-button label="5">5</el-radio-button>
                              <el-radio-button label="6">6</el-radio-button>
                              <el-radio-button label="7">7</el-radio-button>
                              <el-radio-button label="8">8</el-radio-button>
                              <el-radio-button label="9">9</el-radio-button>
                              <el-radio-button label="10">10</el-radio-button>
                            </el-radio-group>
                          </div>
                          <div class="assess-info">3.问题：您愿意参加该教师开设的其他课程吗？</div>
                          <div class="assess-info" style="height: 20px">
                            <span style="float: left">不愿意</span>
                            <span style="float: right">非常愿意</span>
                          </div>
                          <div class="assess-info">
                            <el-radio-group v-model="assessRadio3" class="assessRadio1">
                              <el-radio-button label="1">1</el-radio-button>
                              <el-radio-button label="2">2</el-radio-button>
                              <el-radio-button label="3">3</el-radio-button>
                              <el-radio-button label="4">4</el-radio-button>
                              <el-radio-button label="5">5</el-radio-button>
                              <el-radio-button label="6">6</el-radio-button>
                              <el-radio-button label="7">7</el-radio-button>
                              <el-radio-button label="8">8</el-radio-button>
                              <el-radio-button label="9">9</el-radio-button>
                              <el-radio-button label="10">10</el-radio-button>
                            </el-radio-group>
                          </div>
                          <div class="assess-info">3.问答题：学员之声（写下您想说的话）</div>
                          <div class="assess-info" v-if="!assessSubmit"><textarea :rows="4" style="width: 100%;outline: 0;" readonly placeholder="我的回答是...(限255字以内)"></textarea></div>
                          <div class="assess-info" v-else>目前什么都好，没有什么建议。</div>
                        </div>
                        <!-- <div style="text-align: center; margin-bottom: 15px" v-if="!assessSubmit"><el-button type="primary" @click="assessSubmitFun">提交</el-button></div> -->
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
              <el-col :span="6" class="cont">
                  <div class="study-count">资源归属: 生产技术中心</div>
                <!-- <div class="title">京东方质量奖导读</div> -->
                <div class="course-info-tools-btns"><interactBar type="course" :views="false" :comments="false"></interactBar>
					<span style="color: #f8a114;font-size: 36px;">5</span>
					<span style="font-size: 14px;color: #787878;">分</span>
				</div>
                <div class="label"><el-tag class="label-item" effect="plain">了解公司</el-tag></div>
                <div class="label">
                  <el-tag class="label-item" effect="plain">部长</el-tag>
                  <el-tag class="label-item" effect="plain">中心长</el-tag>
                </div>
                <div class="keyword"><el-tag class="label-item" effect="plain">质量</el-tag></div>
                <!--资源归属是一共有三级，这里只显示三级-->

                <div class="study-count">
                  学习人数
                  <span class="num">11</span>
                  人
                </div>
                <!-- <div class="btn-div">
                  <el-button type="primary" v-if="enrollStutas == 1" @click="enroll">立即报名</el-button>
                  <el-button type="primary" v-else>已报名</el-button>
                </div> -->
                <!-- <div class="qr-code">
                  <img :src="`${webBaseUrl}/temp/qr-code.png`" />
                  <div>手机扫码观看</div>
                </div>
                <div class="view-summary"><el-button type="text" @click="dialogVisible = true">查看课程简介</el-button></div> -->
              </el-col>
              <!-- 11 -->
            </el-row>
          </el-card>
        </el-col>
      </el-row>
  </div>
</template>

<script>
  import interactBar from '@/components/Portal/interactBar.vue';
  import { mapGetters } from 'vuex';
import portalHeader from '@/components/PortalHeader.vue';
import portalFooter from '@/components/PortalFooter.vue';
// import interactBar from '@/components/Portal/interactBar.vue';
  export default {
    name: 'articleItems',
    props: {
      items: { //name,
        type: Array,
        default:()=>[]
      },
      remove:{
        type: Boolean,
        default:false
      }
    },
    data(){
      return {
            assessSubmit: false,
             tableData: [
        {
          date: '2022-10-10 08:20:30',
          time: '8秒',
          score: '100分'
        },
        {
          date: '2022-10-9 08:20:30',
          time: '3分钟',
          score: '80分'
        },
        {
          date: '2022-10-8 08:20:30',
          time: '10分钟',
          score: '80分'
        },
        {
          date: '2022-10-7 08:20:30',
          time: '15分钟',
          score: '80分'
        }
      ],
         props: { name: '', type: '' },
      micList: [{ name: '李玉冰', content: '教师介绍' }, { name: '程萌', content: '教师介绍' }],
      activeName: 'courseware',
      enrollStutas: 1, // 1 :未报名，2:已报名
      dialogVisible: false,
      homeworkUpload: false,
      assessRadio1: null,
      assessRadio2: null,
      assessRadio3: null,
      assessSubmit: false,
      testStart: false,
          activeName: 'courseware',

      }
    },
    components:{
      interactBar
    },
    mounted() {

    },
    methods:{
      enroll() {
          this.$message({ type: 'info', message: '报名成功', offset: 250 });
          this.enrollStutas = 2;
        },
          assessSubmitFun() {
      this.assessSubmit = true;
      this.assessRadio1 = 3;
      this.assessRadio2 = 1;
    },
     videoEnd() {
      this.videoEnded = true;
    }
    }
  }
</script>

<style lang="scss" scoped>
  .breadname {
  margin-bottom: 15px;
  font-size: 18px;
}
.detail {
  background-color: #fff;
  padding: 5px 20px 10px 20px;
  .courseware-div {
    border: 1px solid;
    min-height: 100px;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    position: relative;
    .courseware-img {
      width: 100%;
      vertical-align: middle;
    }
    .courseware-enroll-btn {
      position: absolute;
      left: 50%;
      top: 68%;
      transform: translate(-50%,-50%);
    }
    .video-div {
      position: absolute;
      z-index: 999999999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(101, 101, 101, 0.9);
      .good {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 200px;
        div {
          line-height: 1;
          margin: 0 15px;
          .svg-icon{
            width: 30px;
            height: 30px;
          }
        }
        div:nth-of-type(2){
          .svg-icon{
            transform: scaleX(-1);
            transform: rotate(180deg);
          }
        }
        // margin-bottom: 50px;
        // line-height: 20px;
        // .el-link{
        //   font-size: 30px;
        //   color: #70a5f4;
        //   margin: 0 30px;
        // }
      }
      .score {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .homework-div {
    border: 1px solid;
    min-height: 500px;
    padding: 20px;
    font-size: 14px;
    .homework-title {
      font-weight: 600;
      margin-bottom: 10px;
    }
    .homework-content {
      color: #666;
      margin-bottom: 10px;
    }
  }
  .test-div {
    border: 1px solid;
    min-height: 500px;
    padding: 20px;
    font-size: 14px;
    .test-info {
      margin-bottom: 10px;
    }
  }
  .assess-div {
    border: 1px solid;
    min-height: 500px;
    padding: 20px;
    font-size: 14px;
    .assess-info {
      margin-bottom: 10px;
    }
  }
  .cont {
    padding: 25px;
    height: 540px;
    .title {
      font-size: 22px;
      font-weight: 600;
      line-height: 50px;
    }
    .course-info-tools-btns {
      ::v-deep .interact-bar-btns {
        justify-content: flex-start !important;
      }
      .course-info-tools-btn {
        margin: 0 15px 0 0;
      }
      margin-bottom: 15px;
    }
    .label {
      margin-bottom: 15px;
      .label-item {
        margin-right: 5px;
      }
    }
    .keyword {
      margin-bottom: 15px;
      .label-item {
        margin-right: 5px;
      }
    }
    .study-count {
      .num {
        color: #000;
        font-size: 14px;
        padding: 0 10px;
      }
      margin-bottom: 15px;
    }
    .btn-div {
      margin-top: 30px;
    }
    .qr-code {
      margin-top: 5px;
      margin-bottom: 10px;
      img {
        width: 120px;
        height: 120px;
      }
      div {
        width: 120px;
        text-align: center;
        font-size: 14px;
      }
    }
    .view-summary {
      position: absolute;
      margin-bottom: 10px;
      margin-left: 18px;
    }
  }
}
.summary-div {
  .summary-content {
    font-size: 14px;
    line-height: 25px;
  }
}
.info {
  background-color: #fff;
  margin-top: 20px;
  padding: 0 10px;
  .content {
    color: #666;
    line-height: 25px;
    text-indent: 2em;
    padding: 5px 10px;
  }
  .pinglun-div {
    background-color: #fff;
    padding: 0px 20px 10px 20px;
    .title {
      font-size: 16px;
      font-weight: 600;
      line-height: 50px;
      border-bottom: 1px solid #dfdfdf;
      .tip {
        color: #666;
        font-size: 12px;
        margin: 0 10px;
      }
    }
    .submit-div {
      margin: 15px 0;
    }
    .bottom {
      text-align: right;
    }

    .data {
      margin-top: 10px;
      background-color: #fff;
      padding: 5px 20px 10px 20px;
      .data-item {
        border-bottom: 1px solid #dfdfdf;
        margin-top: 10px;
        .top {
          font-size: 18px;
          font-weight: 600;
          span {
            font-size: 14px;
            color: #666;
            font-weight: normal;
          }
        }
        .text {
          margin: 15px 0 5px 0;
          padding-left: 40px;
          line-height: 35px;
        }
        .huifu {
          padding-left: 40px;
          padding-bottom: 10px;
          border-bottom: 1px solid #dfdfdf;
        }
        .result-div {
          padding-left: 40px;
          padding-top: 10px;
          .top {
            font-size: 16px;
          }
        }
        .up-div {
          padding: 0 15px;
          .up-btn {
            padding: 8px 20px;
            color: #000;
          }
        }
        img {
          margin-right: 10px;
          width: 30px;
          border: 1px solid #eee;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
    }
  }
}
.teachers {
  background-color: #fff;
  margin-top: 20px;
  .top {
    font-size: 16px;
    font-weight: 600;
    line-height: 50px;
  }
  .tea-logo {
    color: #0262ee;
    font-size: 24px;
    padding: 5px;
  }
  .list-item {
    padding: 5px 10px;
    .top {
      display: inline-block;
      width: 20%;
    }
    .image {
      width: 50px;
      border-radius: 50%;
      border: 1px solid #eee;
    }
    .an-div {
      text-align: left;
      .tip {
        line-height: 35px;
        color: #666;
      }
    }
    .text {
      display: inline-block;
      width: 80%;
      .name {
        line-height: 40px;
      }
      .content {
        line-height: 20px;
      }
    }
  }
  .list-item:not(:last-child) {
    border-bottom: 1px solid #dfdfdf;
  }
}

</style>
