<!--  -->
<template>
    <div class="m-container">
        <h2>
            <div class="squrt"></div>
            未在班级学员
        </h2>
        <div class="m-core">
            <save-form
                :inline="true"
                @submit="search"
                @reset="onReSet"
                ref="searchFrom"
                :model="searchForm"
            >
                <el-form-item prop="musicGroupSearch">
                    <el-input
                        v-model.trim="searchForm.musicGroupSearch"
                        clearable
                        @keyup.enter.native="search"
                        placeholder="乐团名称/编号"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="studentSearch">
                    <el-input
                        v-model.trim="searchForm.studentSearch"
                        clearable
                        @keyup.enter.native="search"
                        placeholder="学员姓名/编号"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="organIds">
                    <el-select
                        placeholder="请选择分部"
                        v-model="searchForm.organIds"
                        clearable
                    >
                        <el-option
                        v-for="(item, index) in selects.branchs"
                        :label="item.name"
                        :value="item.id"
                        :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" native-type="submit">搜索</el-button>
                    <el-button native-type="reset" type="primary">重置</el-button>
                </el-form-item>
            </save-form>
            <div class="tableWrap">
                <el-table
                style="width: 100%"
                :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
                :data="tableList"
                >
                <el-table-column align="center" label="分部">
                    <template slot-scope="scope">
                        <copy-text>{{ scope.row.organName }}</copy-text>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="乐团编号">
                    <template slot-scope="scope">
                        <copy-text>{{ scope.row.groupId }}</copy-text>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="乐团名称">
                    <template slot-scope="scope">
                        <copy-text>{{ scope.row.groupName }}</copy-text>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="学员编号">
                    <template slot-scope="scope">
                        <copy-text>{{ scope.row.studentId }}</copy-text>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="学员姓名">
                    <template slot-scope="scope">
                        <copy-text>{{ scope.row.studentName }}</copy-text>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="学员声部" prop="subjectName">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <auth :auths="['notClassStudent/nowLook', '/resetTeaming']" mulit>
                            <el-button type="text" @click="showDetail(scope.row)">立即处理</el-button>
                        </auth>
                    </template>
                </el-table-column>
                </el-table>
                <pagination
                sync
                :total.sync="rules.total"
                :page.sync="rules.page"
                :limit.sync="rules.limit"
                :page-sizes="rules.page_size"
                @pagination="getList"
                />
            </div>
        </div>
    </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { queryNoClassMusicStudentInfo } from './api.js'
export default {
    components: { pagination },
    data() {
        return {
            searchForm: {
                musicGroupSearch: null,
                studentSearch: null,
                organIds: null,
            },
            rules: {
                // 分页规则
                limit: 10, // 限制显示条数
                page: 1, // 当前页
                total: 0, // 总条数
                page_size: [10, 20, 40, 50], // 选择限制显示条数
            },
            tableList: []
        };
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        const { query } = this.$route
        if (query.organId) {
            this.searchForm.organIds = Number(query.organId)
        }
        this.$store.dispatch("setBranchs");

        this.getList()
    },
    methods: {
        search() {
            this.rules.page = 1;
            this.getList();
        },
        onReSet() {
            this.$refs['searchFrom'].resetFields()
            this.getList()
        },
        async getList() {
            try {
                const { ...search } = this.searchForm
                const params = {
                    ...search,
                    page: this.rules.page,
                    rows: this.rules.limit
                }
                let res = await queryNoClassMusicStudentInfo(params)
                this.tableList = res.data.rows;
                this.rules.total = res.data.total;
            } catch (err) {
                // 
            }
        },
        showDetail(item) {
            // ?status=PROGRESS&id=21040114171500001&name=0401莫莫2&organId=1&type=resetTeam&team_status=PROGRESS&tabrouter=5
            this.$router.push({
                path: '/resetTeaming',
                query: {
                    type: 'resetTeam',
                    status: 'PROGRESS',
                    team_status: 'PROGRESS',
                    id: item.groupId,
                    name: item.groupName,
                    organId: item.organId,
                    tabrouter: 5
                }
            })
        }
    },
};
</script>
<style lang='scss' scoped>

</style>
