<template>
  <div class="subPage">
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h">
          <el-button size="mini" type="success" @click="addCourse">新增课程</el-button>
        </div>
        <ul>
          <li>
            <!-- <span>选择案场：</span> -->
            <el-select v-model="postData.caseid" placeholder="请选择案场">
              <el-option
                key="all"
                label="所有案场"
                value="all">
              </el-option>
              <el-option
                v-for="item in cases"
                :key="item.CaseId"
                :label="item.CaseName"
                :value="item.CaseId">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-select v-model="postData.typeid" placeholder="课程分类">
              <el-option
                key=""
                label="全部"
                value=""
              >
              </el-option>
              <el-option
                v-for="item in location"
                :key="item.LocationId"
                :label="item.LocationName"
                :value="item.LocationId">
              </el-option>
            </el-select>
          </li>
          <li>
            <el-input
              placeholder="请输入课程名称"
              v-model="postData.name"
            >
            </el-input>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary" @click="search">搜索</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box">
      <el-table
        :data="courses.list"
        stripe
        style="width: 100%">
        <el-table-column
          prop="CourseName"
          label="课程名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="Price"
          label="课程价格"
          width="150">
        </el-table-column>
        <el-table-column
          label="课程类别"
          width="150">
          <template slot-scope="scope">
            <label>{{getLocationName(scope.row.LocationId)}}</label>
          </template>
        </el-table-column>
        <el-table-column
          label="所在案场"
          width="150">
          <template slot-scope="scope">
            <label>{{getCaseName(scope.row.CaseId)}}</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="BeginDate"
          label="课程开始时间"
          width="150">
          <template slot-scope="scope">
            <label v-if="scope.row.BeginDate !== '0001-01-01T00:00:00Z'">{{FormatDate(scope.row.BeginDate)}}</label>
            <label v-else>-</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="EndDate"
          label="课程结束时间"
          width="150">
          <template slot-scope="scope">
            <label v-if="scope.row.EndDate !== '0001-01-01T00:00:00Z'">{{FormatDate(scope.row.EndDate)}}</label>
            <label v-else>-</label>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="300">
          <template slot-scope="scope">
            <div style="width: 100%" class="btnBox">
              <el-button
                size="mini"
                type="success"
                @click="addDetail(scope.row)">添加课程详情</el-button>
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.Status===0"
                @click="toSchedule(scope.row)"
                >排课</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="handleCopy(scope.row)"
                >复制课程</el-button>
              <el-button
                size="mini"
                type="warning"
                @click="handlePublic(scope.row)"
                v-if="scope.row.Status===0"
                >发布</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleUnPublic(scope.row)"
                v-if="scope.row.Status===1"
                >取消发布</el-button>
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.Status===0"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.Status===0"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="courses.page"
      :page-size="courses.pagesize"
      layout="prev, pager, next, jumper"
      :total="courses.pagenum">
    </el-pagination>
    <el-dialog
      title="课程详情"
      :visible.sync="centerDialogVisible"
      width="500px"
      center>
      <ul>
        <li class="flex-h" style="align-items: flex-start;">
          <span>课程详情图片：</span>
          <div class="flex-item">
            <div class="red-hint">建议上传750*960尺寸的图片</div>
            <div>
              <el-upload
                class="avatar-uploader"
                action='string'
                :http-request="toolClass.upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="newImg" :src="newImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
          <el-button
            size="mini"
            type="success"
            v-if="newImg"
            @click="addThisImg">确定添加图片</el-button>
        </li>
      </ul>
      <el-table
        :data="courseImgs"
        stripe
        style="width: 100%">
        <el-table-column
          prop="img"
          label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.ImgUrl" style="width:100%" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-model="scope.row.Sort">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="sureSort(scope.$index, scope.row)">确认</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteItem(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const { mapState: mapCourseState, mapActions: mapCourseActions } = createNamespacedHelpers('course')
const { mapState: mapLocationState, mapActions: mapLocationActions } = createNamespacedHelpers('cms')

export default {
  name: '',
  data () {
    return {
      selCourseId: '',
      currentCourseDetail: [{
        img: '',
        sort: 1,
        edit: false,
      }],
      newImg: '',
      centerDialogVisible: false, // 课程详情弹窗显隐
      total: 0,
      postData: { // 表格搜索条件
        caseid: 'all', // 案场id
        page: 1, // 当前页码
        pagesize: 10, // 请求数据量
        typeid: '', // 课程类型
        name: '', // 课程名称
      },
      courseTypeList: [],
    }
  },
  mounted () {
    this.updateLocationInfo({ issys: 0, pagesize: 100 })
    this.$nextTick(function () {
      this.getList()
    })
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    ...mapCourseState({
      courses: x => x.courseList,
      courseImgs: x => x.courseImgs
    }),
    ...mapLocationState({
      location: x => x.location
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    }
  },
  methods: {
    deleteItem (index, item) { // 删除图片
      this.$confirm('确认删除此课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.DelCourseImg({id: item.ImgId, callback: this.afterImgAction})
        })
    },
    sureSort (index, item) { // 确认图片排序
      this.UpdateCourseImg({...item, callback: this.afterImgAction})
    },
    editItem (index, item) { // 编辑图片排序
      let imglist = {...this.courseImgs}
      imglist[index].edit = true
      this.UpdateImgList(imglist)
    },
    addThisImg () { // 添加图片到课程详情
      const data = {
        CourseId: this.selCourseId,
        ImgUrl: this.newImg,
        Sort: 0,
        callback: this.afterImgAction
      }
      this.newImg = ''
      this.AddCourseImg(data)
    },
    afterImgAction () {
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.GetCourseImgs({id: this.selCourseId})
    },
    handleAvatarSuccess (res, file) {
      this.newImg = res.result.url
    },
    addDetail (row) { // 添加课程详情
      this.selCourseId = row.CourseId
      this.GetCourseImgs({id: this.selCourseId})
      this.centerDialogVisible = true
    },
    ...mapCourseActions([
      'GetCourseList',
      'Public',
      'UnPublic',
      'DelCourse',
      'SetNull',
      'GetCourseByID',
      'GetCourseImgs',
      'AddCourseImg',
      'UpdateCourseImg',
      'DelCourseImg',
      'UpdateImgList'
    ]),
    ...mapLocationActions([
      'updateLocationInfo',
    ]),
    getLocationName (id) {
      return (this.location.filter(x => x.LocationId === id)[0] || {}).LocationName
    },
    getCaseName (id) {
      return (this.cases.filter(x => x.CaseId === id)[0] || {}).CaseName
    },
    FormatDate (date) {
      return this.toolClass.dateFormat(date, 'yyyy-MM-dd')
    },
    search () { // 搜索
      this.postData.page = 1
      this.currentList = []
      this.getList()
    },
    getList () { // 获取列表
      this.GetCourseList({...this.postData, caseid: this.CaseId === 'all' ? '' : this.CaseId})
    },
    handleCurrentChange (val) { // 跳转到分页
      this.postData.page = val
      this.getList()
    },
    handleEdit (index, row) { // 编辑
      this.$router.push({ name: 'editCourse', query: { id: row.CourseId } })
    },
    handleDelete (index, row) { // 删除
      this.$confirm('确认删除此课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.DelCourse({ id: row.CourseId, callback: this.delCallBack })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    actionCallBack () {
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.getList()
    },
    delCallBack () {
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.getList()
    },
    addCourse () {
      this.SetNull()
      this.$router.push({ name: 'addCourse' })
    },
    handlePublic (row) {
      this.$confirm('确认发布此课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.Public({ id: row.CourseId, callback: this.actionCallBack })
        })
    },
    handleUnPublic (row) {
      this.$confirm('确认取消发布此课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.UnPublic({ id: row.CourseId, callback: this.actionCallBack })
        })
    },
    handleCopy (row) {
      this.GetCourseByID({ id: row.CourseId })
      this.$router.push({ name: 'addCourse' })
    },
    toSchedule (row) {
      this.$router.push({ name: 'scheduleManager', query: { id: row.CourseId } })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
.btnBox{
  >*{
    margin-bottom: 10px;
  }
}
</style>
