<template>
  <div v-loading="loading" class="addclassify">
    <div class="head-title">
      <span @click="CommonJump('onlineclassifyList')" class="blue point">分类管理</span> / 编辑分类管理
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">
        <el-form-item label="标题" prop="Title" class="is-required" size="small">
          <el-input v-model="addMsg.Title" placeholder="请输入标题" class="w400" />
        </el-form-item>
        <el-form-item label="课程类型" prop="CourseClassType" class="is-required">
          <el-select class="w400" style="margin-right: 10px;" v-model="addMsg.CourseClassType" size="small"
                     placeholder="请选择" >
            <el-option v-for="item in CourseClassList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课人数" prop="StudentNumType" class="is-required">
          <el-select class="w400" style="margin-right: 10px;" v-model="addMsg.StudentNumType" size="small"
                     placeholder="请选择" >
            <el-option v-for="item in StudentList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="ClassPic" class="is-required">
          <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;border:none;">
            <img v-if="!addMsg.ClassPic || addMsg.ClassPic==''" src="../../assets/img/default.png"
                 style="width:80px;height:80px" alt="">
            <img v-else style="width:80px;height:80px" :src="addMsg.ClassPic" alt="">
          </div>
        </el-form-item>


        <el-form-item label="是否为公开课" >
          <el-radio v-model="addMsg.IsPublic" :label="0" @change="getgongkai()">否</el-radio>
          <el-radio v-model="addMsg.IsPublic" :label="1" @change="getgongkai()">是</el-radio>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio v-model="addMsg.IsFree" :label="0" :disabled="gkshow">否</el-radio>
          <el-radio v-model="addMsg.IsFree" :label="1" :disabled="gkshow">是</el-radio>
        </el-form-item>


        <el-form-item label="点数" prop="PointNum" class="is-required" size="small">
          <el-input v-model="addMsg.PointNum" placeholder="请输入点数" class="w400" type="number" :min="0" :disabled="gkshow"/>
        </el-form-item>
        <el-form-item label="时长" prop="Duration" class="is-required" size="small">
          <el-input v-model="addMsg.Duration" placeholder="请输入时长" class="w400" type="number" :min="0">
            <template slot="append">
              <el-radio v-model="addMsg.DurationUnit" v-for="(item,index) in DurationList" :label="item.Id" :key="index">{{item.Name}}</el-radio>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>

</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";


  export default {
    components: {
      ChooseImg,
    },
    data() {
      return {
        radio:1,
        addMsg: {
          ID: 0,
          CourseClassType:'',//课程类型（枚举）
          StudentNumType:'',//上课人数（枚举）
          IsPublic:0,//是否为公开课0-否，1-是
          IsFree:0, //是否免费0-否，1-是
          PointNum:0,//点数
          Duration:0,//时长
          DurationUnit:1,//时长单位（枚举）
          ClassPic:'',
          Title:'',
        },
        rules: {
          CourseClassType: [{
            required: true,
            message: '请选择课程类型',
            trigger: 'blur'
          }],
          Title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }],
          PointNum: [{
            required: true,
            message: '请输入点数',
            trigger: 'blur'
          }],
          StudentNumType: [{
            required: true,
            message: '请选择上课人数',
            trigger: 'blur'
          }],
          Duration: [{
            required: true,
            message: '时长不能为空',
            trigger: 'blur'
          }],
          DurationUnit: [{
            required: true,
            message: '请选择时长单位',
            trigger: 'blur'
          }],
          ClassPic: [{
            required: true,
            message: '请选择图片',
            trigger: 'blur'
          }],
        },
        loading: false,
        CourseClassList:[],
        DurationList:[],
        StudentList:[],
        gkshow:false,
        changeState: false,
        imgType: 0,
      };
    },
    created() {

      if(this.$route.query.ID){
        this.getData(this.$route.query.ID)
      }
      this.getCourseClassList()//课程分类枚举
      this.getDurationList()//课程时长单位枚举
      this.getStudentList()//上课人数枚举
    },
    methods: {
      getgongkai(){
        if(this.addMsg.IsPublic == 1){
          this.addMsg.PointNum =0;
          this.addMsg.IsFree =1;
          this.gkshow = true;

        }else {
          this.gkshow = false
        }
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.addMsg.IsFree==0 && this.addMsg.PointNum==0){
              this.Error('点数需大于0')
              return false
            }
            this.addMsg.PointNum = Number(this.addMsg.PointNum)
            this.addMsg.Duration = Number(this.addMsg.Duration)
            this.apipost("/api/Point/SetPointCourseClass", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('onlineclassifyList');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },

      getCourseClassList(){
        this.apipost("/api/Point/GetCourseClassTypeEnumList", {}, res => {

          if(res.data.resultCode==1){
            this.CourseClassList = res.data.data
          }else {
            this.Info(res.data.message);
          }

        })
      },
      getDurationList(){
        this.apipost("/api/Point/GetDurationUnitEnumList", {}, res => {
          if(res.data.resultCode==1){
            this.DurationList = res.data.data
          }else {
            this.Info(res.data.message);
          }

        })
      },
      getStudentList(){
        this.apipost("/api/Point/GetStudentNumTypeEnumList", {}, res => {
          if(res.data.resultCode==1){
            this.StudentList = res.data.data
          }else {
            this.Info(res.data.message);
          }

        })
      },


      getData(ID) {
        this.loading = true;
        this.apipost("/api/Point/GetPointCourseClassModel", {
          ID: ID
        }, res => {
          this.loading = false;
          this.addMsg = res.data.data;
        })
      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType = num;
      },
      SelectId(msg) {
        if (this.imgType == 1) {
          let url = this.getIconLink(msg.url)
          this.addMsg.ClassPic = url
        }
        this.changeState = false;
      },


    },
    mounted() {
    }
  };
</script>
<style>
  .app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .el-checkbox {
    margin-right: 0;
  }

  .app-add-cat .el-dialog__body {
    padding: 10px 20px !important;
  }

  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }

  .app-add-cat .tag-box {
    margin: 20px 0;
  }

  .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }

  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }

  .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }



  .addclassify .blue {
    color: #409EFF;

  }

  .addclassify .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .addclassify .gez_list{
    /*width: 650px;*/
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;

  }
  .addclassify .quyu{
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }
  .addclassify .el-tag + .el-tag {
    margin-left: 10px;
  }
  .addclassify .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .addclassify .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>
