<template>
  <div class="app-container">
    <el-dialog width="1100px" :visible.sync="open" :title="title" @close="handleClose">
      <el-form ref="refqueryForm" :model="queryForm" inline @submit.native.prevent>
        <!--<el-form-item label="学年">-->
        <!--  <el-date-picker-->
        <!--    type="year"-->
        <!--    v-model="queryForm.schoolYear"-->
        <!--    value-format="yyyy"-->
        <!--    :clearable="false"-->
        <!--  ></el-date-picker>-->
        <!--</el-form-item>-->
        <el-select
          style="width: 100px;"
          size="mini"
          v-model="queryForm.schoolYear"
          @change="handleQuery">
          <el-option
            v-for="item in yearList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
        <el-form-item label="年级">
          <el-select v-model="queryForm.gradeValue" placeholder="所有">
            <el-option v-for="dict in dict.type.Grade" :key="dict.value" :label="dict.label" :value="dict.value">
              {{ dict.label }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="queryForm.classValue" placeholder="所有">
            <el-option v-for="dict in dict.type.Class" :key="dict.value" :label="dict.label" :value="dict.value">
              {{ dict.label }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="refClassTable" highlight-current-row stripe v-loading="loading" :data="classList"
                @row-click="handleRowClick" @selection-change="handleSelectChange" width="100%">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column header-align="center" align="center" prop="gradeValue" label="年级">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.Grade" :value="scope.row.gradeValue"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="classValue" label="班级">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.Class" :value="scope.row.classValue"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="gradeAlias" label="班级别名"></el-table-column>
        <el-table-column header-align="center" align="center" min-width="160" prop="className" label="班级名称">

        </el-table-column>
      </el-table>
      <ExPagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getList"
      ></ExPagination>
      <div slot="footer">
        <el-button type="primary" size="mini" @click="handleSelect" :disabled="!isSimple">确 定</el-button>
        <el-button @click="handleClose" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getYearList } from "@/utils/utilLibrary/getYearList";

export default {
  name: 'ClassSelect',
  dicts: ['Grade', 'Class', 'grade_type'],
  components: {},
  props: {
    // 打开对话框
    openSelect: {
      required: true,
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      required: true,
      type: String,
      default: '班级选择'
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        grade: '',
      },
      // 班级信息列表
      classList: [],
      // 限制只能选中一条记录
      obtainData: null,
      // 是否为单个
      isSimple: false,
      // 选中项
      selectedItem: {},
      // 年份列表
      yearList: []
    };
  },
  watch: {},
  computed: {
    open: {
      get() {
        return this.openSelect;
      },
      set(value) {
        this.$emit('update:openSelect', value);
      }
    }
  },
  methods: {
    /** 列表查询 */
    getList() {
      this.loading = true;
      this.$emit('getClassList', this.queryForm, (rows = [], total = 0) => {
        console.log(rows);
        this.classList = rows;
        this.total = total;
        this.loading = false;
      });
    },

    /** 模糊查询 */
    handleQuery() {
      this.throttle(() => {
        this.getList();
      })
    },

    /** 重置表单 */
    resetQuery() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        teacherName: '',
        schoolYear: new Date().getFullYear().toString()
      };
      this.isSimple = false;
      this.handleQuery();
    },

    /** 处理列表选中数据 */
    handleSelectChange(selections) {
      this.selectedItem = selections[0];
      this.isSimple = selections.length === 1;
    },

    /** 单击行选中 */
    handleRowClick(row, column, event) {
      this.$refs.refClassTable.clearSelection();
      this.$refs.refClassTable.toggleRowSelection(row, true);
    },
    /** 确定 */
    handleSelect() {
      this.$emit('setClassInfo', this.selectedItem);
      this.handleClose();
    },

    /** 关闭 */
    handleClose() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        studentName: '',
      };
      this.open = false;
      this.isSimple = false;
      this.selectedItem = {};
    }
  },
  created() {
    this.resetQuery();
    this.yearList = getYearList();
  },
  mounted() {
  }
};
</script>
<style scoped lang="less">
</style>
