<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> Reviewer detail
                </el-breadcrumb-item>
                <el-breadcrumb-item>Reviewer detail</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="reviewerform" :model="revdata" label-suffix=":" style="width:800px;" label-width="120px">
                <el-form-item label="Name">
                    <span>{{revdata.account}}</span>
                </el-form-item>
                <el-form-item label="Gender">
                    <span>{{revdata.gender==2?'女':'男'}}</span>
                </el-form-item>
                <el-form-item label="Technical">
                    <span>{{revdata.technical}}</span>
                </el-form-item>
                <el-form-item label="Country">
                    <span>{{revdata.country}}</span>
                </el-form-item>
                <el-form-item label="Major">
                        <el-row>
                            <el-col :span="5">
                                <el-select v-model="revdata.major" placeholder="Please select" @change="majorChange()">
                                    <el-option
                                        v-for="item in majors"
                                        :key="item.major_id"
                                        :label="item.title"
                                        :value="item.major_id"
                                    ></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="revdata.cmajor" placeholder="Please select">
                                    <el-option :key="0" label="Please select" :value="0"></el-option>
                                    <el-option
                                        v-for="item in cmajors"
                                        :key="item.major_id"
                                        :label="item.title"
                                        :value="item.major_id"
                                    ></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                </el-form-item>
                <el-form-item label="Field">
                    <span>{{revdata.field}}</span>
                </el-form-item>
                <el-form-item label="Introduction">
                    <span>{{revdata.introduction}}</span>
                </el-form-item>
                    <el-form-item>
                        <el-col :offset="4">
                            <el-button type="primary" @click="onSubmit">Save</el-button>
                        </el-col>
                    </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            rev_id:this.$route.query.id,
            majors:[],
            cmajors:[],
            revdata:{
                reviewer_info_id:'',
                account:'',
                gender:1,
                technical:'',
                country:'',
                major:0,
                cmajor:0,
                field:''
            },
        }
    },
    created:function(){
        this.initReviewer();
        this.initMajor();

    },
    methods: {
        onSubmit:function(){
            if(this.revdata.cmajor==0){
                this.$message.error('Please select a child-major !!');
                return false;
            }
            this.$api.post('api/Reviewer/editReviewer',this.revdata)
            .then(res=>{
                this.$router.go(0);
            });
        },
        initReviewer:function(){
            this.$api.post('api/Reviewer/getReviewerDetail',{rid:this.rev_id})
            .then(res=>{
                this.revdata.reviewer_info_id = res.data.reviewer_info_id;
                this.revdata.account = res.data.account;
                this.revdata.gender = res.data.gender;
                this.revdata.technical = res.data.technical;
                this.revdata.country = res.data.country;
                this.revdata.major = res.data.major;
                this.revdata.cmajor = res.data.cmajor;
                this.revdata.field = res.data.field;
            });
        },
        initMajor() {
            this.$api.post('api/Admin/getMajors',{rid:this.rev_id}).then((res) => {
                this.majors = res.data;
                this.cmajors = res.cmajors;
            });
        },
        majorChange(){
            let majorid = this.revdata.major;
            this.$api.post('api/Admin/majorChild',{majorid:majorid})
            .then(res=>{
                this.cmajors = res.data;
                if(!this.checkmajor(this.revdata.cmajor,res.data)){
                    this.revdata.cmajor = 0;
                }
            });
        },
        checkmajor(jor,data){
            let frag = false;
            for(var i=0;i<data.length;i++){
                var cah = data[i];
                if(jor==cah.major_id){
                    frag=true;
                }
            }
            return frag;
        }
    },
}
</script>