<template>
  <div class="container">
    <!-- <h1>{{ this.list.userId }}</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>{{ item.costTag }}</h3>
      <div class="titleLine">
        <div class="box">
          <span>课程数量：</span>
          <span>{{ item.userCourseList.length }}</span>
        </div>
        <div class="box">
          <span>审课学姐：</span>
          <span>{{ item.auditSenior }}</span>
        </div>
        <div class="box">
          <span>授课形式：</span>
          <span>{{ item.teachWay }}</span>
        </div>
        <div class="box">
          <span>审课大学：</span>
          <span>{{ item.auditSchool }}</span>
        </div>
        <div class="box">
          <el-button size="mini" @click="editCourseTitle(index)"
            >编辑</el-button
          >
        </div>
        <div class="box">
          <el-button @click="goOn(index)" type="primary" size="small"
            >继续添加本期课程</el-button
          >
        </div>
      </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="6">
              <el-form-item label="年份" required :label-width="formLabelWidth">
                <el-input v-model="goOnForm.userCourseList[index].yearTime">
                </el-input>
              </el-form-item>
            </el-col>

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

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

              <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="6">
              <el-form-item label="课程名称" :label-width="formLabelWidth">
                <el-input v-model="goOnForm.userCourseList[index].courseName">
                </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-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="6">
              <el-form-item label="审课大学课程代码" label-width="150px">
                <el-input
                  v-model="goOnForm.userCourseList[index].auditCourseCode"
                  :disabled="
                    goOnForm.userCourseList[index].ownCourseCode ||
                    goOnForm.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('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> </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-form-item :label="'选课'" :label-width="formLabelWidth">
            <el-input v-model="editListItem.yearTime">
              <template slot="append">年</template>
            </el-input>
          </el-form-item>
          <el-form-item label="" label-width="0px">
            <el-input v-model="editListItem.term">
              <template slot="append">学期</template>
            </el-input>
          </el-form-item>
          <el-form-item label="cso课程代码" label-width="120px">
            <el-select
              v-model="editListItem.csoCourseCode"
              clearable
              :disabled="
                editListItem.ownCourseCode && editListItem.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="formLabelWidth">
            <el-input v-model="editListItem.courseName"> </el-input>
          </el-form-item> -->
        </div>
        <div class="line">
          <el-form-item label="课程名称" :label-width="formLabelWidth">
            <el-input v-model="editListItem.courseName"> </el-input>
          </el-form-item>

          <el-form-item label="所在学校课程代码" label-width="150px">
            <el-input
              v-model="editListItem.ownCourseCode"
              :disabled="
                (editListItem.csoCourseCode && editListItem.auditCourseCode) ||
                editListItem.auditCourseCode
                  ? true
                  : false
              "
            >
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="cso课程代码" label-width="120px">
            <el-select
              v-model="editListItem.csoCourseCode"
              clearable
              :disabled="
                editListItem.ownCourseCode && editListItem.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="editListItem.auditCourseCode"
              :disabled="
                (editListItem.ownCourseCode && editListItem.csoCourseCode) ||
                editListItem.ownCourseCode
                  ? true
                  : false
              "
            >
            </el-input>
          </el-form-item>
        </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 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="6">
              <el-form-item label="年份" required :label-width="formLabelWidth">
                <el-input v-model="list.userCourseList[index].yearTime">
                  <!-- <template slot="append">年</template> -->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学期" required :label-width="formLabelWidth">
                <el-input v-model="list.userCourseList[index].term">
                  <!-- <template slot="append">学期</template> -->
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <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="formLabelWidth">
                <el-input v-model="list.userCourseList[index].courseName">
                </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].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,
  deleteCourse,
  updateAuditCourse,
  addCurrentTermCourse
} from "@/api/cso";
export default {
  name: "courseInfo",
  props: ["id"],
  data() {
    return {
      userId: "",
      courseInfoVisible: false,
      editCourseInfoVisible: false,
      editCourseTitleVisible: false,
      goOnVisible: false,
      editIndexOne: "",
      editIndexTwo: "",
      courseTitle: {
        auditSchool: "",
        auditSenior: "",
        teachWay: ""
      },
      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: [],
      allPayCode: [],
      isOK: false,
      courseList: []
    };
  },
  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: {
    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(() => {
            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();
        });
      });
    },
    submitEditCourseTitleForm() {
      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.$confirm("是否要提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        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() {
      courseList({
        pageNum: 1,
        pageSize: 999,
        userId: this.userId
      }).then(res => {
        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) {
      // this.courseTitle = this.courseList[index];
      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.editCourseTitleVisible = true;
      // courseList[courseTitleIndex]
      // console.log(this.courseTitle, "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 = [];
      // console.log(this.goOnForm, "goOn22");
      // console.log(this.goOnForm.costTag, "goOn.costTag");
    }
  },
  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 {
  .titleLine {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    // justify-content: space-between;
    .box {
      margin-right: 50px;
    }
  }
}
</style>
