<template>
    <div class="" style="padding:15px 10px 0 10px">
        <el-form :model="queryParams" ref="queryForm" :inline="true" style="padding:0 0 0 0" size="small">
            <el-form-item prop="thesisName" label="论文名称">
                <el-input v-model="queryParams.thesisName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item prop="level" label="级别">
                <el-select v-model="queryParams.level" placeholder="请选择" clearable>
                    <el-option v-for="dict in dict.type.level" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item prop="grade" label="等级">
                <el-select v-model="queryParams.grade" placeholder="请选择" clearable>
                    <el-option v-for="dict in dict.type.
                        grade_type1" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item prop="publishTime" label="发表日期" >
                <el-date-picker v-model="queryParams.publishTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择"
                    clearable>
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" plain icon="el-icon-plus" @click="handleAdd"> 新增 </el-button>
                <el-button icon="el-icon-search" type="primary" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData">
            <el-table-column prop="lesson" label="序号" width="60" align="center" style="height: 20px;" type="index">
            </el-table-column>
            <el-table-column prop="thesisName" label="论文名称" align="center">
            </el-table-column>
            <el-table-column label="级别" align="center" prop="level">
                <template slot-scope="{ row }">
                    {{ row.level == 1 ? "国家级" : row.level == 2 ? "省级" : "市级" }}
                </template>
            </el-table-column>
            <el-table-column label="等级" align="center" prop="grade">
                <template slot-scope="{ row }">
                    {{ row.grade == 1 ? "一等奖" : row.grade == 2 ? "二等奖" : "三等奖" }}
                </template>

            </el-table-column>
            <el-table-column label="发表时间" align="center" prop="publishTime">
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleLook(scope.row)">查看
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:device:remove']">修改
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:device:remove']">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/修改弹窗 -->
        <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="110px">


                <el-row>
                    <el-col :span="10">
                        <el-form-item label="论文名称" prop="thesisName">
                            <el-input v-model="form.thesisName" :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="级别" prop="level">
                            <el-select v-model="form.level" :style="{ width: '100%' }">
                                <el-option v-for="dict in dict.type.level" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="等级:" prop="grade">
                            <el-select v-model="form.grade" :style="{ width: '100%' }">
                                <el-option v-for="dict in dict.type.grade_type1" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="发表时间：" prop="publishTime">
                            <el-date-picker v-model="form.publishTime" type="date" placeholder="选择发表时间"
                                :style="{ width: '100%' }" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="附件 :" :rules="[{ required: true, message: '请上传附件' }]">
                            <FilepersonUploadNew @input="getFileList" :value="fileList" :style="{ width: '100%' }">
                            </FilepersonUploadNew>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancle">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 查看弹窗 -->
        <el-dialog :title="title" :visible.sync="openLook" width="1200px">
            <el-form ref="form" :model="form" label-width="114px" :rules="rules">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="论文名称">
                            <el-input v-model="form.thesisName" :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="级别">
                            <el-select v-model="form.level" :style="{ width: '100%' }">
                                <el-option v-for="dict in dict.type.level" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />

                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="等级:">
                            <el-select v-model="form.grade" :style="{ width: '100%' }">
                                <el-option v-for="dict in dict.type.
                                    grade_type1" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="发表时间：" prop="publishTime">
                            <el-date-picker v-model="form.publishTime" type="date" placeholder="选择发表时间"
                                :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="附件 :">
                            <li class="el-upload-list__item ele-upload-list__item-content" v-for="file in fileList"
                                :key="file.id">
                                <el-link :href="`${baseUrl}${file.accessoryUrl}`" :underline="false" target="_blank">
                                    <span class="el-icon-document"> {{ file.accessoryName }} </span>
                                </el-link>
                            </li>
                        </el-form-item>
                    </el-col>


                </el-row>

            </el-form>
            <div slot="footer">
                <el-button @click="cancle">取 消</el-button>
            </div>
        </el-dialog>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList"></pagination>
    </div>
</template>

<script>
import {
    addThesis,// 新增论文情况
    getThesis,// 查看论文情况列表
    listThesis,// 查看论文情况详情
    updateThesis,// 修改论文情况
    delThesis,
    // 删除论文情况

} from "@/api/smartSchool/personWork/paperSituation";
import FilepersonUploadNew from "@/components/FilepersonUploadNew"
export default {
    dicts: ['level', 'grade_type1'],
    name: 'paperSituation',
    components: {
        FilepersonUploadNew,
    },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            // 上传文件
            fileList: [],
            queryParams: {
                thesisName: "",
                level: "",
                grade: "",
                publishTime: "",
                pageNum: 1,
                pageSize: 10,
            },
            title: "",
            rules: {
                thesisName: [
                    { required: true, message: "论文名称不能为空", trigger: "blur" }
                ],
                level: [
                    { required: true, message: "级别不能为空", trigger: "blur" }
                ],

                grade: [
                    { required: true, message: "等级不能为空", trigger: "blur" }
                ],
                publishTime: [
                    { required: true, message: "发表时间不能为空", trigger: "blur" }
                ],

            },
            // 查看表格
            lookTable: [],
            tableData: [],

            form: {
                thesisName: "",
                level: "",
                grade: "",
                publishTime: "",

            },
            open: false,
            openLook: false,
            total: 0,
        }
    },

    created() {
        this.getList();
    },


    methods: {
        /** 查询 */
        getList() {
            console.log('this.queryParams', this.queryParams);
            getThesis(this.queryParams).then((response) => {
                this.tableData = response.rows;
                console.log('this.tableData', this.tableData);
                this.loading = false;
                this.total = response.total;
                console.log(111, response.rows);

            });
        },
        // 重置
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            const id = row.id || this.ids;
            listThesis(id).then(response => {
                this.form = response.data;
                this.fileList = response.data.schoolAccessoryList.map(item => {
                    return {
                        name: item.accessoryName,
                        url: item.accessoryUrl,
                    }
                })
                this.schoolAccessoryList = response.data.schoolAccessoryList;
                console.log('this.form', this.form);
                this.open = true;
                this.title = "修改论文情况";
            });
        },

        // 附件上传回调函数
        getFileList(data) {
            console.log('getFileList', data)
            // this.form.files = data
            this.schoolAccessoryList = data.map(item => {
                return {
                    "accessoryUrl": item.url,
                    "accessoryName": item.name
                }
            })
            console.log('schoolAccessoryList', this.schoolAccessoryList)
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.schoolAccessoryList.length > 0) {
                        if (this.form.id !== undefined) {
                            const newObj = {
                                id: this.form.id,
                                thesisName: this.form.thesisName,
                                level: this.form.level,
                                grade: this.form.grade,
                                publishTime: this.form.publishTime,
                                schoolAccessoryList: this.schoolAccessoryList.map(item => ({
                                    accessoryUrl: item.accessoryUrl,
                                    accessoryName: item.accessoryName
                                }))
                            };
                            updateThesis(newObj).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            const newObj = {
                                thesisName: this.form.thesisName,
                                level: this.form.level,
                                grade: this.form.grade,
                                publishTime: this.form.publishTime,
                                schoolAccessoryList: this.schoolAccessoryList.map(item => ({
                                    accessoryUrl: item.accessoryUrl,
                                    accessoryName: item.accessoryName
                                }))
                            };
                            addThesis(newObj).then(response => {
                                console.log('this.form', this.form);
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    } else {
                        this.$message.error("请上传附件");
                    }
                }
            });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function () {
                return delThesis(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 查看 */
        handleLook(row) {
            this.form = row;
            this.openLook = true
            const id = row.id || this.ids
            listThesis(id).then((response) => {
                this.form = response.data;
                console.log('this.form ', this.form);
                this.fileList = response.data.schoolAccessoryList;
                console.log('this.fileList', this.fileList);
            });
            this.title = "查看培训情况";
        },
        //新增按钮操作
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "新增论文情况";
        },

        // 表单重置
        reset() {
            this.form = {
                thesisName: null,
                level: null,
                grade: null,
                publishTime: null,

            };
            this.fileList = [];
            this.schoolAccessoryList = [];
            this.resetForm("form");
        },
        cancle() {
            this.open = false;
            this.openLook = false
        }
    },

}
</script>

<style scoped></style>

