<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="awardName" label="获奖名称">
                <el-input v-model="queryParams.awardName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item prop="awardTime" label="获奖时间">
                <el-date-picker v-model="queryParams.awardTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择"
                    clearable>
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="gradeOfAward" label="获奖等级">
                <el-select v-model="queryParams.gradeOfAward" 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="licenseIssuingAuthority" label="发证机关">
                <el-input v-model="queryParams.licenseIssuingAuthority" placeholder="请输入" clearable />
            </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="awardName" label="获奖名称" align="center">
            </el-table-column>
            <el-table-column label="获奖时间" align="center" prop="awardTime">
            </el-table-column>
            <el-table-column label="获奖等级" align="center" prop="gradeOfAward">
                <template slot-scope="{ row }">
                    {{ row.gradeOfAward == 1 ? "一等奖" : row.gradeOfAward == 2 ? "二等奖" : "三等奖" }}
                </template>
            </el-table-column>
            <el-table-column label="发证机关" align="center" prop="licenseIssuingAuthority">
            </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)">修改
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" /> -->
        <!-- 新增/修改弹窗 -->
        <el-dialog :title="title" :visible.sync="open" width="1200px">
            <el-form ref="form" :model="form" label-width="114px" :rules="rules">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="获奖名称" prop="awardName">
                            <el-input v-model="form.awardName" :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="获奖时间：" prop="awardTime">
                            <el-date-picker v-model="form.awardTime" type="date" placeholder="选择获奖时间"
                                value-format="yyyy-MM-dd" :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="获奖等级" prop="gradeOfAward">
                            <el-select v-model="form.gradeOfAward" placeholder="获奖等级" clearable :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="8">
                        <el-form-item label="发证机关" prop="licenseIssuingAuthority">
                            <el-input v-model="form.licenseIssuingAuthority" :style="{ width: '100%' }"></el-input>
                        </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"></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="8">
                        <el-form-item label="获奖名称" prop="awardName">
                            <el-input v-model="form.awardName" :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="获奖时间：" prop="awardTime">
                            <el-date-picker v-model="form.awardTime" type="date" placeholder="选择获奖时间"
                                :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="获奖等级">
                            <el-select v-model="form.gradeOfAward" placeholder="获奖等级" :style="{ width: '100%' }">
                                <el-option label="一等奖" value="1"></el-option>
                                <el-option label="二等奖" value="2"></el-option>
                                <el-option label="三等奖" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发证机关">
                            <el-input v-model="form.licenseIssuingAuthority" :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <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 {
    addAward, // 新增获奖情况
    getAward,//查询获奖情况列表
    updateaAward,  // 修改获奖情况
    delAward,// 删除获奖情况
    listAward,// 查询获奖情况详情

} from "@/api/smartSchool/personWork/businessAwards";
import FilepersonUploadNew from "@/components/FilepersonUploadNew";
export default {
    name: 'businessAwards',
    dicts: ['grade_type1'],

    components: {
        FilepersonUploadNew,
    },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            fileList: [],
            queryParams: {
                awardName: "",
                awardTime: "",
                gradeOfAward: "",
                licenseIssuingAuthority: "",
                pageNum: 1,
                pageSize: 10,
                dataUrl: null,

            },
            title: "",
            rules: {
                awardName: [
                    { required: true, message: "获奖名称不能为空", trigger: "blur" }
                ],
                awardTime: [
                    { required: true, message: "获奖时间不能为空", trigger: "blur" }
                ],

                gradeOfAward: [
                    { required: true, message: "获奖等级不能为空", trigger: "blur" }
                ],

                licenseIssuingAuthority: [
                    { required: true, message: "发证机关不能为空", trigger: "blur" }
                ],






            },
            // 查看表格
            lookTable: [],
            tableData: [],
            options: [
                { value: '1', label: '启用' },
                { value: '2', label: '禁用' },
            ],
            form: {
                awardName: "",
                awardTime: "",
                gradeOfAward: "",
                licenseIssuingAuthority: "",

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

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


    methods: {
        /** 查询 */
        getList() {
            getAward(this.queryParams).then((response) => {
                this.tableData = response.rows;
                this.loading = false;
                console.log(111, response.rows);
                this.total = response.total;
            });
        },
        // 重置
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            const id = row.id || this.ids;
            listAward(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;
                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() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.schoolAccessoryList.length > 0) {
                        if (this.form.id !== undefined) {
                            // 更新操作
                            const newObj = {
                                id: this.form.id,
                                awardName: this.form.awardName,
                                awardTime: this.form.awardTime,
                                gradeOfAward: this.form.gradeOfAward,
                                licenseIssuingAuthority: this.form.licenseIssuingAuthority,
                                schoolAccessoryList: this.schoolAccessoryList.map((item) => ({
                                    accessoryUrl: item.accessoryUrl,
                                    accessoryName: item.accessoryName,
                                })),
                            };
                            updateaAward(newObj)
                                .then((response) => {
                                    this.$modal.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();
                                })
                                .catch((error) => {
                                    this.$message.error("修改失败");
                                });
                        } else {
                            // 新增操作
                            const newObj = {
                                id: this.form.id,
                                awardName: this.form.awardName,
                                awardTime: this.form.awardTime,
                                gradeOfAward: this.form.gradeOfAward,
                                licenseIssuingAuthority: this.form.licenseIssuingAuthority,
                                schoolAccessoryList: this.schoolAccessoryList.map((item) => ({
                                    accessoryUrl: item.accessoryUrl,
                                    accessoryName: item.accessoryName,
                                })),
                            };
                            addAward(newObj)
                                .then((response) => {
                                    this.$modal.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                })
                                .catch((error) => {
                                    this.$message.error("新增失败");
                                });
                        }
                    } else {
                        this.$message.error("请上传附件");
                    }
                }
            });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除"' + ids + '"的数据项？').then(function () {
                return delAward(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 查看 */
        handleLook(row) {
            this.form = row;
            this.openLook = true;
            const id = row.id || this.ids;
            listAward(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 = {
                awardName: null,
                awardTime: null,
                gradeOfAward: null,
                licenseIssuingAuthority: null,

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

}
</script>

<style scoped></style>

