<template>
  <div>
    <a-card :bordered="false" title="项目基本信息">
      <!-- <template slot="extra">
      <a-button type="primary" size="default" @click="toNext">下一步</a-button>
    </template>
    project/ProjectList   	/project/list/self
    <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 v-if="form.projectType != 0" :span="24">
            <a-form-model-item v-if="['1', '3' ,'4'].includes(form.trainWay)" 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 v-if="form.projectType != 0" :span="24">
            <a-form-model-item v-if="['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 v-if="form.projectType != 0" :span="24">
            <a-form-model-item v-if="['2', '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 v-if="form.projectType != 0" :span="24">
            <a-form-model-item v-if="['2', '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>
            </a-form-model-item>
          </a-col>

          <a-col v-if="form.projectType != 0" :span="24">
            <a-form-model-item label="模拟考试" v-if="['2', '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>
</template>
<script>
import { classList } from '@/api/project/class'
import { dictGet, getProjectDetail } from '@/api/project/project'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'

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
  },
  computed: {},
  created(ClassList) {
    console.log('第一个表单创建了')
    if (this.$route.query.projectId && this.projectForm.stag == 0) {
      getProjectDetail({ id: this.$route.query.projectId }).then(res => {
        let form = res.data;
        if (this.$route.query.t == 'model') {
          console.log('form', form)
          form.projectType = 1;
          form.id = null;
        }
        this.form = form;
        this.$emit('setFormType', this.form.trainWay)
      })
    }
    // this.fetchTemplateData()
    this.getTrainClass()
  },
  methods: {
    close() {
      console.log('Form返回list页面')
      this.$emit('close')
    },
    //获取字典值，人员类型
    // fetchTemplateData() {
    //   let formData = { dictionaryCode:'0005'}
    //   dictionaryDropDown(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)
        }
      })
    },

    /** 条件判断隐藏 */
    condition() {
      let f = this.form;
      console.log('条件判断')
      if (f.projectType == 0) {
        f.trainSdate = null;
        f.trainEdate = null;
        f.practiceSdate = null;
        f.practiceEdate = null;
        f.examSdate = null;
        f.examEdate = null;
        f.examNumber = null;
        f.mockExam = null;
      } else {
        if (f.trainWay == '1') {
          f.practiceSdate = null;
          f.practiceEdate = null;
          f.examSdate = null;
          f.examEdate = null;
          f.examNumber = null;
          f.mockExam = null;
        }
        if (f.trainWay == '2') {
          f.practiceSdate = null;
          f.practiceEdate = null;
          f.trainSdate = null;
          f.trainEdate = null;
        }
        if (f.trainWay == '3') {
          f.examSdate = null;
          f.examEdate = null;
          f.examNumber = null;
          f.mockExam = null;
        }
      }
      this.form = f;
    },

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

}
</script>
