<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> Add manuscript reviewer</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div
            class="container"
            v-loading="loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"
        >
            <span style="font-size: 14px; color: #606266; margin: 0 10px 0 0">Research direction :</span>
            <el-cascader
                placeholder="Please select major"
                v-model="selectFileds"
                style="width: 300px; margin-right: 10px"
                @change="fieldChange"
                :options="allFileds"
                :props="fieldsProps"
                collapse-tags
                clearable
            ></el-cascader>
            <!-- <el-select v-model="messform.major_a" placeholder="Please select major" @change="majorChange(1)"
				style="width: 200px;margin: 0 10px 0 0;">
				<el-option :key="0" label="All major" :value="0"></el-option>
				<el-option v-for="item in majors_a" :key="item.major_id" :label="item.major_title"
					:value="item.major_id"></el-option>
			</el-select>

			<el-select v-model="messform.major_b" placeholder="Please select major" v-if="majors_b!=''"
				@change="majorChange(2)" style="width: 200px;margin:0 10px 0 0;">
				<el-option :key="0" label="None" :value="0"></el-option>
				<el-option v-for="item in majors_b" :key="item.major_id" :label="item.major_title"
					:value="item.major_id"></el-option>
			</el-select>
			<el-select v-model="messform.major_c" placeholder="Please select major" v-if="majors_c!=''"
				@change="majorChange(3)" style="width: 200px;margin:0 10px 0 0;">
				<el-option :key="0" label="None" :value="0"></el-option>
				<el-option v-for="item in majors_c" :key="item.major_id" :label="item.major_title"
					:value="item.major_id"></el-option>
			</el-select> -->
            <el-input
                v-model="messform.email"
                clearable
                placeholder="Please enter email"
                style="width: 190px; display: inline-block; margin: 0 10px 20px 0"
            ></el-input>
            <el-input
                v-model="messform.field"
                clearable
                placeholder="Please enter field"
                style="width: 190px; display: inline-block; margin: 0 10px 20px 0"
            ></el-input>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">Search</el-button>
            <el-table
                :data="revTable"
                border
                stripe
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                empty-text="New messages (0)"
            >
                <el-table-column label="Base Information">
                    <template slot-scope="scope">
                        <p class="tab_tie_col">
                            <span>Realname: </span><b style="font-size: 15px">{{ scope.row.realname }}</b>
                        </p>
                        <p class="tab_tie_col"><span>Account: </span>{{ scope.row.account }}</p>
                        <p class="tab_tie_col"><span>Email: </span>{{ scope.row.email }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="Other Information">
                    <template slot-scope="scope">
                        <p class="tab_tie_col" v-if="scope.row.company != ''"><span>Affiliation: </span>{{ scope.row.company }}</p>
                        <p class="tab_tie_col" v-if="scope.row.field != ''"><span>Field: </span>{{ scope.row.field }}</p>
                        <p class="tab_tie_col" v-if="scope.row.majorstr != ''"><span>Major: </span>{{ scope.row.majorstr }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="rs_num" label="Reviewed Times" width="140">
                    <template slot-scope="scope">
                        {{ scope.row.rs_num }}
                        <font style="margin-left: 5px">(Reviewing:{{ scope.row.now }})</font>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="rd_num" label="Fail number" width="140"></el-table-column> -->
                <el-table-column label="" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" plain icon="el-icon-tickets" @click="openDetail(scope.row)">Detail</el-button>
                        <el-button size="mini" type="primary" plain icon="el-icon-check" @click="openSelect(scope.row)"> Select</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="messform.pageIndex"
                    :page-size="messform.pageSize"
                    :total="Total"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
            title="Reviewer information"
            :visible.sync="mesOpenVisble"
            width="800px"
            v-loading="loading"
            element-loading-text="Loading..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-form v-model="mesOpen" label-width="140px">
                <el-form-item label="User :">
                    <span>{{ mesOpen.account }}</span>
                </el-form-item>
                <el-form-item label="Name :">
                    <span>{{ mesOpen.realname }}</span>
                </el-form-item>
                <el-form-item label="Country :">
                    <span>{{ mesOpen.country }}</span>
                </el-form-item>
                <el-form-item label="Affiliation :">
                    <span>{{ mesOpen.company }}</span>
                </el-form-item>
                <el-form-item label="Major :">
                    <span>{{ mesOpen.major_title }}</span>
                </el-form-item>
                <el-form-item label="Field :">
                    <span>{{ mesOpen.field }}</span>
                </el-form-item>
                <el-form-item label="Introduction :">
                    <span>{{ mesOpen.introduction }}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="mesOpenVisble = false">Canel</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            messform: {
                article_id: this.$route.query.id,
                email: '',
                field: '',
                pageIndex: 1,
                pageSize: 15,
                major_id: 0

                // major_a: 0,
                // major_b: '',
                // major_c: '',
            },
            revTable: [],
            mesOpen: [],
            mesOpenVisble: false,
            loading: false,
            Total: 0,
            majors_a: [],
            majors_b: [],
            majors_c: [],
            allFileds: [], // 全部领域
            fieldsProps: {
                checkStrictly: true,
                value: 'major_id',
                label: 'major_title',
                children: 'children'
            },
            selectFileds: []
        };
    },
    created() {
        this.getDate();
        //this.initMajor()
        this.getAllFields();
    },
    computed: {},
    methods: {
        fieldChange(e) {
            this.messform.major_id = this.selectFileds[this.selectFileds.length - 1];
        },
        // 获取编辑列表数据
        getDate() {
            this.$api
                .post('api/Reviewer/searchReviewer', this.messform)
                .then((res) => {
                    this.revTable = res.data.reviewers;
                    this.Total = res.data.count;
                    this.loading = false;
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 下拉搜索
        changereviewer() {
            if (this.messform.class == 0) {
                if (this.messform.grade != undefined) {
                    delete this.messform.grade;
                }
            } else if (this.messform.class == 1) {
                this.messform.grade = '';
            } else {
                this.messform.grade = this.messform.class;
            }
            this.loading = true;
            this.getDate();
        },

        // 关键字搜索
        handleSearch() {
            this.loading = true;
            // console.log(this.messform)
            this.getDate();
        },

        // 审稿人详情
        openDetail(row) {
            this.mesOpenVisble = true;
            this.$api
                .post('api/Article/getReviewerdetail', {
                    uid: row.user_id
                })
                .then((res) => {
                    this.mesOpen = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 保存添加操作
        openSelect(row) {
            this.loading = true;
            this.$api
                .post('api/Article/addArticleReviewer', {
                    uid: row.user_id,
                    articleId: this.$route.query.id
                })
                .then((res) => {
                    this.loading = false;
                    if (res.code == 0) {
                        this.$message.success('Add Success');
                        this.getDate();
                        // this.$router.push({
                        // 	path: 'articleReviewer',
                        // 	query: {
                        // 		id: this.$route.query.id
                        // 	}
                        // });
                    } else {
                        if (res.msg && res.msg != '') {
                            this.$message.error(res.msg);
                        } else {
                            this.$message.error('Add Error');
                        }
                    }
                })
                .catch((err) => {
                    this.loading = false;
                    console.log(err);
                });
        },

        // 领域
        initMajor() {
            this.$api
                .post('api/Ucenter/getMajor', {
                    major_id: 1
                })
                .then((res) => {
                    this.majors_a = res.data.major.children;
                    this.majors_a_input = res.data.major.children;
                });
        },

        // 获取全部领域
        getAllFields() {
            this.$api.post('api/Major/getMajorList').then((res) => {
                if (res.code == 0) {
                    this.allFileds = res.data.majors;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 搜索选择领域
        majorChange(e) {
            if (e == 1) {
                this.$api
                    .post('api/Ucenter/getMajor', {
                        major_id: this.messform.major_a
                    })
                    .then((res) => {
                        this.majors_b = res.data.major.children;
                        this.majors_c = [];
                        this.messform.major_b = '';
                        this.messform.major_c = '';
                        this.majorChange_panduan();
                    });
            } else if (e == 2 && this.messform.major_b != 0) {
                this.$api
                    .post('api/Ucenter/getMajor', {
                        major_id: this.messform.major_b
                    })
                    .then((res) => {
                        this.majors_c = res.data.major.children;
                        this.messform.major_c = '';
                        this.majorChange_panduan();
                    });
            } else {
                this.majorChange_panduan();
            }
        },

        majorChange_panduan() {
            if (this.messform.major_c != '' || this.messform.major_c != 0) {
                this.messform.major_id = this.messform.major_c;
            } else if (this.messform.major_b != '' || this.messform.major_b != 0) {
                this.messform.major_id = this.messform.major_b;
            } else {
                this.messform.major_id = this.messform.major_a;
            }
            this.getDate();
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.messform, 'pageIndex', val);
            this.getDate();
        }
    }
};
</script>

<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}
.tab_tie_col {
    margin-bottom: 5px;
    color: #333;
}

.tab_tie_col > span {
    color: #888;
    margin: 0 5px 0 0;
    font-size: 13px;
}
</style>
