<template>
  <div class="app-container">
    <el-button
      type="primary"
      plain
      size="mini"
      @click="examCourseAdd"
    >添加课程</el-button>
    <el-table
      :data="examCourseList"
      style="width: 100%">
      <el-table-column prop="evaluateAgencyId" label="机构" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.evaluateAgencyId" placeholder="请选择机构"  @change="handleAgencyChange(scope.$index)">
            <el-option
              v-for="(item, index) in evaluateAgencyOptions"
              :key="index"
              :label="item.evaluateAgencyName"
              :value="item.evaluateAgencyId">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="courseId" label="课程" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.courseId" placeholder="请选择课程">
            <el-option
              v-for="(item, index) in getCourseOptions(scope.$index)"
              :key="index"
              :label="item.courseName"
              :value="item.courseId">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="examCourseDelete(scope.row, scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {getSelectList} from "@/api/hezhi/evaluateAgency";
import {getAllCourseList} from "@/api/hezhi/link";

export default {
  name: "ExamCourse",
  props: {
    value: [Array],
    examCourseList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      evaluateAgencyOptions: [],
      courseOptions: [],
    };
  },
  created() {
    getSelectList().then(response => {
      this.evaluateAgencyOptions = response.data;
    });
    getAllCourseList().then(response => {
      this.courseOptions = response.data;
    });
  },
  methods: {
    // 重选机构清空对应课程
    handleAgencyChange(value) {
      this.examCourseList[value].courseId = null;
    },
    examCourseAdd(){
      let data = {
        evaluateAgencyId:null,
        courseId:null,
      }
      this.examCourseList.push(data);
    },
    examCourseDelete(row, index){
      this.examCourseList.splice(index, 1);
    },
    getCourseOptions(value) {
      let evaluateAgency = this.examCourseList[value];
      return this.courseOptions.filter(item => item.evaluateAgencyId === evaluateAgency.evaluateAgencyId);
    }
  }
};
</script>
