<template>
  <div>
    <a-card :bordered="false" title="项目基本信息">
      <!-- <template slot="extra">
      <a-button type="primary" size="default" @click="toNext">下一步</a-button>
    </template>
    <template slot="extra">
      <a-button type="primary" size="default" @click="close">退出</a-button>
    </template> -->
      <a-form-model ref="form" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-model-item label="项目名称" prop="projectName">
              <a-input v-model="form.projectName" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-model-item label="培训种类" prop="trainClass">
              <a-select v-model="form.trainClass"  placeholder="--请选择--">
                <a-select-option v-for="entity in trainClass" :key="entity.value"> {{ entity.name }} </a-select-option>
              </a-select>
              <!-- <a-button type="primary" @click="$refs.classList.list()"> 新增种类 </a-button> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="培训类型" prop="trainType">
              <a-select v-model="form.trainType" placeholder="--请选择--">
                <a-select-option value="1"> 必修课 </a-select-option>
                <a-select-option value="2"> 选修课 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="培训方式" prop="trainWay">
              <a-select v-model="form.trainWay" placeholder="--请选择--">
                <a-select-option value="1"> 培训 </a-select-option>
                <a-select-option value="2"> 考试 </a-select-option>
                <a-select-option value="3"> 培训-练习 </a-select-option>
                <a-select-option value="4"> 培训-练习-考试 </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="人员类型" prop="personType">
              <a-select v-model="form.personType" placeholder="--请选择--">
                <a-select-option v-for="item in personType" :key="item.value"> {{ item.name }} </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 时间选择器呢 -->
          <a-col :span="24">
            <a-form-model-item label="培训时间" style="margin-bottom: 0">
              <a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="trainSdate">
                <a-date-picker v-model="form.trainSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
              </a-form-model-item>
              <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
              <a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="trainEdate">
                <a-date-picker v-model="form.trainEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
              </a-form-model-item>
            </a-form-model-item>
          </a-col>
          <!-- 时间选择器 -->
          <a-col :span="24">
            <a-form-model-item v-if="['2', '3', '4'].includes(form.trainWay)" label="练习时间" style="margin-bottom: 0">
              <a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="practiceSdate">
                <a-date-picker v-model="form.practiceSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
              </a-form-model-item>
              <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
              <a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="practiceEdate">
                <a-date-picker v-model="form.practiceEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
              </a-form-model-item>
            </a-form-model-item>
          </a-col>
          <!-- 时间选择器 -->
          <a-col :span="24">
            <a-form-model-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试时间" style="margin-bottom: 0">
              <a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="examSdate">
                <a-date-picker v-model="form.examSdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
              </a-form-model-item>
              <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }"> - </span>
              <a-form-model-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" prop="examEdate">
                <a-date-picker v-model="form.examEdate" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
              </a-form-model-item>
            </a-form-model-item>
          </a-col>

          <!-- 考试次数 -->
          <a-col :span="24">
            <a-form-model-item v-if="['2', '3', '4'].includes(form.trainWay)" label="考试次数" style="margin-bottom: 0">
              <a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }" prop="examNumber">
                <a-input-number v-model="form.examNumber" :min="0" style="width: 100%" />
              </a-form-model-item>
              <!-- <span> 补考次数: </span>
          <a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
            <a-input-number v-model="form.resitNumber" :min="0" style="width: 100%" />
          </a-form-model-item>
          <a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 1px)' }">
            <a-button type="primary" @click="randomResit"> 随机补考 </a-button>
          </a-form-model-item> -->
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="模拟考试" v-if="['2', '3', '4'].includes(form.trainWay)" prop="mockExam">
              <a-radio-group v-model="form.mockExam">
                <a-radio value="1"> 允许 </a-radio>
                <a-radio value="0"> 不允许 </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注">
              <a-input v-model="form.remark" type="textarea" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-col :span="24" style="text-align: center;">
          <a-button type="primary" size="default" @click="toNext" style="margin-right: 8px;">下一步</a-button>
          <a-button type="default" size="default" @click="close">退出</a-button>
        </a-col>
      </a-form-model>
    </a-card>
  </div>

  <!-- </page-header-wrapper> -->
  <!-- <class-list ref="ClassList"></class-list> -->
</template>
<script>
import { dictGet } from '@/api/project/project'
import ClassList from '../classAdd/ClassList.vue'
import { classList } from '@/api/project/class'
import { projectAdd, getProjectDetail } from '@/api/project/project'

export default {
  props: {
    projectForm: {
      type: Object
    }
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      personType: [],
      modalTitle: '新增项目',
      visible: false,
      confirmLoading: false,
      trainClass: [],
      form: this.projectForm,
      rules: {
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        trainClass: [{ required: true, message: '请选择培训分类', trigger: 'blur' }],
        trainType: [{ required: true, message: '请选择培训类型', trigger: 'blur' }],
        trainWay: [{ required: true, message: '请选择培训方式', trigger: 'biur' }],
        personType: [{ required: true, message: '请选择人员类型', trigger: 'blur' }],
        trainSdate: [{ required: true, message: '请输入培训开始时间', trigger: 'change' }],
        trainEdate: [{ required: true, message: '请输入培训结束时间', trigger: 'change' }],
        practiceSdate: [{ required: true, message: '请输入练习开始时间', trigger: 'change' }],
        practiceEdate: [{ required: true, message: '请输入练习结束时间', trigger: 'change' }],
        examSdate: [{ required: true, message: '请输入考试开始时间', trigger: 'change' }],
        examEdate: [{ required: true, message: '请输入考试结束时间', trigger: 'change' }],
        examNumber: [{ required: true, message: '请输入考试次数', trigger: 'blur' }],
        mockExam: [{ required: true, message: '请选择是否允许模拟考试', trigger: 'change' }]
      }
    }
  },
  components: {
    dictGet,
    ClassList,
    classList
  },
  created(ClassList) {
    console.log('第一个表单创建了')
    if (this.$route.query.projectId) {
      getProjectDetail({ id: this.$route.query.projectId }).then(res => {
        this.form = res.data
        this.$emit('setFormType',this.form.trainWay)
      })
    }
    this.fetchTemplateData()
    this.getTrainClass()
  },
  methods: {
    close() {
      console.log('Form返回list页面')
      this.$emit('close')
    },
    //获取字典值,请求查询培训种类
    fetchTemplateData() {
      let formData = { type: 2 }
      dictGet(formData).then(res => {
        console.log(res)
        if (res.code == 200) {
          const result = res.data
          result.forEach(r => {
            this.personType.push({
              value: r.value,
              name: r.name
            })
          })
        }
      })
    },

    //获取培训种类列表
    getTrainClass() {
      let formData = { type: 1 }
      dictGet(formData).then(res => {
        console.log(res)
        if (res.code == 200) {
          const result = res.data
          result.forEach(r => {
            this.trainClass.push({
              value: r.id,
              name: r.name
            })
          })
          // console.log("222222222222222222222222222",this.trainClass)
        }
      })
    },

    //跳转到下一页面
    //下一步，跳转页面带上from对象
    toNext() {
      // console.log('toNext', this.form)
      this.$refs.form.validate(validate => {
        if (validate) {
          this.$emit('nextStep', this.form)
        }
      })
    }
  },
  destroyed() {
    console.log('第一个表单销毁了')
  }
}
</script>
