<template>
  <a-card :bordered="false" title="系統新增">
    <template slot="extra">
      <a-button type="primary" @click="goback">返回</a-button>
      <a-button type="primary" @click="save">保存</a-button>
    </template>
    <a-form-model :model="form">
      <a-row>
        <!-- 课程名称 -->
        <a-col :span="18" :offset="3">
          <a-form-model-item label="课程名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
            <a-input v-model="form.courseName" v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }]" />
          </a-form-model-item>
        </a-col>

        <!-- 课程类别 -->
        <a-col :span="9" :offset="3">
          <a-form-model-item label="课程类别" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-tree-select v-model="form.courseType" :tree-data="dictCourseType" placeholder="请选择课程类别"></a-tree-select>

            <!-- <a-select v-model="form.courseType" placeholder="--请选择--">
              <a-select-option v-for="(item, index) in dictCourseType" :key="index" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select> -->
          </a-form-model-item>
        </a-col>

        <!-- 课件大小 -->
        <a-col :span="9">
          <a-form-item label="课时" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
            <a-input-number id="hour" v-model="dataValue" :min="1" :max="1000" @change="onChange" :style="{ display: 'ln', width: '100%' }" />
            {{ dataValue }}分钟
          </a-form-item>
        </a-col>

        <!-- 学习内容简介 -->
        <a-col :span="18" :offset="3">
          <a-form-model-item label="学习内容" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
            <a-input v-model="form.learningContent" type="textarea" />
          </a-form-model-item>
        </a-col>

        <!-- 所属行业 -->
        <a-col :span="9" :offset="3">
          <a-form-model-item label="所属行业" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-select v-model="form.industryInvolved" placeholder="--请选择--">
              <a-select-option v-for="(item, index) in industry" :key="index" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <!-- 是否为必修课程 -->
        <a-col :span="9">
          <a-form-model-item label="是否为必修" :label-col="{ span: 6 }" :wrapper-col="{ span: 6 }">
            <a-select v-model="form.isRequired" placeholder="--请选择--">
              <a-select-option value="1"> 是 </a-select-option>
              <a-select-option value="0"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <!-- 选择岗位-人员类型 -->
        <a-col :span="9" :offset="3">
          <a-form-model-item label="选择岗位" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-select v-model="form.job" placeholder="--请选择--">
              <a-select-option v-for="(item, index) in dictPerson" :key="index" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <!-- 备注 -->
        <a-col :span="18" :offset="3">
          <a-form-model-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
            <a-input v-model="form.remark" type="textarea" />
          </a-form-model-item>
        </a-col>

        <!-- 上传封面图片 -->
        <a-col :span="18" :offset="3">
          <a-form-model-item label="上传封面图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
            <db-upload v-model="fileList"></db-upload>
          </a-form-model-item>
        </a-col>

        <!-- 标签选择器 -->
        <a-col :span="18" :offset="3">
          <a-form-model-item label="课程标签" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
            <a-select mode="tags" style="width: 100%" placeholder="标签选择或新增" @change="handleTagChange" :value="this.form.tags">
              <a-select-option v-for="(item,index) in dictCourseTag" :key="index" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>



<script>
import { courseAdd, getCourseDetails } from '@/api/course/course'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'
import DbUpload from '@/components/DbUpload/DbUpload.vue'

export default {
  name: 'step1',
  data() {
    return {
      dataValue: 1,
      form: {
        coverPath: '',
        tags: [],
        courseTags: [],
        // fileList: [] // 上传附件
      },
      url: '',
      previewVisible: false,
      fileList: [],
      previewImage: [],
      dictPerson: [],
      dictCourseType: [], // 课程类别
      industry: [],
      dictCourseTag: [],
    }
  },
  components: {
    DbUpload,
    courseAdd,
    getCourseDetails
  },
  created() {
    this.dictionaryDropDown()
    if (this.$route.query.id) {
      getCourseDetails({ id: this.$route.query.id }).then((res) => {
        this.form = res.data
        this.form.isRequired = this.form.isRequired + ''

        this.form.tags = []
        this.form.courseTags.forEach((item, index) => {
          this.form.tags.push(item.dictValue.toString())
        })
      })
    }
  },

  methods: {
    //显示页面上的数字
    onChange(dataValue) {},
    save() {
      courseAdd(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.info('保存成功')
          //新增完成后直接返回课程列表
          this.$router.push({ path: '/course/CourseList', query: {} })
        }
      })
    },

    dictionaryDropDown() {
      this.formLoading = false
      // 行业
      dictionaryDropDown({ dictionaryCode: '0007' }).then((res) => {
        this.industry = res.data
      })
      // 课程类别
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
        // 词典转树结构
        this.dictCourseType = dictToTree(res.data, [], 0)
      })
      // 人员类型
      dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => {
        this.dictPerson = res.data
      })
      // 标签项 默认选中的多选框
      dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
        const tagList = res.data
        for (let i = 0; i < tagList.length; i++) {
          tagList[i].value = tagList[i].value.toString()
        }
        this.dictCourseTag = tagList
      })
    },

    //返回
    goback() {
      this.$router.push({
        path: '/course/CourseList/'+this.$route.query.type,
        query: {
          courseName: this.$route.query.courseName,
        },
      })
    },

    getToken() {
      let hreader = {}
      hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
      return hreader
    },
    onSuccess(file) {},
    handleCancel() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    // 处理文件上传，并且获取图片路径
    handleChange({ fileList }) {
      this.fileList = fileList
      this.fileList.file = fileList[0]
      this.form.coverPath = this.fileList.file.response.url
    },

    //标签选择器
    handleTagChange(value) {
      this.form.tags = value
    },
  },
}

// 图片预览Base64
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}
</script>
