<!--  -->
<template>
  <div>
    <h2 class="v-title">课程信息</h2>
    <div class="course-info-box course-item">
      <div class="form-item">
        <span class="form-label"
          >课程名称：
          <i class="must-write">*</i>
        </span>
        <div class="form-input">
          <div v-if="isStudy">
            {{ baseCourseForm.name }}
          </div>
          <el-input
            v-else
            :class="error_input.name && 'error-input'"
            size="mini"
            :maxlength="20"
            v-model="baseCourseForm.name"
            placeholder="请输入课程名称"
            style="width: 250px"
          ></el-input>
        </div>
      </div>
      <div class="form-item">
        <span class="form-label"
          >课程分类：
          <i class="must-write">*</i>
        </span>
        <div class="form-input">
          <div v-if="isStudy">
            {{ classify[0]?.name }}
          </div>
          <el-cascader
            v-else
            :class="error_input.classify && 'error-input'"
            v-model="baseCourseForm.classify"
            :options="classify"
            :props="{ checkStrictly: true, value: 'id', label: 'name' }"
            clearable
          ></el-cascader>
        </div>
      </div>
      <div class="form-item" v-if="!isStudy">
        <span class="form-label">课程状态：</span>
        <div class="form-input">
          <el-switch
            v-model="baseCourseForm.status"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </div>
      </div>
      <div class="form-item">
        <span class="form-label">课程难度：</span>
        <div class="form-input">
          <el-radio-group v-model="baseCourseForm.difficulty" v-if="!isStudy">
            <el-radio :label="1">初级</el-radio>
            <el-radio :label="2">中级</el-radio>
            <el-radio :label="3">高级</el-radio>
          </el-radio-group>
          {{ baseCourseForm.difficultyName }}
        </div>
      </div>
      <!-- <div class="form-item">
        <span class="form-label">课程分值：</span>

        <div class="form-input">
          <div v-if="isStudy">{{ baseCourseForm.grade }}分</div>
          <el-input-number
            v-else
            v-model="baseCourseForm.grade"
            controls-position="right"
            :min="0"
            :max="100"
          ></el-input-number>
        </div>
      </div> -->
      <div class="form-item" v-if="!isStudy">
        <span class="form-label">课程封面： </span>
           <div class="_photo" @click="toUploadPhoto">
            <img v-if="nowCheckCourse.cover" :src="nowCheckCourse.cover.fileLinkTransfer()">
            <i v-else class="_icon el-icon-plus" />
          </div>
      </div>

      <div class="form-item" style="width: 50%">
        <span class="form-label">课程简介： </span>
        <div class="form-input">
          <div v-if="isStudy">
            {{ baseCourseForm.explain }}
          </div>
          <el-input
            v-else
            type="textarea"
            placeholder="请输入内容"
            v-model="baseCourseForm.explain"
          >
          </el-input>
        </div>
      </div>
      <div
        class="form-item"
        v-if="!isStudy"
        style="width: 100%; display: inline-block"
      >
        <span class="form-label">课程学习设置： </span>
        <div class="study-order-radio">
          章节学习：
          <el-radio-group v-model="baseCourseForm.sectionSortStudy">
            <el-radio :label="0">按顺序学习</el-radio>
            <el-radio :label="1">不按顺序学习</el-radio>
          </el-radio-group>
        </div>
        <!-- <div class="study-order-radio">
          课件学习：
          <el-radio-group v-model="baseCourseForm.coursewareSortStudy">
            <el-radio :label="0">按顺序学习</el-radio>
            <el-radio :label="1">不按顺序学习</el-radio>
          </el-radio-group>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getDistFile } from '@/utils'
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    nowCheckCourse: {
      type: Object,
      default: () => {}
    },
    error_input: {
      type: Object,
      default: () => {}
    },
    classify: {
      type: Array,
      default: () => []
    },
    isStudy: {
      type: Boolean,
      default: false
    }
  },
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      baseCourseForm: {},
      difficulty: [
        {
          label: 1,
          title: '初级'
        },
        {
          label: 2,
          title: '中级'
        },
        {
          label: 3,
          title: '高级'
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async toUploadPhoto () {
      const [file] = await getDistFile({ accepts: ['image'] })
      // eslint-disable-next-line vue/no-mutating-props
      this.baseCourseForm.cover = file
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    if (this.isStudy) {
      this.baseCourseForm = this.nowCheckCourse.courseInfo
      const index = this.difficulty.findIndex((dif) => {
        if (dif.label === this.baseCourseForm.classify) {
          return true
        }
        return false
      })
      this.baseCourseForm.difficultyName = this.difficulty[index]?.title
    } else {
      this.baseCourseForm = this.nowCheckCourse
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeUnmount () {}, // 生命周期 - 销毁之前
  unmounted () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.course-info-box {
  padding: 10px 0 10px 12px;
  display: flex;
  flex-wrap: wrap;
  .form-item {
    width: 600px;
    display: flex;
    margin-bottom: 10px;
    min-height: 30px;
    align-items: center;
  }

  .form-input {
    display: flex;
    align-items: center;
    width: 100%;
  }
  ::v-deep .study-order-radio {
    padding-left: 60px;
    font-size: 13px;
    margin-bottom: 5px;
    .el-radio__label {
      font-size: 12px;
    }
  }
}
.form-label {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  min-width: 70px;
  color: #333;
  font-weight: bold;
  font-size: 12px;
  position: relative;
}
::v-deep .error-input {
  input {
    border: 1px solid red;
  }
}
::v-deep .el-input-group__append {
  padding: 0 10px !important;
  cursor: pointer;
}
.delete-input-button {
  color: red;
}
.must-write {
  position: absolute;
  left: -12px;
  color: red;
  top: 0;
}
._photo {
  width: 120px;
  height: 90px;
  padding: 3px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #dcdfe6;
  cursor: pointer;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  ._icon {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  &:hover {
    color: $--color-primary;
    border-color: $--color-primary;
  }
}
</style>
