<template>
  <div class="total-wrapper">
    <div class="teach-tools-add-wrapper">
      <el-button type="primary" @click="addCoure">新增</el-button>
    </div>
    <div class="teach-search-wrapper">
      <el-input v-model="inputSearchName" style="width: 280px;" placeholder="请输入课程名称" />
      <treeSelect v-model="inputChosenType" style="width: 120px;margin-left: 20px;" :options="typeOptions" />
      <el-select v-model="inputChosenState" style="margin-left: 20px;" placeholder="课程状态">
        <el-option v-for="item in courseStateList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-date-picker
        v-model="inputChosenDate"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="margin-left: 20px;"
      />
      <el-input v-model="inputCreator" style="width: 180px;margin-left: 20px;" />
      <el-button style="margin-left: 20px;" type="success">查询</el-button>
    </div>
    <div class="table-wraperr">
      <el-table
        :data="courseList"
      >
        <el-table-column
          label="课程名称"
          width="180"
        >
          <template
            slot-scope="scope"
          >
            <div style="color: skyblue;cursor: pointer;" @click="jumpToClassHour(scope.row)">{{ scope.row.courseName }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="100"
        />
        <el-table-column
          prop="studentSum"
          label="学生数"
          width="120"
        />
        <el-table-column
          prop="courseState"
          label="课程状态"
          width="180"
        />
        <el-table-column
          label="创建者/时间"
          width="180"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.creator }}</div>
            <div>{{ scope.row.createDateTime }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="580"
        >
          <template slot-scope="scope">
            <div class="tool-manage-wrapper">
              <el-button size="medium" @click="manageCourse(scope.row)">管理</el-button>
              <div class="other-manage-wrapper">
                <el-button size="medium">发布课程</el-button>
                <el-button size="medium" @click="deleteCourse">删除课程</el-button>
                <el-button size="medium">关闭课程</el-button>
                <el-button size="medium" @click="manageStu">学生管理</el-button>
              </div>
              <!-- <div class="course-manage-btn-wrapper">
                <div class="down-triangle">
                  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1814" width="16" height="16"><path d="M1024 255.996 511.971 767.909 0 255.996 1024 255.996z" p-id="1815" /></svg>
                </div>
                <div class="course-manage-down-select">
                  <div>发布课程</div>
                  <div>删除课程</div>
                  <div>关闭课程</div>
                </div>
              </div> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Teach',
  components: {
    TreeSelect
  },
  data() {
    return {
      // 搜索的名称
      inputSearchName: '',
      // 选择的分类
      inputChosenType: '1',
      typeOptions: [
        {
          id: 1,
          label: 'a',
          children: [
            {
              id: 12,
              label: 'aa'
            },
            {
              id: 13,
              label: 'ab'
            }
          ]
        }, {
          id: 2,
          label: 'b',
          children: []
        },
        {
          id: 3,
          label: 'c',
          children: []
        }
      ],
      courseStateList: [
        {
          label: '未发布',
          value: '未发布'
        },
        {
          label: '已发布',
          value: '已发布'
        },
        {
          label: '已关闭',
          value: '已关闭'
        }
      ],
      // 选择的课程状态
      inputChosenState: '',
      // 选择的日期
      inputChosenDate: '',
      // 创建人
      inputCreator: '',
      // 课程列表
      courseList: [
        {
          courseName: '大学习、大培训、大考试',
          price: '8888.00',
          studentSum: 154,
          creator: '陈老师',
          createDateTime: '2021-10-00 14:43:32',
          courseState: '已发布'
        },
        {
          courseName: '安全管理员【换证】新',
          price: '300.00',
          studentSum: 127,
          creator: '陈老师',
          createDateTime: '2021-03-31 14:42:32',
          courseState: '已发布'
        }
      ]
    }
  },
  methods: {
    addCoure() {
      // 新增课程
      // 跳转到新增课程的网页
      this.$router.push({
        path: '/train/teach/addcourse'
      })
    },
    manageCourse(row) {
      // 跳转到管理课程页面
      this.$router.push({
        path: '/train/teach/editcourse/1111111'
      })
    },
    // 删除课程
    deleteCourse() {
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    jumpToClassHour(row) {
      // row
      this.$router.push({
        path: '/train/teach/addcoursehour/22222222'
      })
    },
    manageStu() {
      this.$router.push({
        path: '/train/teach/student/333333333'
      })
    }
  }
}
</script>

<style lang="scss">
  .teach-search-wrapper {
    margin: 15px 0;
    display: flex;
    align-items: center;
  }
  .tool-manage-wrapper {
    display: flex;
    .other-manage-wrapper {
      display: none;
    }
    &:hover {
      .other-manage-wrapper {
        margin-left: 20px;
        display: flex;
      }
    }
  }
</style>
