<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-user"></i> Young Scientist Apply list </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container" style="min-width: 1000px; padding: 0px">
            <el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column label="No." align="center" width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="Base Information" width="320px">
                    <template slot-scope="scope">
                        <p class="tab_tie_col"><span>Apply Journal: </span>{{ scope.row.title }}</p>
                        <p class="tab_tie_col">
                            <span>Realname: </span><b style="font-size: 13px; letter-spacing: -0.5px">{{ scope.row.realname }}</b>
                        </p>
                        <p class="tab_tie_col"><span>Title: </span>{{ scope.row.technical }}</p>
                        <p class="tab_tie_col"><span>Email: </span>{{ scope.row.email }}</p>
                        <p class="tab_tie_col" v-if="scope.row.phone != ''"><span>Phone: </span>{{ scope.row.phone }}</p>
                        <p class="tab_tie_col" v-if="scope.row.starList_mark != 0">
                            <span>Grade: </span>
                            <font style="display: inline-block">
                                <img
                                    src="../../assets/img/star-all.png"
                                    v-for="item in scope.row.starList"
                                    v-if="scope.row.starList_mark <= 8 && item.star == 1"
                                    class="starSty"
                                />
                                <img
                                    src="../../assets/img/star-traf.png"
                                    v-for="item in scope.row.starList"
                                    v-if="scope.row.starList_mark <= 8 && item.star == 0"
                                    class="starSty"
                                />
                                <img
                                    src="../../assets/img/star-none.png"
                                    v-for="item in scope.row.starList"
                                    v-if="scope.row.starList_mark <= 8 && item.star == 2"
                                    class="starSty"
                                />
                                <img src="../../assets/img/star-all.png" v-if="scope.row.starList_mark > 8" class="starSty" />
                                <b style="font-size: 15px; color: #b77614" v-if="scope.row.starList_mark > 8"
                                    >× {{ scope.row.starList_mark }}</b
                                >
                            </font>
                        </p>
                        <p class="tab_tie_col"><span>Apply Time: </span>{{ formatDate(scope.row.ap_time) }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="Other Information">
                    <template slot-scope="scope">
                        <p class="tab_tie_col" v-if="scope.row.cvs.length > 0">
                            <span>CV.: </span>
                            <img src="../../assets/img/icon_0.png" alt="" style="vertical-align: middle; margin-left: 10px" />
                            <span style="margin-left: 20px; color: #888; font-size: 13px">
                                <i class="el-icon-paperclip"></i>
                                {{ formatDate(scope.row.cvs[scope.row.cvs.length - 1].ctime) }}
                            </span>
                            <a :href="mediaUrl + 'reviewer/' + scope.row.cvs[scope.row.cvs.length - 1].cv" target="_blank" class="txt_pdf">
                                <b class="el-icon-download" style="color: #006699; font-weight: bold"></b>
                            </a>
                        </p>
                        <p class="tab_tie_col"><span>Field: </span>{{ scope.row.field }}</p>
                        <p class="tab_tie_col" v-if="scope.row.company != ''"><span>Affiliation: </span>{{ scope.row.company }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="Remarks" width="240">
                    <template slot-scope="scope">
                        {{ scope.row.remark }}
                        <b
                            @click="BoxRemark(scope.row)"
                            style="margin-left: 10px; cursor: pointer; color: #006699"
                            class="el-icon-edit"
                        ></b>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="240">
                    <template slot-scope="scope">
                        <div class="operation_box">
                            <el-button type="primary" plain icon="el-icon-user" @click="handleDtail(scope.row)"> Detail </el-button>
                            <el-button type="success" plain icon="el-icon-check" @click="agreeApply(scope.row)"> Agree </el-button>

                            <el-button type="danger" plain icon="el-icon-close" @click="deleteApply(scope.row)"> Refuse </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 同意弹出框 -->
        <el-dialog title="Agree User" :visible.sync="agreeVisible" width="700px" :close-on-click-modal="false" class="agree_form_box">
            <el-form ref="agree_Form" :model="agreeForm" :rules="rules" label-width="140px">
                <el-form-item label="Account :" style="margin-bottom: 2px !important">
                    <span>{{ agreeForm.account }}</span>
                </el-form-item>
                <el-form-item label="Email :" style="margin-bottom: 2px !important">
                    {{ agreeForm.email }}
                </el-form-item>
                <el-form-item label="Apply Journal :" style="margin-bottom: 10px !important">
                    {{ agreeForm.title }}
                </el-form-item>
                <el-form-item label="Real name :" prop="realname">
                    <el-input type="text" placeholder="" v-model="agreeForm.realname"></el-input>
                </el-form-item>
                <el-form-item label="Phone :">
                    <el-input type="text" placeholder="" v-model="agreeForm.phone"> </el-input>
                </el-form-item>
                <el-form-item label="Title :" prop="technical">
                    <el-select v-model="agreeForm.technical" filterable placeholder=" " value-key="groupID">
                        <el-option v-for="item in df_technical" :key="item.label" :label="item.label" :value="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Country :" prop="country">
                    <el-select v-model="agreeForm.country" filterable placeholder=" " value-key="groupID">
                        <el-option
                            v-for="item in df_country"
                            :label="item.en_name + ' (' + item.zh_name + ')'"
                            :key="item.en_name"
                            :value="item.en_name"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Website :" prop="website">
                    <el-input type="text" placeholder="eg:http://..." v-model="agreeForm.website"> </el-input>
                </el-form-item>
                <el-form-item label="Field :" prop="field">
                    <el-input v-model="agreeForm.field" type="textarea" autosize></el-input>
                </el-form-item>
                <el-form-item label="Introduction :">
                    <el-input v-model="agreeForm.introduction" type="textarea" autosize> </el-input>
                </el-form-item>
                <el-form-item label="Affiliation :" prop="company">
                    <el-input v-model="agreeForm.company"></el-input>
                </el-form-item>
                <el-form-item label="CV :">
                    <p class="tab_tie_col" v-if="agreeForm.cvs && agreeForm.cvs.length > 0">
                        <img src="../../assets/img/icon_0.png" alt="" style="vertical-align: middle; margin-left: 10px" />
                        <span style="margin-left: 20px; color: #888; font-size: 13px">
                            <i class="el-icon-paperclip"></i>
                            {{ formatDate(agreeForm.cvs[agreeForm.cvs.length - 1].ctime) }}
                        </span>
                        <a :href="mediaUrl + 'reviewer/' + agreeForm.cvs[agreeForm.cvs.length - 1].cv" target="_blank" class="txt_pdf">
                            <b class="el-icon-download" style="color: #006699; font-weight: bold"></b>
                        </a>
                    </p>
                </el-form-item>
                <el-form-item label="Term of office :" prop="year">
                    <el-select v-model="agreeForm.year" placeholder="Please select a year">
                        <el-option v-for="item in list_year" :label="item.title" :key="item.id" :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="agreeVisible = false">Cancel</el-button>
                <el-button type="primary" @click="saveAgreee()">OK</el-button>
            </span>
        </el-dialog>

        <!-- 标记弹出框 -->
        <el-dialog title="Remarks" :visible.sync="remarkBox" width="550px" :close-on-click-modal="false">
            <el-form ref="remark" :model="remarkMes" label-width="130px">
                <el-form-item label="Realname :">
                    {{ remarkMes.realname }}
                </el-form-item>
                <el-form-item label="Email :">
                    {{ remarkMes.email }}
                </el-form-item>
                <el-form-item label="Apply Journal :">
                    {{ remarkMes.title }}
                </el-form-item>
                <el-form-item label="Content :">
                    <el-input type="textarea" rows="5" v-model="remarkMes.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="remarkBox = false">Cancel</el-button>
                <el-button type="primary" @click="saveRemark">Save</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import commonCv from '../common/cv.vue';
export default {
    components: {
        commonCv
    },
    data() {
        return {
            df_country: [],
            df_technical: [
                {
                    label: 'Professor'
                },
                {
                    label: 'Associate Professor'
                },
                {
                    label: 'Assistant Professor'
                },
                // {
                // 	label: 'Ph.D.',
                // },
                {
                    label: 'Researcher'
                },
                {
                    label: 'Associate research fellow'
                },
                {
                    label: 'Assistant research fellow'
                },
                {
                    label: 'Engineer'
                },
                {
                    label: 'Senior engineer'
                },
                {
                    label: 'Associate Researcher'
                },
                {
                    label: 'Lecturer'
                },
                {
                    label: 'Associate Chief Physician'
                },
                {
                    label: 'Assistant Researcher'
                },
                {
                    label: 'Physician'
                },
                {
                    label: 'Chief Physician'
                },
                {
                    label: 'Senior Lecturer'
                },
                {
                    label: 'Research Fellow'
                },
                {
                    label: 'Senior Investigator'
                }
            ],
            mediaUrl: this.Common.mediaUrl,
            tableData: [],
            agreeVisible: false,
            agreeForm: {},
            remarkMes: {
                remark: ''
            },
            remarkBox: false,
            list_year: [
                {
                    title: '1 Year',
                    id: 1
                },
                {
                    title: '2 Years',
                    id: 2
                },
                {
                    title: '3 Years',
                    id: 3
                }
            ],
            rules: {
                year: [
                    {
                        required: true,
                        message: 'Please select year',
                        trigger: 'blur'
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: 'Please enter phone',
                        trigger: 'blur'
                    },
                    {
                        validator: function (rule, value, callback) {
                            if (/^1[34578]\d{9}$/.test(value) == false) {
                                callback(new Error('Please enter the correct phone format'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                technical: [
                    {
                        required: true,
                        message: 'Please select title',
                        trigger: 'blur'
                    }
                ],
                country: [
                    {
                        required: true,
                        message: 'Please select country',
                        trigger: 'blur'
                    }
                ],
                field: [
                    {
                        required: true,
                        message: 'Please input field',
                        trigger: 'blur'
                    }
                ],
                company: [
                    {
                        required: true,
                        message: 'Please input affiliation',
                        trigger: 'blur'
                    }
                ],
                realname: [
                    {
                        required: true,
                        message: 'Please input real name',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    created() {
        this.getDate();
        this.getCountry();
    },
    methods: {
        getCountry() {
            this.$api
                .post('api/Reviewer/getCountrys')
                .then((res) => {
                    this.df_country = res.countrys;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        // 获取青年科学家申请列表数据
        getDate() {
            this.$api
                .post('api/User/getYboardApplys', {
                    editor_id: localStorage.getItem('U_id')
                })
                .then((res) => {
                    if (res.code == 0) {
                        this.tableData = res.data.applys;
                        for (var i = 0; i < this.tableData.length; i++) {
                            this.getScoreData(i, this.tableData[i].score);
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 评分
        getScoreData(i, e) {
            this.tableData[i].starList = [];
            this.tableData[i].starList_mark = 0;
            if (e < 0.5 && e > 0) {
                this.tableData[i].starList.push({
                    star: 2
                });
                this.tableData[i].starList_mark = 1;
            } else {
                let zheng = Math.floor(e);
                let xiao = Number(e) - Math.floor(e);
                if (xiao >= 0.5) {
                    xiao = 0.5;
                } else {
                    xiao = 0;
                }
                for (var j = 0; j < zheng; j++) {
                    this.tableData[i].starList.push({
                        star: 1
                    });
                }
                if (xiao == 0.5) {
                    this.tableData[i].starList.push({
                        star: 0
                    });
                }
                this.tableData[i].starList_mark = Number(zheng) + Number(xiao);
            }
        },

        // 同意
        agreeApply(e) {
            this.agreeForm = {};
            console.log('e at line 405:', e);

            this.agreeVisible = true;
            this.agreeForm = e;
            this.$refs.agree_Form.clearValidate();
        },

        // 提交同意
        saveAgreee() {
            var data = {
                ap_yboard_id: this.agreeForm.ap_yboard_id,
                year: this.agreeForm.year,
                realname: this.agreeForm.realname,
                phone: this.agreeForm.phone,
                technical: this.agreeForm.technical,
                country: this.agreeForm.country,
                website: this.agreeForm.website,
                field: this.agreeForm.field,
                introduction: this.agreeForm.introduction,
                company: this.agreeForm.company
            };
            console.log('data at line 419:', data);

            this.$refs.agree_Form.validate((valid) => {
                if (valid) {
                    this.$api
                        .post('api/User/agreeYboardApplyNew', {
                            ...data
                        })

                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('Add succeeded!');
                                this.agreeVisible = false;
                                this.getDate();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    this.$message.error('Please complete the information!!');
                }
            });
        },

        // 拒绝
        deleteApply(e) {
            // 二次确认删除
            this.$confirm('Are you sure you want to refuse the apply?', 'Tip', {
                type: 'warning'
            })
                .then(() => {
                    this.$api
                        .post('api/User/refuseYboardApply', e)
                        .then((res) => {
                            if (res.code == 0) {
                                this.$message.success('Delete succeeded!');
                                this.getDate();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {});
        },

        // 标记弹出框
        BoxRemark(e) {
            this.remarkBox = true;
            this.remarkMes.realname = e.realname;
            this.remarkMes.user_id = e.user_id;
            this.remarkMes.email = e.email;
            this.remarkMes.title = e.title;
            this.remarkMes.remark = e.remark;
        },

        // 修改标记
        saveRemark() {
            this.$api.post('api/User/editRemarkForUser', this.remarkMes).then((res) => {
                if (res.code == 0) {
                    this.$message.success('Success');
                    this.remarkBox = false;
                    this.getDate();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },

        // 详情
        handleDtail(e) {
            let routerJump = this.$router.resolve({
                path: '/partyRole',
                query: {
                    id: e.user_id
                }
            });
            window.open(routerJump.href, '_blank');
        },

        // 时间格式
        formatDate(timestamp) {
            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D;
        }
    }
};
</script>

<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.tab_tie_col {
    margin-bottom: 2px;
    color: #333;
    word-wrap: break-word;
    word-break: normal;
}

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

.starSty {
    width: 14px;
    margin-right: 4px;
    vertical-align: text-top;
}

.starSty:nth-last-child(1) {
    margin-right: 0;
}
::v-deep .agree_form_box .el-form-item {
    margin-bottom: 20px !important;
}
::v-deep .agree_form_box .el-form-item .el-select {
    width: 100% !important;
}
::v-deep .agree_form_box .el-dialog__body {
    padding: 10px 20px 10px !important;
}
::v-deep .operation_box .el-button--small {
    padding: 5px 5px !important;
}
</style>
