<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form :rules="rules" ref="curriculumddForm" :model="updateCurriculum" label-position="left" label-width="120px"
              style='margin-left:20px'>
      <el-row :gutter="24" >
        <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
          <div class="grid-content bg-purple">
            <el-form-item  :label="$t('college.c_name')" prop="c_name">
              <div class="block">
                <el-input style="width: 100%;" :disabled="true" class="filter-item" v-model="updateCurriculum.c_name" >
                </el-input>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="11" :lg="8" :xl="8">
          <div class="grid-content bg-purple" >
            <el-form-item  :label="$t('college.c_type')"  prop="c_type">
              <div class="block">
                <el-select style="width: 100%;" :disabled="true" class="filter-item" v-model="updateCurriculum.c_type" @change="contentChange()">
                  <el-option v-for="item in contentOption"  :key="item.wct_code" :label="item.wct_name" :value="item.wct_code" >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="12" :lg="7" :xl="7">
            <div class="grid-content bg-purple" >
              <el-form-item  :label="$t('college.c_step')" prop="c_step" >
                <el-select style="width: 100%;" :disabled="true" class="filter-item" v-model="updateCurriculum.c_step">
                  <el-option v-for="item in wcTypeOption" :key="item.value" :label="item.label" :value="item.value" >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="24" >
        <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
          <div class="grid-content bg-purple">
            <el-form-item  :label="$t('college.branches')" prop="branche_id">
              <div class="block">
                <el-select style="width: 100%;" :disabled="true" class="filter-item" v-model="updateCurriculum.branche_id" >
                   <el-option v-for="item in mktOption" :key="item.id" :label="item.mi_mktname" :value="item.id" >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
          <div class="grid-content bg-purple">
            <el-form-item  :label="$t('college.credit')" prop="credit">
              <div class="block">
                <el-input-number style="width: 100%;" :disabled="true" controls-position="right" class="filter-item" v-model="updateCurriculum.credit">
                </el-input-number>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="11" :lg="7" :xl="7">
          <div class="grid-content bg-purple" >
            <el-form-item  :label="$t('college.c_desc')"  prop="c_desc">
              <div class="block">
                <el-input style="width: 100%;" :disabled="true" class="filter-item" v-model="updateCurriculum.c_desc">
                </el-input>
              </div>
            </el-form-item>
          </div>
        </el-col>
        
      </el-row>
      <el-row :gutter="24" >
        <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
          <div class="grid-content bg-purple">
            <el-form-item  :label="$t('college.startdate')" prop="startdate">
              <div class="block">
                <el-date-picker v-model="updateCurriculum.startdate" :disabled="true" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions" style="width: 100%;">
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="11" :lg="8" :xl="8">
          <div class="grid-content bg-purple" >
            <el-form-item  :label="$t('college.enddate')"  prop="enddate">
              <div class="block">
                 <el-date-picker v-model="updateCurriculum.enddate" :disabled="true" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions" style="width: 100%;">
                  </el-date-picker>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="12" :lg="7" :xl="7">
            <div class="grid-content bg-purple" >
              <el-form-item  :label="$t('college.deadline')" prop="deadline" >
                <el-date-picker v-model="updateCurriculum.deadline" :disabled="true" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" >
        <el-col :xs="23" :sm="23" :md="12" :lg="8" :xl="8">
          <div class="grid-content bg-purple">
            <el-form-item  :label="$t('college.maximum')" prop="maximum">
              <div class="block">
                <el-input-number style="width: 100%;" controls-position="right" :disabled="true" class="filter-item" v-model="updateCurriculum.maximum" >
                </el-input-number>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="23" :sm="23" :md="11" :lg="8" :xl="8">
          <div class="grid-content bg-purple" >
            <el-form-item  :label="$t('college.img_list_href')"  prop="img_href">
              <div class="block">
                <el-input style="width: 100%;" class="filter-item" :disabled="true" v-model="updateCurriculum.img_href" >
                </el-input>
              </div>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="24" >
        <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23">
          <div class="grid-content bg-purple">
            <el-form-item  :label="$t('college.c_content')" prop="c_content">
              <div class="editor-container">
                <el-input :disabled="true" type="textarea"  autosize ref="tinymce-comment"  v-model="updateCurriculum.c_content"></el-input>
              </div>
            </el-form-item>
          </div>
        </el-col>
        
      </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer" align="center" style="width: 90%">
        <el-button type="primary" @click="saveDianping()" :loading ="buttonloading">{{$t('table.save')}}</el-button>
        <el-button @click="resetForm()">{{$t('navbar.reset')}}</el-button>
      </div>
  </div>
</template>
<script>
  import waves from '@/directive/waves' // 水波纹指令
  import { parseTime } from '@/utils'
  import { getWXContentTypes, getAllMkt } from '@/api/wxmini'
  import { updateCollegeCurriculumPractice, getCollegeCurriculumPractice } from '@/api/college'
  // 富文本
  import Tinymce from '@/components/Tinymce'
  import Upload from '@/components/Upload/singleImage3'
  import MDinput from '@/components/MDinput'
  import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
  import Sticky from '@/components/Sticky' // 粘性header组件
  export default {
    // name: 'curriculumcoreadd', // 不支持keep-alive
    components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
    directives: {
      waves
    },
    data() {
      return {
        tableKey: 0,
        buttonloading: false,
        contentOption: [],
        wcTypeOption: [],
        mktOption: [],
        view: {
          name: undefined,
          path: undefined,
          title: undefined
        },
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        updateCurriculum: {
          c_name: null,
          c_type: null,
          c_step: null,
          branche_id: null,
          credit: null,
          c_desc: null,
          startdate: null,
          enddate: null,
          deadline: null,
          maximum: null,
          img_href: null,
          c_content: null
        },
        updateCurriculumOld: {
          c_name: null,
          c_type: null,
          c_step: null,
          branche_id: null,
          credit: null,
          c_desc: null,
          startdate: null,
          enddate: null,
          deadline: null,
          maximum: null,
          img_href: null,
          c_content: null
        },
        dialogPvVisible: false,
        pvData: [],
        rules: {
          c_name: [{ required: true, message: '请录入课程名称', trigger: 'blur' }],
          c_type: [{ required: true, message: '请选择课程类型', trigger: 'blur' }],
          c_step: [{ required: true, message: '请选择课程展示时间', trigger: 'blur' }],
          branche_id: [{ required: true, message: '请选择门店', trigger: 'blur' }],
          credit: [{ required: true, message: '请录入学分', trigger: 'blur' }],
          c_desc: [{ required: true, message: '请录入课程描述', trigger: 'blur' }],
          startdate: [{ required: true, message: '请录入课程开始时间', trigger: 'blur' }],
          enddate: [{ required: true, message: '请录入课程结束时间', trigger: 'blur' }],
          deadline: [{ required: true, message: '请录入报名截止时间', trigger: 'blur' }],
          c_content: [{ required: true, message: '请录入内容', trigger: 'blur' }],
          maximum: [{ required: true, message: '请录入最大报名人数', trigger: 'blur' }],
          img_href: [{ required: true, message: '请录入图片地址', trigger: 'blur' }]
        },
        downloadLoading: false
      }
    },
    created() {
      getWXContentTypes().then(response => {
        this.contentOption = response.data
      })
      getAllMkt().then(response => {
        this.mktOption = response.data
      })
      this.getList()
    },
    destroyed() {
      this.view.name = 'curriculumpracticeshow'
      this.view.path = '/college/curriculumpracticeshow'
      this.view.title = 'curriculumpracticeshow'
      this.$store.dispatch('delVisitedViews', this.view)
    },
    methods: {
      getList() {
        var queryPara = {
          id: this.$route.params.contentID
        }
        getCollegeCurriculumPractice(queryPara).then(response => {
          this.updateCurriculum.id = this.$route.params.contentID
          this.updateCurriculum.c_name = response.data.c_name
          this.updateCurriculum.c_type = response.data.c_type
          this.updateCurriculum.c_step = response.data.c_step
          this.updateCurriculum.branche_id = response.data.branche_id
          this.updateCurriculum.credit = response.data.credit
          this.updateCurriculum.c_desc = response.data.c_desc
          this.updateCurriculum.startdate = response.data.startdate
          this.updateCurriculum.enddate = response.data.enddate
          this.updateCurriculum.deadline = response.data.deadline
          this.updateCurriculum.maximum = response.data.maximum
          this.updateCurriculum.img_href = response.data.img_href
          this.updateCurriculum.c_content = response.data.c_content
          this.updateCurriculumOld.id = this.$route.params.contentID
          this.updateCurriculumOld.c_name = response.data.c_name
          this.updateCurriculumOld.c_type = response.data.c_type
          this.updateCurriculumOld.c_step = response.data.c_step
          this.updateCurriculumOld.branche_id = response.data.branche_id
          this.updateCurriculumOld.credit = response.data.credit
          this.updateCurriculumOld.c_desc = response.data.c_desc
          this.updateCurriculumOld.startdate = response.data.startdate
          this.updateCurriculumOld.enddate = response.data.enddate
          this.updateCurriculumOld.deadline = response.data.deadline
          this.updateCurriculumOld.maximum = response.data.maximum
          this.updateCurriculumOld.img_href = response.data.img_href
          this.updateCurriculumOld.c_content = response.data.c_content
          this.wcTypeOption = this.range(1, response.data.wct_step, 1)
        })
      },
      resetForm(formName) {
        this.$refs['tinymce-comment'].setContent(this.updateCurriculumOld.c_content)
        this.updateCurriculum.c_name = this.updateCurriculumOld.c_name
        this.updateCurriculum.c_type = this.updateCurriculumOld.c_type
        this.updateCurriculum.c_step = this.updateCurriculumOld.c_step
        this.updateCurriculum.branche_id = this.updateCurriculumOld.branche_id
        this.updateCurriculum.credit = this.updateCurriculumOld.credit
        this.updateCurriculum.c_desc = this.updateCurriculumOld.c_desc
        this.updateCurriculum.startdate = this.updateCurriculumOld.startdate
        this.updateCurriculum.enddate = this.updateCurriculumOld.enddate
        this.updateCurriculum.deadline = this.updateCurriculumOld.deadline
        this.updateCurriculum.maximum = this.updateCurriculumOld.maximum
        this.updateCurriculum.img_href = this.updateCurriculumOld.img_href
        this.updateCurriculum.c_content = this.updateCurriculumOld.c_content
        this.wcTypeOption = []
      },
      saveDianping() {
        this.$refs['curriculumddForm'].validate((valid) => {
          if (valid) {
            this.buttonloading = true
            this.updateCurriculum.create_user = this.$store.state.user.introduction
            updateCollegeCurriculumPractice(this.updateCurriculum).then(response => {
              if (response.data === 1) {
                this.$notify({
                  title: '成功',
                  message: '保存成功!',
                  type: 'success',
                  duration: 2000
                })
              } else if (response.data === 0) {
                this.$notify({
                  title: '修改失败',
                  message: '课程已存在！',
                  type: 'warning',
                  duration: 2000
                })
              } else {
                this.$notify({
                  title: '失败',
                  message: '请联系管理员！',
                  type: 'error',
                  duration: 2000
                })
              }
              this.buttonloading = false
              this.getList()
            })
          }
        })
      },
      contentChange() {
        this.wcTypeOption = []
        this.addCurriculum.c_step = null
        for (let i = 0; i < this.contentOption.length; i++) {
          if (this.contentOption[i].wct_code === this.addCurriculum.c_type) {
            this.wcTypeOption = this.range(1, this.contentOption[i].wct_step, 1)
            break
          }
        }
      },
      range(start, end, step) {
        var arr = []
        for (let i = start; i <= end; i++) {
          var tempOption = {
            label: null,
            value: null
          }
          if (i % step === 0) {
            tempOption.value = i
            tempOption.label = i
            arr.push(tempOption)
          }
        }
        return arr
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      }
    }
  }
</script>
<style>
.el-form--label-left .el-form-item__label{
  text-align:right
}
.el-rate{
  line-height: 0;
  margin-top:8px;
}
.el-checkbox.el-checkbox {
    margin-left: 30px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top:10px;
    color:#ff4949;
  }
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>