<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"
        >
          <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 label="学生审课所处状态：" prop="state">
            <el-select clearable v-model="listQuery.state" placeholder="请选择">
              <el-option label="选课待确认" :value="1"></el-option>
              <el-option label="审课进行中" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog
      title="可储备教授"
      :visible.sync="editNoticeVisible"
      @close="cancel('editStorePF')"
    >
      <el-form :model="editStorePF" ref="editStorePF">
        <div class="line">
          <el-form-item label="可储备教授" prop="reserveProfessor">
            <el-input
              type="textarea"
              autosize
              v-model="editStorePF.reserveProfessor"
            >
            </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>
          </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 }}
            <!-- <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.csoCode,
                  scope.row.yearTime,
                  scope.row.term,
                  scope.row.reserveProfessor
                )
              "
              >编辑</el-button
            >
          </template>
        </el-table-column>
        <!-- <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.reserveProfessor)"
              >编辑</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, getUpdatePF, courseTime } from "@/api/cso2";
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10
};
export default {
  name: "storePF",
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,

      input: "",
      listSelected: null,
      pageSize: null,
      pageNum: null,
      total: null,
      checked: true,
      listLoading: true,
      multipleSelection: [],
      formLabelWidth: "120px",
      options: [],
      teacherId: "",
      noticeVisible: false,
      editNoticeVisible: false,
      title: "",
      // stateList: [
      //   {
      //     value: 1,
      //     label: "审课准备中"
      //   },
      //   {
      //     value: 2,
      //     label: "审课进行中"
      //   }
      // ],
      termList: "",

      yearTimeList: [],
      storePFInfo: {},
      //  editStorePF: { },
      // csoCode: " ",
      // csoName: " ",

      editStorePF: {
        csoCode: " ",
        yearTime: 0,
        term: " ",
        reserveProfessor: " "
      },
      // updateId: 0,

      state: 0,
      term: " ",
      yearTime: 0,

      updateId: ""
    };
  },
  methods: {
    getData() {
      this.listLoading = true;
      getStorePF(this.listQuery).then(res => {
        console.log(res, "getStorePFData");
        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 => {
        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.listQuery = Object.assign({}, defaultListQuery);
      this.getData();
    },
    // handleSearchList() {
    //   //搜索
    //   this.listQuery.pageNum = 1;
    //   this.getList();
    // },

    handleCurrentChange(val) {
      // 翻页
      this.listQuery.pageNum = val;
      this.getData();
    },
    handleSizeChange(val) {
      //切换展示条数
      this.listQuery.pageSize = val;
      this.getData();
    },
    // handleStuDetail(id) {
    //   // 测试用的
    //   this.$router.push({
    //     path: "/pms/stuDetail",
    //     query: {
    //       id: id
    //     }
    //   });
    //   // console.log(123);
    // },

    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(csoCode, yearTime, term, reserveProfessor) {
      this.editNoticeVisible = true;

      // this.title = "编辑公告";
      this.editStorePF.csoCode = csoCode;
      this.editStorePF.yearTime = yearTime;
      this.editStorePF.term = term;
      this.editStorePF.reserveProfessor = reserveProfessor;
      // this.editStorePF.id = id
      // 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>
