<template>
  <div>
    <el-card shadow="hover"
             class="m-b-20">
      <div>
        <p class="m-b-20">比赛名称</p>
        {{ form.stageName }}
      </div>
    </el-card>
    <el-card shadow="hover"
             class="m-b-20">
      <div>
        <p class="m-b-20">比赛时间</p>
        <div class="date-inputs">
          起止时间：
          <div style="display: inline-flex;align-items: center;">
            <el-date-picker v-model="form.time"
                            type="datetimerange"
                            range-separator="~"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            @change="timeChange">
            </el-date-picker>
            <el-alert style="width: auto;padding: 4px 16px;margin-left: 10px;"
                      :title="'(请设置在 ' + step1.playStartTime + ' ~ ' + step1.playEndTime + '间)'"
                      type="error"
                      :closable="false"
                      effect="dark">
            </el-alert>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover"
             class="mgr20 m-b-20">
      <div>
        <p class="m-b-20">课程</p>
        <div class="inline-input">
          <el-select v-model="form.cid"
                     @change="courseChange">
            <el-option v-for="item in curriculumList"
                       :key="item.associatedProduct"
                       :label="item.productName"
                       :value="item.associatedProduct
">
            </el-option>
          </el-select>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover"
             class="m-b-20">
      <div class="flex-between m-b-20">
        <span>实训项目</span>
        <div style="display: inline-flex;">
          <div>
            <el-input placeholder="请输入项目名称"
                      prefix-icon="el-icon-search"
                      v-model.trim="keyword"
                      clearable></el-input>
          </div>
          <el-button style="margin-left: 5px"
                     type="primary"
                     round
                     @click="toProject">自定义实验项目</el-button>
        </div>
      </div>
      <!-- 实训项目表格 -->
      <el-table :data="projects"
                class="table"
                stripe
                header-align="center">
        <el-table-column width="60"
                         label="选择"
                         align="center">
          <template slot-scope="scope">
            <el-radio v-model="form.projectId"
                      :label="scope.row.projectId">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="projectName"
                         label="项目名称"
                         align="center"></el-table-column>
        <el-table-column prop="auth"
                         label="项目权限"
                         align="center">
          <template slot-scope="scope">
            {{ permissionsKeys[scope.row.permissions] }}
          </template>
        </el-table-column>
        <el-table-column prop="founder"
                         label="创建人"
                         align="center">
          <template slot-scope="scope">
            {{ scope.row.founder ? '老师创建' : '系统内置' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间"
                         align="center"></el-table-column>
        <!-- <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                      <el-button type="text" @click="showProject(scope.row)">查看</el-button>
                  </template>
              </el-table-column>  -->
      </el-table>
      <div class="pagination">
        <el-pagination background
                       :page-size="pageSize"
                       @current-change="handleCurrentChange"
                       layout="total,prev, pager, next"
                       :total="total"></el-pagination>
      </div>
    </el-card>

    <div style="text-align: center">
      <el-button @click="back">返回</el-button>
      <el-button type="primary"
                 @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import util from "@/libs/util";
import { Loading } from 'element-ui'
export default {
  props: ['form', 'step1'],
  data () {
    return {
      loadIns: null,
      curriculumList: [],
      keyword: '',
      projects: [],
      page: 1,
      pageSize: 5,
      total: 0,
      sysId: '',
      permissionsKeys: ['练习', '考核', '竞赛'],
      timeInvalid: false
    };
  },
  watch: {
    // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
    form: {
      handler () {
        this.updateTime++
      },
      deep: true
    },
    keyword: function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted () {
    this.getCourse()
  },
  methods: {
    // 获取课程
    getCourse () {
      this.loadIns = Loading.service()
      this.$post(this.api.listOfGoods, {
        hotTag: 1,
        isShelves: 0,
        sort: 0,
        pageNum: 1,
        pageSize: 1000
      }).then(({ page }) => {
        const list = page.records
        this.curriculumList = list
        if (!this.form.cid && list.length) this.form.cid = list[0].associatedProduct
        this.courseChange()
      }).catch(err => {
        this.loadIns.close()
      });
    },
    // 课程选择回调
    courseChange (val) {
      const { systemId } = this.curriculumList.find(e => e.cid == this.form.cid)
      this.sysId = systemId
      if (val) this.loadIns = Loading.service()
      this.getProject()
    },
    // 查询项目
    getProject () {
      this.$post(this.api.getProjectAssessmentByCompetition, {
        pageNum: this.page,
        pageSize: this.pageSize,
        cid: this.form.cid,
        projectName: this.keyword,
        systemId: this.sysId,
        permissions: 2
      }).then(({ data }) => {
        this.projects = data.records
        this.total = data.total
        this.loadIns.close()
      }).catch(err => {
        this.loadIns.close()
      });
    },
    initData () {
      this.page = 1;
      this.getProject();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getProject();
    },
    // 自定义项目
    toProject () {
      const { form, curStep } = this.$parent
      form[curStep] = this.form
      this.$store.commit('match/setCache', {
        form,
        curStep
      })
      this.$parent.pass = 1
      this.$router.push(`/project/list?show=1`)
    },
    // 时间选择回调
    timeChange (val) {
      if (val.length) {
        const startTime = new Date(val[0])
        const endTime = new Date(val[1])
        const { playStartTime, playEndTime } = this.step1
        if (startTime < new Date(playStartTime) || endTime > new Date(playEndTime)) {
          this.timeInvalid = true
          return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。')
        }
        this.timeInvalid = false
        const { form, curStep } = this.$parent
        for (const i in form) {
          // 判断其他阶段的时间跟当前选的时间是否重叠
          if (i !== curStep) {
            const time1 = new Date(form[i].startTime)
            const time2 = new Date(form[i].endTime)
            if ((startTime >= time1 && startTime <= time2) || (endTime >= time1 && endTime <= time2)) {
              util.warningMsg('请注意，所设置的时间与已设置的阶段时间重合。')
              break
            }
          }
        }
      }
    },
    // 提交
    save () {
      const { form } = this
      if (!form.time.length) return util.warningMsg('请选择比赛时间')
      const { playStartTime, playEndTime } = this.step1
      if (new Date(form.time[0]) < new Date(playStartTime) || new Date(form.time[1]) > new Date(playEndTime)) return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。')
      if (!form.cid) return util.warningMsg('请选择课程')
      if (!form.projectId) return util.warningMsg('请选择项目')
      const { systemId, systemName, projectName } = this.projects.find(e => e.projectId == form.projectId)
      if (systemId) form.systemId = systemId
      if (projectName) form.projectName = projectName
      if (systemName) form.systemName = systemName
      form.startTime = form.time[0]
      form.endTime = form.time[1]
      this.$emit('hideSet', this.form)
    },
    // 返回
    back () {
      this.$emit('hideSet')
    }
  }
};
</script>

<style scoped lang="scss">
</style>