<template>
  <div class="container">
    <div>
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch('listQuery')"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          :data="list"
          ref="listQuery"
          size="small"
          label-width="140px"
          @keyup.enter.native="handleSearchList()"
        >
          <el-form-item label="学生上课年份：" prop="yearTime">
            <el-select clearable v-model="listQuery.year">
              <el-option
                v-for="item in yearTimeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生上课学期：" prop="term">
            <el-input v-model="listQuery.term" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="isMatch">已匹配教授</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog
      title="编辑匹配教授"
      :visible.sync="editNoticeVisible"
      @close="cancel('editStorePF')"
    >
      <div>
        已储备教授: <span v-if="tipProfessors"> {{ tipProfessors }} </span>
        <span v-else> 暂无储备教授 </span>
      </div>
      <el-form :model="editStorePF" ref="editStorePF">
        <div class="line">
          <el-form-item label="匹配教授" prop="professor">
            <el-input type="textarea" autosize v-model="editStorePF.professor">
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('editStorePF')">取 消</el-button>
        <el-button type="primary" @click="submitEditForm('editStorePF')"
          >确 定</el-button
        >

        <!-- <el-button type="primary" @click="test">test</el-button> -->
      </div>
    </el-dialog>

    <div class="table-container">
      <el-table
        ref="productTable"
        :data="list"
        style="width: 100%"
        v-loading="listLoading"
        border
      >
        <el-table-column label="cso课程名称" align="center">
          <template slot-scope="scope">{{ scope.row.csoName }}</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="学生审课所处状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.state == 1">选课待确认</div>
            <div v-else-if="scope.row.state == 2">审课中</div>
            <div v-else>审课通过</div>
            <!-- {{scope.row.state}} -->
          </template>
        </el-table-column>
        <el-table-column label="学生上课年份" align="center">
          <template slot-scope="scope">{{ scope.row.yearTime }}</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="学生人数" align="center">
          <template slot-scope="scope">{{ scope.row.num }}</template>
        </el-table-column>
        <el-table-column label="储备教授" align="center">
          <template slot-scope="scope">{{
            scope.row.reserveProfessor
          }}</template>
        </el-table-column>

        <el-table-column label="匹配教授" align="center">
          <template slot-scope="scope">
            {{ scope.row.professor }}
            <!-- <el-input   v-model="scope.row.reserveProfessor" >111</el-input>  -->
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="编辑" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="
                handleUpdateStorePFAll(
                  scope.row.id,
                  scope.row.reserveProfessor,
                  scope.row.csoCode,
                  scope.row.term,
                  scope.row.yearTime,
                  scope.row.professor
                )
              "
              >编辑</el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
      fixed="right"
      align="center"
      label="确定"
      width="100">
      <template>
      
        <el-button type="text" size="small" >确定</el-button>
      </template>
    </el-table-column> -->
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next,jumper"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15]"
        :current-page.sync="pageNum"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  // getStorePF,
  getMatchPF,
  getUpdatePF,
  courseTime
} from "@/api/cso2";
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10
};
export default {
  name: "matchPF",
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),

      list: null,

      input: "",
      isMatch: false,
      listSelected: null,

      //list: null,
      input: "",

      listSelected: null,
      pageSize: null,
      pageNum: null,
      //编辑框的提示
      tipProfessors: " ",
      total: null,
      checked: true,
      listLoading: true,
      multipleSelection: [],
      formLabelWidth: "120px",
      options: [],
      teacherId: "",
      noticeVisible: false,
      editNoticeVisible: false,
      title: "",
      stateList: [
        {
          value: 1,
          label: "审课准备中"
        },
        {
          value: 2,
          label: "审课进行中"
        }
      ],
      yearTimeList: [],

      termList: "",
      storePFInfo: {},
      editStorePF: {
        id: 0,
        csoCode: " ",
        professor: " ",
        term: " ",
        yearTime: 0
      },
      updateId: ""
    };
  },
  methods: {
    getData() {
      if (this.isMatch) {
        this.listQuery.isMatch = 0;
      }
      this.listLoading = true;
      getMatchPF(this.listQuery).then(res => {
        console.log(res, "getMatchPFData");
        this.listLoading = false;

        this.list = res.data.list;
        this.pageNum = res.data.pageNum;
        this.pageSize = res.data.pageSize;
        this.total = res.data.total;

        this.$forceUpdate();
      });
    },
    getSelectedForm() {
      const data = this.list;
      data.forEach((item, index) => {
        if (item.csoName == " " || item.csoCode == " ") {
          this.list = data.splice(index, 1);
        }
      });
    },
    getYearTime() {
      courseTime().then(res => {
        console.log(res, "courseTime");
        res.data.forEach(item => {
          let obj = {};
          obj.value = item;
          obj.label = item;
          this.yearTimeList.push(obj);
        });
      });
    },

    handleSearchList() {
      //搜索
      this.listQuery.pageNum = 1;
      this.getData();
    },

    handleResetSearch() {
      // 重置
      // this.selectProductCateValue = [];
      this.isMatch = false;

      this.listQuery = Object.assign({}, defaultListQuery);
      this.getData();
    },
    // handleSearchList() {
    //   //搜索
    //   this.listQuery.pageNum = 1;
    //   this.getList();
    // },

    handleCurrentChange(val) {
      // 翻页
      this.listQuery.pageNum = val;
      this.getData();
      //  this.getNewAddClew();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getData();
    },

    submitEditForm(formName) {
      // this.editStorePF.id = this.updateId;

      this.$confirm("请认真核对储备教授！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //拿到整个公告
        getUpdatePF(this.editStorePF).then(response => {
          this.$message({
            type: "success",
            message: "提交成功",
            duration: 1000
          });
          this.$refs[formName].resetFields();
          this.editNoticeVisible = false;

          this.getData();
          this.$forceUpdate();
        });
      });
    },

    //handleUpdateNoticeAll(id, schoolName,schoolBrief) {
    handleUpdateStorePFAll(
      id,
      reserveProfessor,
      csoCode,
      term,
      yearTime,
      professor
    ) {
      this.editNoticeVisible = true;
      this.editStorePF.id = id;
      this.tipProfessors = reserveProfessor;
      this.editStorePF.csoCode = csoCode;
      this.editStorePF.term = term;
      this.editStorePF.yearTime = yearTime;
      this.editStorePF.professor = professor;

      // console.log(this.updateId, noticeContent);
    },
    cancel(formName) {
      this.noticeVisible = false;
      this.editNoticeVisible = false;
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.getData();
    this.getYearTime();
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.handleStuDetail {
  cursor: pointer;
}
</style>
