<template>

<el-dialog :title="title" :visible.sync="localShowDialog" width="60%">
    <div class="dialog_center padding_20 page_search">
        <div class="search_content">
            <div class="content_left"> 
                <el-select  v-model="enrollmentYear" @change="ChangeFilter" placeholder="入学年份" class="select_width">
                    <el-option label="全部学届" value=""></el-option>
                    <el-option
                        v-for="item in graduatesList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-select  v-model="levelCode"  @change="ChangeFilter" placeholder="选择学段" class="select_width">
                    <el-option label="全部学段" value=""></el-option>
                    <el-option
                        v-for="item in levelsList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-select  v-model="gradeCode"  @change="ChangeFilter" placeholder="选择年级" class="select_width" >
                    <el-option label="全部年级" value=""></el-option>
                    <el-option
                        v-for="item in gradeList"
                        :key="item.gradeCode"
                        :label="item.gradeName"
                        :value="item.gradeCode">
                    </el-option>
                </el-select>
                <el-input class="input_width" v-model="keyWord" @input="ChangeFilter"   placeholder="考试编号、考试名称"> 
                    <el-button @click="ChangeFilter" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
        <div class="page_jg"></div>
        <FiltersItem :filtersData="filtersData" @selectItem="ChangeFilters" />
        <div class="page_jg"></div>
        <div class="page_table table_row_42">
            <el-table ref="multipleTable" :key="benchTaskSelectKey" :data="tableData" border stripe row-key="id"  @row-click="HandleClickChange" @selection-change="HandleSelectionChange" @select="HandleSelection">
                <el-table-column  width="55" align="center" v-if="!isMultiple">
                    <template slot-scope="scope">
                        <div class="table_row_checked" >
                            <div class="icon_checked" v-if="radioId == scope.row.id">
                                <div class="checked_bg"></div>
                            </div>
                            <div v-else class="icon_item"></div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column type="selection" reserve-selection align="center"  width="55" v-if="isMultiple">

                </el-table-column>
                <el-table-column align="center" prop="examDate" width="120" label="考试日期" >
                    
                </el-table-column>
                <el-table-column align="center" prop="examName"  label="考试名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="gradeName" width="100" label="年级" >
                </el-table-column>
                <el-table-column align="center" prop="examType" width="100" label="考试类型">
                </el-table-column>
                <el-table-column align="center" prop="courseNames" min-width="100" label="科目" show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_pagination" v-if="pageInfo.total>10">
            <el-pagination
                @current-change="ChangePage"
                background
                layout="prev,pager,next"
                :page-size="pageInfo.pageSize"
                :current-page="pageInfo.pageNum"
                :total="pageInfo.total">
            </el-pagination>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="localShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="EnterSubmit()">确 定</el-button>
    </div>
</el-dialog>

</template>
<script>
import FiltersItem from "@/components/FiltersItem_ruoyan.vue";
  export default {
    components: { FiltersItem },
    props: {
      showDialog: {
        type: Boolean,
        default: false,
      },//是否显示弹窗

      title:{
        type: String,
        default: '对标任务选择',
      },//标题

      isMultiple:{
        type: Boolean,
        default: true,
      },//是否多选
      benchTaskSelectKey: {
        type: Number,
        default: 0,
      },
      before: {
        type: Number,
        default: undefined,
      },// 是否添加before参数
    },
    watch: {
        showDialog(newVal) {
            this.localShowDialog = newVal; // 监听外部传入的 showDialog 变化
            if(newVal) {
                this.enrollmentYear = this.reportExamItem.graduates.toString();//届
                this.levelCode = this.reportExamItem.levelCode.toString();//学段
                this.gradeCode = this.reportExamItem.gradeCode;//年级
                this.selectList = this.$store.state.report.lastExamSelectIds;
                this.GetLocalFilterData();//从本地读取筛选数据
                this.GetPreviousExamPageList()//获取数据
            }
            
        },
        localShowDialog(newVal) {
            this.$emit('update:showDialog', newVal); // 通知父组件显示状态变化
        },
    },
    data() {
      return {
        localShowDialog: this.showDialog, // 使用本地数据来控制显示
        enrollmentYear:'',//学届
        levelCode:'',//学段
        gradeCode:'',//年级
        keyWord:'',//搜索关键字
        examType:'',//考试类型
        examTypeList:[],//考试类型list
        graduatesList:[],//选择学届list
        levelsList:[],//选择学段list
        gradeList:[],//选择年级原数组list
        gradeAllList:[],//选择年级所有list
        filtersData:[
            {
                name: '考试类型',
                value: '',
                list: [
                    {
                        label: '全部',
                        value: "",
                    },

                ],
            },
        ],//筛选数据
        tableData:[],//表格数据

        pageInfo: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        },//分页数据

        radioId:'',//单选的考生id
        radioName:'',//单选的考生name
        selectList:[],//多选的考试


      };
    },
    computed:{
        reportExamItem() {
            // let item = JSON.parse(localStorage.getItem('reportExamItem'));
            return this.$store.state.report.examSelectItem;
        },//分析报告公共参数变量
    },
    
    created() {
        // this.enrollmentYear = this.reportExamItem.graduates.toString();//届
        // this.levelCode = this.reportExamItem.levelCode.toString();//学段
        // this.gradeCode = this.reportExamItem.gradeCode;//年级
        this.selectList = this.$store.state.report.lastExamSelectIds;
        console.log(this.selectList)
        this.GetLocalFilterData();//从本地读取筛选数据
        this.GetPreviousExamPageList()
    },
    methods: {

        //从本地读取数据
        GetLocalFilterData() {
            this.examType = ''
            if(this.$store.state.report.filterDataObject != null) {
                let filterDataObject = this.$store.state.report.filterDataObject;
                //届别
                this.graduatesList = filterDataObject.graduatesList;
                console.log(this.graduatesList)
                this.filtersData=[
                    {
                        name: '考试类型',
                        value: '',
                        list: [
                            {
                                label: '全部',
                                value: '',
                            }
                        ],
                    }
                ];//筛选数据
                
                //学段
                this.levelsList =  filterDataObject.levelsList;
                console.log("打印学段列表",this.levelsList);
                //年级list
                this.gradeAllList = filterDataObject.gradeList;
                console.log("this.gradeAllList",this.gradeAllList,this.levelCode);
                this.gradeList = this.gradeAllList.filter(grade => grade.levelCode == this.levelCode);
                //examTypeList考试类型
                this.examTypeList = filterDataObject.examTypeList;
                this.examTypeList.forEach(item => {
                    let obj = {
                        label: item.examName,
                        value: item.examType,
                    };
                    this.filtersData[0].list.push(obj);
                })
            }
        },

        //获取筛选的数据
        ChangeFilters(e) {
            // console.log('筛选切换事件', e);
            this.filtersData[e.index].value = e.value;
            this.examType = e.value;
            this.ChangeFilter();
        },
        //多选选择行
        HandleSelectionChange(val) {
            // console.log("打印选择行",val);
            // if(this.isMultiple) {
            //     this.selectList = val;
            // }
            // console.log("打印选择的selectList", this.selectList);
        },
        HandleSelection(e, row){
            if(this.isMultiple) {
                const index = this.selectList.indexOf(row.id);
                if(index == -1){
                    this.selectList.push(row.id)
                }else{
                    this.selectList.splice(index,1)
                }
                // this.$refs.multipleTable.toggleRowSelection(e);
            }
        },
        //行选择事件
        HandleClickChange(e) {
            if(this.isMultiple) {
                const index = this.selectList.indexOf(e.id);
                if(index == -1){
                    this.selectList.push(e.id)
                }else{
                    this.selectList.splice(index,1)
                }
                this.$refs.multipleTable.toggleRowSelection(e);
            }else{
                this.radioId = e.id;
                this.radioName = e.examName;
            }
        },
        //筛选
        ChangeFilter() {
            this.pageInfo.pageNum=1;
            this.GetPreviousExamPageList();//分页获取历次考试列表
        },
        //分页
        ChangePage(num) {
            this.pageInfo.pageNum = num;
            this.GetPreviousExamPageList();//分页获取历次考试列表
        },

        //分页获取历次考试列表
        GetPreviousExamPageList() {
            return
            let params = {
                examId: this.$store.state.report.examId, // 考试id
                examLevel:this.$store.state.report.examLevel,
                graduates: this.enrollmentYear, // 学届
                levelCode: this.levelCode, // 学段
                gradeCode: this.gradeCode, // 年级
                word: this.keyWord, // 模糊查询
                examType: this.examType, // 考试类型
                courseCode: this.$store.state.report.filterObject.subjectCode, // 考试科目
                examDate: '', // 考试日期
                pageNum: this.pageInfo.pageNum,//页码
                pageSize: this.pageInfo.pageSize,//每页内容
            };
            
            // 根据before属性动态添加或删除before参数
            if (this.before !== undefined) {
                params.before = this.before;
            }
            //获取历次考试列表
            this.$api.reportSchool.selectPreviousAnalysisExamPageList(params).then(res => {
                if(res.code==200 && res.data) {
                    this.tableData = res.data.records || [];
                    this.pageInfo.total = parseInt(res.data.total) || 0;//总条数
                } else {
                    this.tableData = [];
                    this.pageInfo.total = 0
                }

                this.checkSelect()
            })
        },
        checkSelect() {
            this.$nextTick(() => {
                if(this.isMultiple) {
                    let selectId = this.$store.state.report.lastExamSelectIds;
                    this.tableData.forEach(row => {
                        if (selectId.includes(row.id)) {
                            this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(row, true);
                        }
                    });
                }else{
                    this.radioId = this.$store.state.report.lastExamRadioId
                    this.radioName = this.$store.state.report.lastExamRadioName
                }
            });
        },

        //确定选择事件
        EnterSubmit() {
            console.log("确定选择事件",this.radioId);
            console.log("确定选择事件",this.selectList);
            let idList=[];
            console.log(this.isMultiple);
            if(this.isMultiple) {
                
                //多选  
                // this.selectList.forEach(item=>{
                //     idList.push(item.id);
                // });
                if(this.selectList.length > 19) {
                    this.$message.warning('历次考试对比最多支持20场！');
                    return
                }
                this.$store.commit("report/SetLastExamSelectIds", this.selectList)
            } else {
                //单选
                idList.push(this.radioId);
                this.$store.commit("report/SetLastExamRadioId", this.radioId)
                this.$store.commit("report/SetLastExamRadioName", this.radioName ?? '')
            }
            this.$emit("GetSelectId");
            this.localShowDialog = false;
        },

       
    },
  };
  </script>
  
  <style lang="scss" scoped>
  :deep(.el-table__header) .el-checkbox {
    display: none;
  }
  .table_row_checked
  {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon_checked
    {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        border:1px solid #2E64FA;
        display: flex;
        justify-content: center;
        align-items: center;

        .checked_bg
        {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #2E64FA;

        }
    }

    .icon_item
    {
        width: 20px;
        height: 20px;
        background: #FFFFFF;
        border-radius: 50%;
        border: 1px solid #00000020;
    }
  }
  </style>
  