<template>
<div>
  <sticky className="sub-navbar">
    <div style="text-align:right;">
      <el-button type="success" :loading="onSubmit" @click="handleSave">保存</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </sticky>
  <div class="app-container app-edit">
    <el-form class="small-space" :model="form" :rules="rules" ref="form" label-position="right" label-width="120px" style="width: 700px;">

      <!-- 课程名称 -->
      <el-form-item label="课程名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入课程名称" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="课程类型">
        <el-radio v-model="form.type" :label="0">普通课程</el-radio>
        <el-radio v-model="form.type" :label="1">公益课程</el-radio>
      </el-form-item>
      <!-- 上课日期 2018-03-30 -->
      <el-form-item label="课程日期" prop="date">
         <div class="block">
            <el-date-picker
             @change="onDateChange"
              value-format="yyyy-MM-dd"
              v-model="form.date"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
      </el-form-item>

      <!-- 课程开始时间  -->
      <el-form-item label="课程时间" prop="startTime">
          <el-time-picker 
          @change="onTimeChange"
           style="width:200px"
            is-range
            value-format="HH:mm"
            v-model="time"
            format="HH:mm"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
      </el-form-item>

      <!-- 课程总数量 -->
      <el-form-item label="课程总数量" prop="num">
        <el-input-number v-if="this.form.id" v-model.number="form.num" :min="getMinNum()" :max="10000" :precision="0" ></el-input-number>
        <el-input-number v-if="!this.form.id" v-model.number="form.num" :min="1" :max="10000" :precision="0" ></el-input-number>
      </el-form-item>

      
       <!-- 课程总数量 -->
      <el-form-item label="课程已售" prop="num" v-if="this.form.id">
        <el-input :disabled="true" v-model.number="form.saleNum"  style="width:180px"></el-input>
      </el-form-item>

      <!-- 教练ID -->
      <el-form-item label="教练" prop="coachId">
        <el-select v-model="form.coachId" filterable placeholder="请选择教练">
          <el-option
            v-for="item in coaches"
            :key="item.id"
            :label="item.nickname"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 课程标签 -->
      <el-form-item label="课程标签" prop="tags">
        <el-select @change="onTagChange" v-model="form.tags" :multiple-limit="multip" filterablwe placeholder="请添加课程标签"  style="width:400px"
            multiple allow-create default-first-option>
          <el-option
            v-for="item in tagOptions"
            :key="item.name"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="课程图片(750*422px)" prop="lessonImage">
        <el-upload
          action="/api/upload/image"
          list-type="picture-card"
          :file-list="imgs"
          :on-remove="handleImgRemove"
          :on-success="handleImgSuccess">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <!-- 课程描述 -->

      <el-form-item label="注意事项" prop="note">
        <Tinymce :height="300" v-model="form.note" id='note' style="width:900px"></Tinymce>
      </el-form-item> 
      <!-- <el-form-item label="注意事项" prop="note">
        <el-input type="textarea" :rows="4" placeholder="请输入注意事项"  v-model="form.note"> </el-input>
      </el-form-item> -->

      <el-form-item label="课程描述" prop="description">
        <Tinymce :height="300" v-model="form.description" id='tinymce' style="width:900px"></Tinymce>
      </el-form-item>

      <!-- 价格 -->
      <el-form-item label="价格" prop="price">
        <el-input-number v-model.number="form.price" :min="0" :precision="2" ></el-input-number>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import Sticky from '@/components/Sticky'
import { find, save } from '@/api//venue/lesson'
import { findAllTags, saveTag } from '@/api//venue/lesson/tag/config'
import Tinymce from '@/components/Tinymce'
import { findByVenueType } from '@/api//coach'
import moment from 'moment'

export default {
  components: { Tinymce, Sticky },
  data() {
    return {
      form: {
        id: undefined,
        veneuType: '',
        type: 0,
        venueId: '',
        name: '',
        date: '',
        startTime: '',
        endTime: '',
        num: '',
        saleNum: '',
        coachId: '',
        description: '',
        price: '',
        platformId: '',
        lessonImage: [],
        tags: [],
        note: ''
      },
      multip: 3,
      imgs: [],
      tagOptions: [],
      coaches: [],
      pickerOptions: {
        disabledDate(time) {
          return Date.now() > time
        }
      },
      onSubmit: false,
      time: undefined,
      // 表单验证规则
      rules: {
        name: [
           { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择时间', trigger: 'blur' }
        ],
        coachId: [
          { required: true, message: '请选择教练', trigger: 'blur' }
        ],
        lessonImage: [
          { type: 'array', required: true, message: '请上传课程图片' },
          { type: 'array', min: 1, message: '请上传课程图片' }
        ],
        note: [
          { required: true, message: '请输入注意事项', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    findByVenueType(2).then(response => {
      this.coaches = response.coaches
    })
    findAllTags().then(response => {
      this.tagOptions = response.tags
    })
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.findById(this.form.id)
    }
    if (this.$route.query.venueId) {
      this.form.venueId = this.$route.query.venueId
    }
  },
  methods: {
    onTagChange(value) {
      if (value.length > 0) {
        saveTag(value[value.length - 1])
      }
    },
    handleImgSuccess(res, file) {
      this.form.lessonImage.push(res.img)
    },
    handleImgRemove(file, fileList) {
      var img = file.url
      for (var i in this.form.lessonImage) {
        if (this.form.lessonImage[i] === img) {
          this.form.lessonImage.splice(i, 1)
        }
      }
    },
    onDateChange(value) {

    },
    onTimeChange(value) {
      if (value) {
        this.form.startTime = value[0] + ':00.000'
        this.form.endTime = value[1] + ':00'
      } else {
        this.form.startTime = undefined
        this.form.endTime = undefined
      }
    },
    /**
     * 查询场馆课程
     */
    findById(id) {
      find(id).then(response => {
        this.form.veneuType = response.venueLesson.veneuType
        this.form.venueId = response.venueLesson.venueId
        this.form.name = response.venueLesson.name
        this.form.date = moment(response.venueLesson.date).format('YYYY-MM-DD')
        this.form.startTime = response.venueLesson.startTime
        this.form.endTime = response.venueLesson.endTime
        this.form.num = response.venueLesson.num
        this.form.saleNum = response.venueLesson.saleNum
        this.form.coachId = response.venueLesson.coachId
        this.form.description = response.venueLesson.description
        this.form.price = response.venueLesson.price
        this.form.platformId = response.venueLesson.platformId
        this.form.lessonImage = response.venueLesson.lessonImage
        this.time = [this.form.startTime, this.form.endTime]
        this.form.tags = response.venueLesson.tags
        this.form.note = response.venueLesson.note
        this.form.type = response.venueLesson.type
        response.venueLesson.lessonImage.forEach(element => {
          this.imgs.push({ name: element, url: element })
        })
      })
    },
    getMinNum() {
      if (this.form.saleNum > 0) { return this.form.saleNum } else {
        return 1
      }
    },

    /**
     * 保存场馆课程
     */
    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }

        this.onSubmit = true
        save(this.form)
          .then(response => {
            this.$router.go(-1)
          })
          .finally(() => {
            this.onSubmit = false
          })
      })
    },

    /**
     * 取消
     */
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>
