<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>

    <!-- 理论系统 -->
    <template v-if="isTheory">
      <!-- 理论系统选择试卷库，非理论则选择系统 -->
      <el-card shadow="hover" class="mgr20 m-b-20">
        <div>
          <p class="m-b-20">试卷库</p>
          <div class="inline-input">
            <el-select v-model="libraryId" placeholder="请选择试卷库" @change="getProject">
              <el-option v-for="(item, i) in paperLibraries" :key="i" :label="item.libraryName" :value="item.libraryId">
              </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>
          </div>
        </div>
        <p v-if="form.originPaperName" style="margin-bottom: 20px">已选试卷：{{ form.originPaperName }}</p>
        <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.paperId" :label="scope.row.paperId">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
          <el-table-column prop="name" label="试卷名称" min-width="140" align="center"></el-table-column>
          <el-table-column prop="questionCount" label="试题总数" align="center" min-width="70"></el-table-column>
          <el-table-column prop="score" label="总分" align="center" min-width="70"></el-table-column>
          <el-table-column prop="difficult" label="试卷难度" align="center" min-width="70" sortable="custom">
            <template slot-scope="scope">{{ difficults.find(e => e.id === scope.row.difficult) ? difficults.find(e =>
              e.id === scope.row.difficult).name : '' }}</template>
          </el-table-column>
          <el-table-column prop="suggestTime" label="建议用时" align="center" min-width="70">
            <template slot-scope="scope">{{ scope.row.suggestTime }}min</template>
          </el-table-column>
          <el-table-column prop="classificationPath" label="试卷分类" align="center" min-width="70"
            show-overflow-tooltip></el-table-column>
          <el-table-column label="建议用途" align="center" min-width="70">
            <template slot-scope="scope">{{ paperTypes.find(e => e.id === scope.row.paperType) ? paperTypes.find(e =>
              e.id === scope.row.paperType).name : '' }}</template>
          </el-table-column>
          <el-table-column prop="updateTime" label="最近编辑时间" align="center" width="170"></el-table-column>
          <el-table-column prop="createUser" label="最近编辑人" align="center" width="110"></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>
    </template>


    <template v-else>
      <el-card shadow="hover" class="mgr20 m-b-20">
        <div>
          <p class="m-b-20">课程</p>
          <div class="inline-input">
            <el-cascader ref="cur" v-model="mallIds" :options="curs" :props="{ checkStrictly: true, value: 'id' }"
              popper-class="course-cas" @expand-change="curChange" @change="curChange"></el-cascader>
          </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>
    </template>

    <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'
import TestPaperConst from '@/const/testPaper'
export default {
  props: ['form', 'step1'],
  data () {
    return {
      difficults: TestPaperConst.difficults,
      paperTypes: TestPaperConst.paperTypes,
      loadIns: null,
      mallIds: [],
      curs: [],
      paperLibraries: [],
      testPapers: [],
      keyword: '',
      projects: [],
      page: 1,
      pageSize: 5,
      total: 0,
      libraryId: '',
      sysId: '',
      paperId: '',
      paperName: '',
      permissionsKeys: ['练习', '考核', '竞赛'],
      timeInvalid: false,
    };
  },
  computed: {
    // 是否理论考试
    isTheory () {
      return this.form.method === 1
    },
  },
  watch: {
    // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
    form: {
      handler () {
        this.updateTime++
      },
      deep: true
    },
    keyword: function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted () {
    this.isTheory ? this.getLibrary() : this.getCourse()
  },
  methods: {
    // 获取课程
    async getCourse () {
      const sid = this.$store.state.dataPer.find(e => e.permissionName === '服务配置')
      const { serviceList } = await this.$post(this.api.queryServiceConfig, {
        pageNum: 1,
        pageSize: 1000,
        supplierId: sid ? sid.supplierId : ''
      })
      const { page } = await this.$post(this.api.listOfGoods, {
        pageNum: 1,
        pageSize: 10000,
        hotTag: 1,
        sort: 0,
        isAssociatedProduct: 1,
        isShelves: 0,
      })
      const { records } = page
      const { mallId, cid, systemId } = this.form
      if (records.length) {
        serviceList.records.map(e => {
          e.id = +e.systemId
          e.label = e.systemName
        })
        records.map(e => {
          e.id = +e.mallId
          e.label = e.productName
          e.children = serviceList.records.filter(n => e.systemId && e.systemId.split(',').includes(n.systemId)) // 筛选出该课程下的系统
        })
        this.curs = records

        // 查询项目
        const first = records[0]
        this.mallIds = [mallId || first.mallId, systemId || first.children[0].id]
        this.form.mallId = mallId || first.mallId
        this.form.cid = cid || +first.associatedProduct
        this.form.systemId = systemId || first.systemId
        this.sysId = systemId || first.systemId
        this.loadIns = Loading.service()
        this.getProject()
      }
    },
    // 课程选择回调
    curChange (val) {
      const id = val[0]
      const item = this.curs.find(e => e.id == id)
      if (val.length === 1) {
        // 如果选择的是课程，则默认选中下面第一个系统
        this.mallIds = [id, item.children[0].id]
      }
      this.form.mallId = id
      this.form.cid = +item.associatedProduct
      this.form.systemId = this.mallIds[1]
      this.sysId = this.mallIds[1]
      this.loadIns = Loading.service()
      this.getProject()
    },
    // 查询试卷库
    async getLibrary () {
      try {
        const res = await this.$post(this.api.libraryList, {
          pageNum: 1,
          pageSize: 10000,
          type: 1
        })
        const { records } = res.pageList
        if (records.length) {
          this.paperLibraries = records
          this.libraryId = records[0].libraryId
          this.loadIns = Loading.service()
          this.getProject()
        }
      } finally { }
    },

    // 查询项目/试卷
    async getProject () {
      try {
        // 理论查询试卷
        if (this.isTheory) {
          const res = await this.$post(this.api.examPaperList, {
            pageNum: this.page,
            pageSize: this.pageSize,
            type: 1,
            keyWord: this.keyword,
            libraryId: this.libraryId
          })
          this.projects = res.pageList.records
          this.total = res.pageList.total
        } else {
          // 实训查询项目
          const { data } = await this.$post(this.api.getProjectAssessmentByCompetition, {
            pageNum: this.page,
            pageSize: this.pageSize,
            cid: this.form.cid,
            projectName: this.keyword,
            systemId: this.sysId,
            permissions: 2
          })
          this.projects = data.records
          this.total = data.total
        }
      } finally {
        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('setCompetitionCache', {
        form,
        curStep
      })
      this.$router.push(`/projectList?systemId=${this.mallIds[1]}&show=1&name=${this.$refs.cur.getCheckedNodes()[0].label}`)
    },
    // 时间选择回调
    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 (this.isTheory) {
        if (!this.libraryId) return util.warningMsg('请选择试卷库')
        if (!form.paperId) return util.warningMsg('请选择试卷')

        form.libraryId = this.libraryId
        const curPaper = this.projects.find(e => e.paperId === form.paperId)
        if (curPaper) form.paperName = curPaper.name
      } else {
        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.handlePaper()
      this.$emit('hideSet', this.form)
    },
    // 复制试卷
    async handlePaper () {
      const { form } = this
      // 老的试卷名称不等于新的试卷名称，则复制一份试卷，再把新的试卷id替换掉
      if (form.paperName !== form.originPaperName) {
        const res = await this.$post(this.api.copyExamPaper, {
          associatedID: form.stageId,
          paperId: form.paperId,
          typeId: 1
        })
        if (res.examPaper) {
          form.paperId = res.examPaper.paperId
        }
      }
    },
    // 返回
    back () {
      this.$emit('update:form', this.$parent.curOriginForm)
      this.$emit('hideSet')
    }
  }
};
</script>

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