<template>
  <div class="app-warp">

    <div class="detail-structure">
      <el-page-header content="新增页面" @back="goBack"/>

      <div class="detail-container">
        <div class="level-title">
          <h1>课程基本信息</h1>
        </div>
        <div class="course_form">
          <el-form ref="form" label-width="110px">
            <el-form-item label="课程名称">
              <el-input maxlength="255" placeholder="这里输入课程名称..." title="课程名称"/>
            </el-form-item>
            <el-form-item label="培训类型">
              <div>
                <el-input maxlength="255" placeholder="这里输入课程名称..." title="培训类型"/>
              </div>
            </el-form-item>
            <el-form-item label="课程封面">
              <div>
                <el-input maxlength="255" placeholder="这里输入课程名称..." title="课程封面"/>
              </div>
            </el-form-item>
            <el-form-item label="培训级别">
              <div>
                <el-input maxlength="255" placeholder="这里输入课程名称..." title="课程封面"/>
              </div>
            </el-form-item>
            <el-form-item label="课程描述">
              <el-input rows="5" type="textarea" maxlength="255" placeholder="这里输入课程介绍..." title="课程介绍"/>
            </el-form-item>
          </el-form>
        </div>
        <div class="level-title">
          <h1>课程章节</h1>
        </div>
        <div class="course_warp">
          <div>
            <el-button type="primary"><svg-icon class-name="directoryo-icon" icon-class="directoryo" /> 一级目录样式</el-button>
            <el-button type="primary"><svg-icon class-name="directoryt-icon" icon-class="directoryt" /> 二级目录样式</el-button>
          </div>
          <div class="course_directory2">
            <div class="course_item">
              <div class="course_row">
                <div class="course_icon">
                  <i class="el-icon-caret-bottom"/>
                </div>
                <div class="course_number">1-1</div>
                <div class="course_play">
                  <i class="el-icon-video-camera"/>
                </div>
                <div class="course_input">
                  课程标题可替换文本
                </div>
                <div>
                  <el-button size="mini">删除</el-button>
                </div>
                <div>
                  <el-button size="mini">重命名</el-button>
                </div>
                <div>
                  <el-button size="mini">新增二级项</el-button>
                </div>
                <div>
                  <el-button size="mini">批量添加课件</el-button>
                </div>
              </div>
              <div class="course_subrow">
                <div class="course_icon">
                  <!-- <i class="el-icon-caret-bottom"/> -->
                </div>
                <div class="course_number">1-1</div>
                <div class="course_play">
                  <i class="el-icon-video-camera"/>
                </div>
                <div class="course_input">
                  课程标题可替换文本
                </div>
                <div>
                  <el-button size="mini">删除</el-button>
                </div>
                <div>
                  <el-button size="mini">重命名</el-button>
                </div>
                <div>
                  <el-button size="mini">新增二级项</el-button>
                </div>
                <div>
                  <el-button size="mini">批量添加课件</el-button>
                </div>
              </div>
            </div>
            <div class="course_item">
              <div class="course_row">
                <div class="course_icon">
                  <i class="el-icon-caret-bottom"/>
                </div>
                <div class="course_number">1-1</div>
                <div class="course_play">
                  <i class="el-icon-video-camera"/>
                </div>
                <div class="course_input">
                  课程标题可替换文本
                </div>
                <div>
                  <el-button size="mini">删除</el-button>
                </div>
                <div>
                  <el-button size="mini">重命名</el-button>
                </div>
                <div>
                  <el-button size="mini">新增二级项</el-button>
                </div>
                <div>
                  <el-button size="mini">批量添加课件</el-button>
                </div>
              </div>
            </div>
            <div class="course_item">
              <div class="course_row">
                <div class="course_icon">
                  <i class="el-icon-caret-bottom"/>
                </div>
                <div class="course_number">1-1</div>
                <div class="course_play">
                  <i class="el-icon-video-camera"/>
                </div>
                <div class="course_input">
                  课程标题可替换文本
                </div>
                <div>
                  <el-button size="mini">删除</el-button>
                </div>
                <div>
                  <el-button size="mini">重命名</el-button>
                </div>
                <div>
                  <el-button size="mini">新增二级项</el-button>
                </div>
                <div>
                  <el-button size="mini">批量添加课件</el-button>
                </div>
              </div>
            </div>
            <div class="course_item">
              <div class="course_row">
                <div class="course_icon">
                  <i class="el-icon-caret-right"/>
                </div>
                <div class="course_number">1-1</div>
                <div class="course_play">
                  <i class="el-icon-video-camera"/>
                </div>
                <div class="course_input">
                  课程标题可替换文本
                </div>
                <div>
                  <el-button size="mini">删除</el-button>
                </div>
                <div>
                  <el-button size="mini">重命名</el-button>
                </div>
                <div>
                  <el-button size="mini">新增二级项</el-button>
                </div>
                <div>
                  <el-button size="mini">批量添加课件</el-button>
                </div>
              </div>
            </div>
            <div class="course_item">
              <div class="course_row">
                <div class="course_icon">
                  <!-- <i class="el-icon-caret-bottom"/> -->
                </div>
                <div class="course_number">1-1</div>
                <div class="course_input">
                  <!-- 课程标题可替换文本 -->
                  <el-input maxlength="255" size="mini"/>
                </div>
                <div>
                  <el-button size="mini">删除</el-button>
                </div>
                <div>
                  <el-button size="mini">重命名</el-button>
                </div>
                <div>
                  <el-button size="mini">新增二级项</el-button>
                </div>
                <div>
                  <el-button size="mini">批量添加课件</el-button>
                </div>
              </div>
              <div class="course_subrow">
                <div class="course_icon">
                  <!-- <i class="el-icon-caret-bottom"/> -->
                </div>
                <div class="course_number">1-1</div>
                <div class="course_input">
                  <!-- 课程标题可替换文本 -->
                  <el-input maxlength="255" size="mini"/>
                </div>
                <div>
                  <el-button size="mini">删除</el-button>
                </div>
                <div>
                  <el-button size="mini">重命名</el-button>
                </div>
                <div>
                  <el-button size="mini">新增二级项</el-button>
                </div>
                <div>
                  <el-button size="mini">批量添加课件</el-button>
                </div>
              </div>
            </div>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-plus" round size="mini">新增一级项</el-button>

          </div>
        </div>
        <div class="level-title">
          <h1>是否发布在平台销售</h1>
        </div>
        <el-form class="release_style">
          <el-form-item>
            <el-radio-group >
              <el-radio label="是"/>
              <el-radio label="否"/>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="detail_foot">
          <el-button type="primary" @click="confirm">立即创建</el-button>
          <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      courseList: false
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    }
  }
}
</script>

<style>

</style>
