<template>
    <div class="mod-user">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.userName" placeholder="姓名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
<!--                <el-button v-if="isAuth('stu:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
                <el-button v-if="isAuth('stu:user:delete')" type="danger" @click="deleteHandle()"
                           :disabled="dataListSelections.length <= 0">批量删除
                </el-button>
            </el-form-item>
            <download-excel :stringifyLongNum="true" style=" display: inline-block;" :fetch="getExportExcel" :fields="json_fields"  :name='`研究生信息导出.xls`'>
                <el-button type='primary'>导出</el-button>
            </download-excel>
        </el-form>
        <el-table     @sort-change="sortChange"  :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">
                <template slot-scope="scope">
                    {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
<!--            <el-table-column prop="userId" header-align="center" align="center" width="100" label="用户身份码">-->
<!--            </el-table-column>-->
            <el-table-column sortable="custom"  prop="userName" header-align="center" align="center" label="学生名">
            </el-table-column>
            <el-table-column sortable="custom"  prop="studentId" header-align="center" align="center" label="学号">
            </el-table-column>
            <el-table-column sortable="custom"  prop="phone" header-align="center" align="center" label="手机号">
            </el-table-column>
            <!--            <el-table-column prop="mobile" header-align="center" align="center" label="手机号">-->
            <!--            </el-table-column>-->
<!--            <el-table-column prop="identity" header-align="center" align="center" label="身份">-->
<!--                <template slot-scope="scope">-->
<!--                    {{ isIdentity(scope.row.identity) }}-->
<!--                </template>-->
<!--            </el-table-column>-->

            <el-table-column
                header-align="center"
                align="center"
                prop="groupId"
                label="所属分组"
                :filters="groupIdes"
                :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    {{ getgroups(scope.row.groupId) }}
                </template>
            </el-table-column>
            <el-table-column prop="status" header-align="center" align="center" label="是否第一次阅卷">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 1" size="small" >是</el-tag>
                    <el-tag v-else size="small" type="danger">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <el-button v-if="isAuth('stu:user:update')" type="text" size="small"
                               @click="addOrUpdateHandle(scope.row.id)">修改
                    </el-button>
                    <el-button v-if="isAuth('stu:user:delete')" type="text" size="small"
                               @click="deleteHandle(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                       :page-sizes="[5,10, 20, 50, 100]" :page-size="pageSize" :total="totalCount"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script>
import AddOrUpdate from './student-add-or-update'
import {isAuth} from "@/utils";
import myRequest from "@/views/modules/h5/myRequest";

export default {
    data() {
        return {
            dataForm: {
                userName: ''
            },
            temp:0,
            dataList: [],
            pageIndex: 1,
            pageSize: 5,
            totalCount: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false,
            groupIdes: [],
            json_fields: {
                "序号":"index",
                "姓名": "userName",
                "身份码": "userId",
                "用户专业码": "userMajorId",
                "学号": "studentId",
                "学科": {
                    field: "majorId",
                    callback: (value) => {
                        // 定义major_id到对应文本的映射
                        const majorMap = {
                            1: "语文",
                            4: "地理",
                            7: "历史",
                            8: "政治",
                        };
                        return majorMap[value] || value;  // 返回对应的文本
                    }
                },
                "手机号": "phone",
                "分组": {
                    field: "groupId",
                    callback: (value) => {
                        if (value=='0'){
                            return ""
                        }
                        return this.groupIdMap[value] || value;  // 返回对应的文本
                    }
                },
                "是否第一次阅卷": {
                    field: "status",
                    callback: (value) => {
                        // 定义major_id到对应文本的映射
                        const majorMap = {
                            0: "否",
                            1: "是",
                        };
                        return majorMap[value] || value;  // 返回对应的文本
                    }
                }
            },
            groupIdMap:{},
        }
    },
    components: {
        AddOrUpdate
    },
    activated() {
        this.getDataList()
        this.groupIdes=[]
        // 获取分组
        let groupList = myRequest.getGroupList(this);
        setTimeout(() => {
            groupList.forEach(item => {
                this.groupIdMap[item.id] = item.text;
            })
        },500)
    },
    computed: {},
    methods: {
        /**
         * 自定义排序
         */
        sortChange(colum){
            if (colum.order === 'ascending'){
                this.getDataList(colum.prop,colum.order)
            }else {
                this.getDataList(colum.prop,colum.order)
            }

        },
        //  Excel导出
        async getExportExcel(){
            let excelData=[]
            await this.$http({
                url: this.$http.adornUrl('/stu/export'),
                method: 'get',
            }).then(({data}) => {
                excelData = data.map((item, index) => {
                    return { ...item, index: index + 1 };  // 添加序号字段
                });
            })
            return excelData
        },
        // isAuth,
        // 分组过滤
        filterTag(value, row) {
            return row.groupId === value;
        },
        getgroups(id) {
            let groupName=''
            // console.log(this.groupIdesShow[id])
            this.groupIdesShow.forEach(item => {
                if (item.id === id){
                    groupName= item.name
                }
            })
            return groupName
            // try {
            //
            // } catch (e) {
            //     console.log(e)
            //     return "未分组"
            // }
        },
        // 获取数据列表
        getDataList(prop='',sort='') {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/stu/list'),
                method: 'get',
                params: this.$http.adornParams({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'userName': this.dataForm.userName,
                    'prop': prop,
                    'sort': sort
                })
            }).then(({data}) => {
                if (data && data.code === 200) {
                    this.dataList = data.page.list
                    this.totalCount = data.page.totalCount
                } else {
                    this.dataList = []
                    this.totalCount = 0
                }
                this.dataListLoading = false
            })
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val
        },
        // 新增 / 修改
        addOrUpdateHandle(id) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },
        // 删除
        deleteHandle(userid) {
            var userIds = userid ? [userid] : this.dataListSelections.map(item => item.id)
            // this.$confirm(`确定对[userid=${userIds.join(',')}]进行[${userid ? '删除' : '批量删除'}]操作?`, '提示', {
            this.$confirm(`确定操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: this.$http.adornUrl('/stu/delete'),
                    method: 'post',
                    data: this.$http.adornData(userIds, false)
                }).then(({data}) => {
                    if (data && data.code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => this.getDataList()
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            }).catch(() => {
            })
        }
    }
}
</script>
