<template>
  <div class="container">
    <!-- <h1>{{ this.list.userId }}</h1> -->
    <!-- <h1>{{ UserInfoDetail.school }}</h1> -->
    <div>
      <el-button
        class="addCourseInfo"
        type="primary"
        @click="courseInfoVisible = true"
        >添加课程信息</el-button
      >
    </div>

    <div v-for="(item, index) in courseList" :key="index" class="courseList">
      <!-- <h3 class="costTag">{{ item.costTag }}</h3> -->
      <div class="costTag">
        <span>{{ item.costTag }}</span>
      </div>
      <div class="titleLine">
        <div class="box">
          <span>课程数量：</span>
          <span class="fuck">{{ item.userCourseList.length }}</span>
        </div>
        <div class="box">
          <span>审课学姐：</span>
          <span class="fuck">{{ item.auditSenior }}</span>
        </div>
        <div class="box">
          <span>授课形式：</span>
          <span class="fuck">{{ item.teachWay }}</span>
        </div>
        <div class="box">
          <span>审课大学：</span>
          <span class="fuck">{{ item.auditSchool }}</span>
        </div>
        <div class="box">
          <el-button size="mini" @click="editCourseTitle(index,item.costTagId)"
            >编辑</el-button
          >
        </div>
        <div class="box">
          <el-button @click="goOn(index)" type="primary" size="small"
            >继续添加本期课程</el-button
          >
        </div>
      </div>

      <div class="table-container">
        <el-table
          ref="productTable"
          :data="item.userCourseList"
          style="width: 100%"
          v-loading="listLoading"
          border
          stripe
        >
          <!-- <el-table-column
            type="index"
            width="60"
            align="center"
          ></el-table-column> -->
          <!-- <el-table-column  label="姓名" align="center">
            <template slot-scope="scope">
              <div
                class="handleStuDetail"
                @click="handleStuDetail(scope.row.userId)"
              >
                {{ index }}
              </div>
            </template>
          </el-table-column> -->

          <el-table-column label="选课" align="center" width="100px">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>

          <el-table-column label="年份" align="center" width="100px">
            <template slot-scope="scope">{{ scope.row.yearTime }}</template>
          </el-table-column>
          <!-- <el-table-column label="年级" align="center">
          <template slot-scope="scope">
            <div v-show="scope.row.grade == 1">大学一年级</div>
            <div v-show="scope.row.grade == 2">大学二年级</div>
            <div v-show="scope.row.grade == 3">大学三年级</div>
            <div v-show="scope.row.grade == 4">大学四年级</div>
            <div v-show="scope.row.grade == 5">大学五年级</div>
          </template>
        </el-table-column> -->
          <el-table-column label="学期" align="center">
            <template slot-scope="scope">{{ scope.row.term }}</template>
          </el-table-column>
          <el-table-column label="cso课程代码" align="center">
            <template slot-scope="scope">{{ scope.row.csoCode }}</template>
          </el-table-column>
          <el-table-column label="cso课程名称" align="center">
            <template slot-scope="scope">{{ scope.row.csoName }}</template>
          </el-table-column>

          <el-table-column label="所在学校课程代码" align="center">
            <template slot-scope="scope">{{ scope.row.courseCode }}</template>
          </el-table-column>
          <el-table-column label="所在学校课程名称" align="center">
            <template slot-scope="scope">{{ scope.row.courseName }}</template>
          </el-table-column>

          <el-table-column label="审课学校课程代码" align="center">
            <template slot-scope="scope">{{
              scope.row.auditCourseCode
            }}</template>
          </el-table-column>
          <el-table-column label="审课学校课程名称" align="center">
            <template slot-scope="scope">{{
              scope.row.auditCourseName
            }}</template>
          </el-table-column>

          <!-- <el-table-column label="index" align="center">
            <template slot-scope="scope">{{ index }}</template>
          </el-table-column>

          <el-table-column label="index2" align="center">
            <template slot-scope="scope">{{ scope.$index }}</template>
          </el-table-column> -->

          <!-- <el-table-column label="学员状态" align="center">
            <template slot-scope="scope">
              <el-select clearable v-model="scope.row.state">
                <el-option label="待选课" :value="1"> </el-option>
                <el-option label="审核失败" :value="2"> </el-option>
              </el-select>
            </template>
          </el-table-column> -->

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!-- <el-button
                @click="confirm(scope.row.userCourseList, scope.row.state)"
                type="mini"
                >确认</el-button
              > -->

              <el-button
                size="mini"
                type="warning"
                @click="editCourse(index, scope.$index)"
                >自定义</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="delCourse(index, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- <el-descriptions
        :title="'选课' + (index2 + 1)"
        v-for="(item2, index2) in item.userCourseList"
        :key="index2"
        :column="10"
      >
        <el-descriptions-item label="年份">{{
          item2.yearTime
        }}</el-descriptions-item>
        <el-descriptions-item label="学期">{{
          item2.term
        }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="课程名称">{{
          item2.courseName
        }}</el-descriptions-item>
        <el-descriptions-item
          v-if="item2.ownCourseCode"
          :span="2"
          label="所在学校课程代码"
          >{{ item2.ownCourseCode }}</el-descriptions-item
        >
        <el-descriptions-item
          v-if="item2.csoCourseCode"
          :span="2"
          label="cso课程代码"
          >{{ item2.csoCourseCode }}</el-descriptions-item
        >
        <el-descriptions-item
          v-if="item2.auditCourseCode"
          :span="2"
          label="审课大学课程代码"
          >{{ item2.auditCourseCode }}</el-descriptions-item
        >
        <el-descriptions-item label="操作">
          <el-button size="mini" @click="editCourse(index, index2)"
            >编辑</el-button
          >
          <el-button size="mini" @click="delCourse(index, index2)"
            >删除</el-button
          >
        </el-descriptions-item>
      </el-descriptions> -->
    </div>

    <el-dialog
      title="继续添加课程信息"
      :visible.sync="goOnVisible"
      width="80%"
      @close="cancel('goOnForm')"
    >
      <el-form :model="goOnForm" :rules="rules" ref="goOnForm">
        <div class="line">
          <el-form-item
            label="课程数量"
            prop="num"
            :label-width="formLabelWidth"
          >
            <el-select v-model="num" clearable>
              <el-option
                v-for="item in 10"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-for="(item, index) in num" :key="index" class="line2">
          <div>{{ "选课" + item }}</div>
          <div class="line">
            <el-col :span="8">
              <el-form-item label="年份" required label-width="150px">
                <el-input v-model="goOnForm.userCourseList[index].yearTime">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="学期" required label-width="150px">
                <el-input v-model="goOnForm.userCourseList[index].term">
                </el-input>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="6">

              <el-form-item label="cso课程代码" label-width="150px">
                <el-select
                  v-model="goOnForm.userCourseList[index].csoCourseCode"
                  clearable
                  :disabled="
                    goOnForm.userCourseList[index].ownCourseCode ||
                    goOnForm.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                  <el-option
                    v-for="(item, index) in allCode"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </div>

          <div class="line">
            <el-col :span="8">
              <el-form-item label="cso课程代码" label-width="150px">
                <el-select
                  v-model="goOnForm.userCourseList[index].csoCourseCode"
                  clearable
                  :disabled="
                    goOnForm.userCourseList[index].ownCourseCode ||
                    goOnForm.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                  @change="matchCodeGoon($event, index)"
                >
                  <el-option
                    v-for="(item, index) in allCode2"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="cso课程名称" label-width="150px">
                <!-- <el-input v-model="list.userCourseList[index].courseName"> -->
                <el-input
                  v-model="goOnForm.userCourseList[index].csoName"
                  :disabled="
                    goOnForm.userCourseList[index].ownCourseCode ||
                    goOnForm.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>
          </div>

          <div class="line">
            <el-col :span="8">
              <el-form-item label="所在学校课程代码" label-width="150px">
                <el-input
                  v-model="goOnForm.userCourseList[index].ownCourseCode"
                  :disabled="
                    goOnForm.userCourseList[index].csoCourseCode ||
                    goOnForm.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="所在学校课程名称" label-width="150px">
                <el-input
                  v-model="goOnForm.userCourseList[index].courseName"
                  :disabled="
                    goOnForm.userCourseList[index].csoCourseCode ||
                    goOnForm.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>
          </div>

          <div class="line">
            <!-- <el-col :span="6">
              
              <el-form-item label="所在学校课程代码" label-width="150px">
                <el-input
                  v-model="goOnForm.userCourseList[index].ownCourseCode"
                  :disabled="
                    goOnForm.userCourseList[index].csoCourseCode ||
                    goOnForm.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col> -->

            <el-col :span="8">
              <el-form-item label="审课大学课程代码" label-width="150px">
                <el-input
                  v-model="goOnForm.userCourseList[index].auditCourseCode"
                  :disabled="
                    goOnForm.userCourseList[index].csoCourseCode ||
                    goOnForm.userCourseList[index].ownCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="审课学校课程名称" label-width="150px">
                <el-input
                  v-model="goOnForm.userCourseList[index].auditCourseName"
                  :disabled="
                    goOnForm.userCourseList[index].csoCourseCode ||
                    goOnForm.userCourseList[index].ownCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-divider></el-divider>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('goOnForm')">取 消</el-button>
        <el-button type="primary" @click="submitGoOnForm('goOnForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="编辑课程标题信息"
      :visible.sync="editCourseTitleVisible"
      width="80%"
      @close="cancel('editCourseTitleForm')"
    >
      <el-form :model="courseTitle" ref="editCourseTitleForm">
        <div class="line">
          <el-form-item label="审课学姐" :label-width="formLabelWidth">
            <el-input v-model="courseTitle.auditSenior" clearable> </el-input>
          </el-form-item>
          <el-form-item label="授课形式" :label-width="formLabelWidth">
            <el-input v-model="courseTitle.teachWay" clearable> </el-input>
          </el-form-item>
          <el-form-item label="审课大学" :label-width="formLabelWidth">
            <el-input v-model="courseTitle.auditSchool" clearable disabled> </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('editCourseTitleForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="submitEditCourseTitleForm('editCourseTitleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="自定义"
      :visible.sync="editCourseInfoVisible"
      width="80%"
      @close="cancel('editCourseForm')"
    >
      <el-form :model="editListItem" :rules="rules" ref="editCourseForm">
        <!-- <div class="line">
          <el-col :span="8">
            <el-form-item label="年份" label-width="150px">
              <el-input v-model="editListItem.yearTime">
                
              </el-input>
            </el-form-item></el-col
          >

          <el-col :span="8">
            <el-form-item label="学期" label-width="150px">
              <el-input v-model="editListItem.term">
               
              </el-input>
            </el-form-item></el-col
          >     
        </div> -->

        <!-- <div class="line">
          <el-col :span="8">
            <el-form-item label="cso课程代码" label-width="150px">
              <el-select
                v-model="editListItem.csoCourseCode"
                clearable
                :disabled="
                  editListItem.ownCourseCode || editListItem.auditCourseCode
                    ? true
                    : false
                "
                @change="matchCodeGoon($event, index)"
              >
                <el-option
                  v-for="(item, index) in allCode2"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="cso课程名称" label-width="150px">
             
              <el-input
                v-model="editListItem.csoName"
                :disabled="
                  editListItem.ownCourseCode || editListItem.auditCourseCode
                    ? true
                    : false
                "
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div> -->

        <!-- <div class="line">
          <el-col :span="8">
            <el-form-item label="所在学校课程代码" label-width="150px">
              <el-input
                v-model="editListItem.ownCourseCode"
                :disabled="
                  editListItem.csoCourseCode || editListItem.auditCourseCode
                    ? true
                    : false
                "
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所在学校课程名称" label-width="150px">
              <el-input
                v-model="editListItem.courseName"
                :disabled="
                  editListItem.csoCourseCode || editListItem.auditCourseCode
                    ? true
                    : false
                "
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div> -->

        <div class="line">
          <el-col :span="8">
            <el-form-item label="审课大学课程代码" label-width="150px">
              <el-input
                v-model="editListItem.auditCourseCode"
                :disabled="
                  editListItem.csoCourseCode || editListItem.ownCourseCode
                    ? true
                    : false
                "
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="审课学校课程名称" label-width="150px">
              <el-input
                v-model="editListItem.auditCourseName"
                :disabled="
                  editListItem.csoCourseCode || editListItem.ownCourseCode
                    ? true
                    : false
                "
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('editCourseForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="submitEditCourseForm('editCourseForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="添加课程信息"
      :visible.sync="courseInfoVisible"
      width="80%"
      @close="cancel('form')"
    >
      <!-- {{ list.userCourseList }} -->
      <el-form :model="list" :rules="rules" ref="form">
        <div class="line">
          <el-form-item
            label="缴费标签"
            prop="costTagId"
            :label-width="formLabelWidth"
          >
            <el-select v-model="list.costTagId" clearable>
              <el-option
                v-for="item in allPayCode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="课程数量"
            prop="num"
            :label-width="formLabelWidth"
          >
            <el-select v-model="num" clearable>
              <el-option
                v-for="item in 10"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item
            label="审课大学"
            prop="auditSchool"
            :label-width="formLabelWidth"
          >
            <el-input
              @change="reportSchool"
              v-model="list.auditSchool"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="审课学姐"
            prop="auditSenior"
            :label-width="formLabelWidth"
          >
            <el-input v-model="list.auditSenior" clearable> </el-input>
          </el-form-item>
          <el-form-item
            label="授课形式"
            prop="teachWay"
            :label-width="formLabelWidth"
          >
            <el-input v-model="list.teachWay" clearable> </el-input>
          </el-form-item>
        </div>

        <div v-for="(item, index) in num" :key="index" class="line2">
          <div>{{ "选课" + item }}</div>
          <div class="line">
            <el-col :span="8">
              <el-form-item label="年份" required label-width="150px">
                <el-input v-model="list.userCourseList[index].yearTime">
                  <!-- <template slot="append">年</template> -->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学期" required label-width="150px">
                <el-input v-model="list.userCourseList[index].term">
                  <!-- <template slot="append">学期</template> -->
                </el-input>
              </el-form-item>
            </el-col>
          </div>

          <div class="line">
            <el-col :span="8">
              <el-form-item label="cso课程代码" label-width="150px">
                <el-select
                  v-model="list.userCourseList[index].csoCourseCode"
                  :disabled="
                    list.userCourseList[index].ownCourseCode ||
                    list.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                  clearable
                  filterable
                  @change="matchCode($event, index)"
                >
                  <el-option
                    v-for="(item, index) in allCode"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="cso课程名称" :label-width="formLabelWidth">
                <el-input v-model="list.userCourseList[index].courseName">
                </el-input>
              </el-form-item> -->
            </el-col>

            <el-col :span="8">
              <el-form-item label="cso课程名称" label-width="150px">
                <!-- <el-input v-model="list.userCourseList[index].courseName"> -->
                <el-input
                  v-model="list.userCourseList[index].csoName"
                  :disabled="
                    list.userCourseList[index].ownCourseCode ||
                    list.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>
          </div>

          <div class="line">
            <!-- <el-col :span="8"> -->
            <!-- <el-form-item label="所在学校课程代码" label-width="150px">
                <el-input
                  v-model="list.userCourseList[index].ownCourseCode"
                  :disabled="
                    list.userCourseList[index].csoCourseCode ||
                    list.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item> -->

            <!-- <el-form-item label="课程名称" :label-width="formLabelWidth">
                <el-input v-model="list.userCourseList[index].courseName">
                </el-input>
              </el-form-item> -->
            <!-- </el-col> -->

            <el-col :span="8">
              <!-- <el-form-item label="cso课程代码" label-width="150px">
                <el-select
                  v-model="list.userCourseList[index].csoCourseCode"
                  clearable
                  :disabled="
                    list.userCourseList[index].ownCourseCode ||
                    list.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                  
                  <el-option
                    v-for="(item, index) in allCode"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="所在学校课程代码" label-width="150px">
                <el-input
                  v-model="list.userCourseList[index].ownCourseCode"
                  :disabled="
                    list.userCourseList[index].csoCourseCode ||
                    list.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="所在学校课程名称" label-width="150px">
                <el-input
                  v-model="list.userCourseList[index].courseName"
                  :disabled="
                    list.userCourseList[index].csoCourseCode ||
                    list.userCourseList[index].auditCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="8">
              <el-form-item label="审课大学课程代码" label-width="150px">
                <el-input
                  v-model="list.userCourseList[index].auditCourseCode"
                  :disabled="
                    list.userCourseList[index].ownCourseCode ||
                    list.userCourseList[index].csoCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col> -->
          </div>

          <div class="line">
            <el-col :span="8">
              <el-form-item label="审课学校课程代码" label-width="150px">
                <el-input
                  v-model="list.userCourseList[index].auditCourseCode"
                  :disabled="
                    list.userCourseList[index].csoCourseCode ||
                    list.userCourseList[index].ownCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="审课学校课程名称" label-width="150px">
                <el-input
                  v-model="list.userCourseList[index].auditCourseName"
                  :disabled="
                    list.userCourseList[index].csoCourseCode ||
                    list.userCourseList[index].ownCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="8">
              <el-form-item label="审课大学课程代码" label-width="150px">
                <el-input
                  v-model="list.userCourseList[index].auditCourseCode"
                  :disabled="
                    list.userCourseList[index].ownCourseCode ||
                    list.userCourseList[index].csoCourseCode
                      ? true
                      : false
                  "
                >
                </el-input>
              </el-form-item>
            </el-col> -->
          </div>
          <el-divider></el-divider>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addCourse,
  allCode,
  allPayCode,
  courseList,
  editUpdate,
  customizationCourse,
  deleteCourse,
  updateAuditCourse,
  addCurrentTermCourse,
  getCsoCode
} from "@/api/cso";
export default {
  name: "courseInfo",
  props: ["id", "UserInfoDetail"],
  data() {
    return {
      listLoading: true,
      userId: "",
      courseInfoVisible: false,
      editCourseInfoVisible: false,
      editCourseTitleVisible: false,
      goOnVisible: false,
      editIndexOne: "",
      editIndexTwo: "",
      courseTitle: {
        auditSchool: "",
        auditSenior: "",
        teachWay: "",
        costTagId:"",
        userId:""
      },
      editListItem: {},
      goOnForm: { userCourseList: [] },
      list: {
        costTag: "",
        costTagId: "",
        auditSenior: "",
        teachWay: "",
        auditSchool: "",
        userCourseList: [],
        userId: ""
      },
      formLabelWidth: "100px",

      num: "",
      num2: "",

      rules: {
        costTagId: [
          { required: true, message: "请选择缴费标签", trigger: "change" }
        ],
        auditSenior: [
          { required: true, message: "请输入审课学姐", trigger: "blur" }
        ],
        teachWay: [
          { required: true, message: "请输入授课形式", trigger: "blur" }
        ],
        auditSchool: [
          { required: true, message: "请输入审课大学", trigger: "blur" }
        ]
      },

      allCode: [],
      allCode2: [],
      allPayCode: [],
      isOK: false,
      courseList: [],
      csoCodeInfo: []
    };
  },
  watch: {
    num(newValue, oldValue) {
      // console.log(newValue, oldValue, "num");
      if (newValue > oldValue) {
        for (let i = 0; i < newValue - oldValue; i++) {
          this.list.userCourseList.push({});
          this.goOnForm.userCourseList.push({});
        }
      }
      if (newValue < oldValue) {
        for (let i = 0; i < oldValue - newValue; i++) {
          this.list.userCourseList.pop({});
          this.goOnForm.userCourseList.pop({});
        }
      }
    }
  },
  methods: {
    // test(val) {
    //   console.log(val, "val");
    // },
    submitForm(formName) {
      //   console.log(this.list, "submitForm");
      this.list.userId = this.$route.query.id;
      this.list.userCourseList.forEach(item => {
        if (!item.yearTime || !item.term) {
          this.$message({
            type: "error",
            message: "请填写完整信息",
            duration: 1000
          });
          //   console.log("NO");
          this.isOK = false;
        } else {
          //   console.log("OK");
          this.isOK = true;
        }
      });
      //   console.log(this.isOK, "this.isOK");
      this.$refs[formName].validate(valid => {
        if (valid && this.isOK) {
          this.$confirm("是否要提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.list.umsUserCourses = this.list.userCourseList; //新来的后端比较菜，原来的接口字段不会改，只能搞了个新的名字
            addCourse(this.list).then(response => {
              // console.log(this.list, "addCourse");
              this.$message({
                type: "success",
                message: "提交成功",
                duration: 1000
              });
              // location.reload();
              this.courseInfoVisible = false;
              this.editCourseInfoVisible = false;
              this.editCourseTitleVisible = false;
              this.goOnVisible = false;
              this.getCourseList();
              this.$forceUpdate();
            });
          });
        } else {
          console.log("error submit!!");
          console.log(valid);
          return false;
        }
      });
    },
    submitEditCourseForm() {
      this.$confirm("是否要提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // editUpdate(this.editListItem).then(response => {
        //   this.$message({
        //     type: "success",
        //     message: "提交成功",
        //     duration: 1000
        //   });
        //   this.courseInfoVisible = false;
        //   this.editCourseInfoVisible = false;
        //   this.editCourseTitleVisible = false;
        //   this.goOnVisible = false;
        //   this.getCourseList();
        //   this.$forceUpdate();
        // });
        // console.log(this.editListItem, "this.editListItem");
        let obj = {};
        obj.newCourseCode = this.editListItem.auditCourseCode;
        obj.newCourseName = this.editListItem.auditCourseName;
        obj.userCourseId = this.editListItem.id;
        customizationCourse(obj).then(res => {
          console.log(res, "customizationCourse");
          obj = {};
          this.courseInfoVisible = false;
          this.editCourseInfoVisible = false;
          this.editCourseTitleVisible = false;
          this.goOnVisible = false;
          this.getCourseList();
        });
      });
    },
    submitEditCourseTitleForm() {
      console.log(this.courseTitle,this.courseTitle.userId,this.courseTitle.costTagId,'title');
      this.$confirm("是否要提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        updateAuditCourse(this.courseTitle).then(response => {
          this.$message({
            type: "success",
            message: "提交成功",
            duration: 1000
          });
          this.courseInfoVisible = false;
          this.editCourseInfoVisible = false;
          this.editCourseTitleVisible = false;
          this.goOnVisible = false;
          this.getCourseList();
          this.$forceUpdate();
        });
      });
    },
    submitGoOnForm() {
      this.goOnForm.userCourseList.forEach(item => {
        if (!item.yearTime || !item.term) {
          this.$message({
            type: "error",
            message: "请填写年份学期",
            duration: 1000
          });
          //   console.log("NO");
          this.isOK = false;
        } else {
          //   console.log("OK");
          this.isOK = true;
        }
      });

      if (this.isOK) {
        this.$confirm("是否要提交", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.goOnForm.umsUserCourses = this.goOnForm.userCourseList; //新来的后端比较菜，原来的接口字段不会改，只能搞了个新的名字
          this.goOnForm.umsUserCourses.forEach(item => {
            if (item.auditCourseName) {
              item.courseName = item.auditCourseName;
            }
          });
          addCurrentTermCourse(this.goOnForm).then(response => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1000
            });
            this.courseInfoVisible = false;
            this.editCourseInfoVisible = false;
            this.editCourseTitleVisible = false;
            this.goOnVisible = false;
            this.getCourseList();
            this.$forceUpdate();
          });
        });
      }
    },
    cancel(formName) {
      this.courseInfoVisible = false;
      this.editCourseInfoVisible = false;
      this.editCourseTitleVisible = false;
      this.goOnVisible = false;
      this.$refs[formName].resetFields();
      this.num = 0;
      this.list = { userCourseList: [] };
      this.list.userId = this.$route.query.id;
      this.num = null;
      //   console.log(this.$refs[formName], "this.$refs[formName]");
    },
    // getAllCode() {
    //   allCode({
    //     pageNum: 1,
    //     pageSize: 999
    //   }).then(res => {
    //     // console.log(res.data.list, "getAllCode");
    //     res.data.list.forEach(item => {
    //       let obj = {};
    //       obj.label = item.csoCode;
    //       obj.value = item.csoCode;
    //       this.allCode.push(obj);
    //     });
    //     // console.log(this.allCode, "this.allCode");
    //   });
    // },
    getAllPayCode() {
      allPayCode({
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        // console.log(res.data.list, "getAllPayCode");
        res.data.list.forEach(item => {
          let obj = {};
          obj.label = item.costTag;
          obj.value = item.id;
          this.allPayCode.push(obj);
        });
        // console.log(this.allPayCode);
      });
    },
    getCourseList() {
      this.listLoading = true;
      courseList({
        pageNum: 1,
        pageSize: 999,
        userId: this.userId
      }).then(res => {
        this.listLoading = false;
        this.courseList = res.data.list;
        // console.log(this.courseList, "this.courseList");
      });
    },
    editCourse(index, index2) {
      //  console.log(index2, "editCourse");
      this.editCourseInfoVisible = true;
      this.editIndexOne = index;
      this.editIndexTwo = index2;
      let a = this.courseList[this.editIndexOne];
      let b = a.userCourseList;
      let c = b[this.editIndexTwo];
      this.editListItem = c;
      //  console.log(this.editListItem, "this.editListItem");
      // this.editListItem.userId = this.id;
      // console.log(this.editListItem, "this.editListItem");
      // 妈的，连.被格式化没了，只能如此愚蠢的赋值
      // console.log(a, "a");
      // console.log(b, "b");
      // console.log(c, "c");
    },
    delCourse(index, index2) {
      this.editIndexOne = index;
      this.editIndexTwo = index2;
      let a = this.courseList[this.editIndexOne];
      let b = a.userCourseList;
      let c = b[this.editIndexTwo];
      this.editListItem = c;
      // console.log(this.editListItem.id, "this.editListItem");

      this.$confirm("是否要删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteCourse(this.editListItem.id).then(response => {
          this.$message({
            type: "success",
            message: "删除成功",
            duration: 1000
          });
          this.getCourseList();
          this.$forceUpdate();
        });
      });
    },
    editCourseTitle(index,costTagId) {
      // this.courseTitle = this.courseList[index];
      this.courseTitle.costTagId = costTagId;
      this.courseTitle.id = this.courseList[index].id;
      this.courseTitle.auditSenior = this.courseList[index].auditSenior;
      this.courseTitle.teachWay = this.courseList[index].teachWay;
      this.courseTitle.auditSchool = this.courseList[index].auditSchool;
      this.courseTitle.userId = this.userId
      this.editCourseTitleVisible = true;
      // courseList[courseTitleIndex]
      // console.log(this.courseTitle,index,costTagId, "6666666666666");
    },
    goOn(index) {
      this.goOnVisible = true;
      // console.log(this.goOnForm, "goOn11");
      this.goOnForm.id = this.courseList[index].id;
      this.goOnForm.costTagId = this.courseList[index].costTagId;
      this.goOnForm.userId = this.courseList[index].userId;
      // this.goOnForm.auditSenior = this.courseList[index].auditSenior;
      // this.goOnForm.teachWay = this.courseList[index].teachWay;
      // this.goOnForm.auditSchool = this.courseList[index].auditSchool;
      this.goOnForm.userCourseList = [];
      this.initCsoCode(this.courseList[index].auditSchool);
      // console.log(this.goOnForm, "goOn22");
      // console.log(this.goOnForm.costTag, "goOn.costTag");
    },
    reportSchool(val) {
      // console.log(val, "66666666666");
      getCsoCode({
        school: this.UserInfoDetail.school,
        auditSchool: val
      }).then(res => {
        // console.log(res, "getCsoCode");
        if (res.data) {
          res.data.csoCodeList.forEach(item => {
            let obj = {};
            obj.label = item;
            obj.value = item;
            this.allCode.push(obj);
          });
          this.csoCodeInfo = JSON.parse(JSON.stringify(res.data.csoCodeInfo));
          // console.log(this.csoCodeInfo, "this.csoCodeInfo");
        } else {
          this.allCode = [];
        }
      });
    },
    initCsoCode(val) {
      getCsoCode({
        school: this.UserInfoDetail.school,
        auditSchool: val
      }).then(res => {
        // console.log(res, "getCsoCode");
        if (res.data) {
          res.data.csoCodeList.forEach(item => {
            let obj = {};
            obj.label = item;
            obj.value = item;
            this.allCode2.push(obj);
          });
          this.csoCodeInfo = JSON.parse(JSON.stringify(res.data.csoCodeInfo));
          // console.log(this.csoCodeInfo, "this.csoCodeInfo");
        } else {
          this.allCode2 = [];
        }
      });
    },
    matchCode(val, index) {
      // console.log(val, index, "matchCode");
      let arr = [];
      if (val) {
        // arr = this.csoCodeInfo.filter(item => {
        //   return item.csoCode == val;
        // });
        this.csoCodeInfo.forEach(item => {
          if (item.csoCode == val) {
            this.list.userCourseList[index].csoCourseCode = item.csoCode;
            this.list.userCourseList[index].csoName = item.csoName;
            // this.list.userCourseList[index].courseCode = item.courseCode;
            // this.list.userCourseList[index].courseName = item.courseName;
            // this.list.userCourseList[index].auditCourseCode =
            //   item.auditCourseCode;
            // this.list.userCourseList[index].auditCourseName =
            //   item.auditCourseName;
          }
        });
      }
      // console.log(this.list.userCourseList, "matchCode");
    },
    matchCodeGoon(val, index) {
      // console.log(val, index, "matchCode");
      let arr = [];
      if (val) {
        // arr = this.csoCodeInfo.filter(item => {
        //   return item.csoCode == val;
        // });
        this.csoCodeInfo.forEach(item => {
          if (item.csoCode == val) {
            this.goOnForm.userCourseList[index].csoCourseCode = item.csoCode;
            this.goOnForm.userCourseList[index].csoName = item.csoName;
            // this.list.userCourseList[index].courseCode = item.courseCode;
            // this.list.userCourseList[index].courseName = item.courseName;
            // this.list.userCourseList[index].auditCourseCode =
            //   item.auditCourseCode;
            // this.list.userCourseList[index].auditCourseName =
            //   item.auditCourseName;
          }
        });
      }
      // console.log(this.list.userCourseList, "matchCode");
    }
  },
  mounted() {
    // console.log(this.payInfo, "payInfo");
    this.userId = this.$route.query.id;
    this.list.userId = this.$route.query.id;
    // this.getAllCode();
    this.getAllPayCode();
    this.getCourseList();
    // console.log(this.list.userId, "this.list.userId");
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  //   background-color: red;
  .addCourseInfo {
    float: right;
  }
}
.el-dialog {
  width: 80vw;
}
.line {
  display: flex;
  align-items: center;
}
.line2 {
  margin: 15px;
}
.courseList {
  margin-bottom: 30px;
  .costTag {
    span {
      border: 3px solid #3498db;
      color: #3498db;
      font-weight: bold;
      padding: 5px 10px;
      margin: 10px;
      border-radius: 20px;
      margin-left: 0;
    }
    margin-bottom: 20px;
  }
  .titleLine {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    // justify-content: space-between;
    .box {
      margin-right: 30px;
      .fuck {
        color: #3498db;
      }
    }
  }
}
</style>
