<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="trainingTime" label="培训时间">
                <el-date-picker v-model="queryParams.trainingTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd" clearable>
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="trainingName" label="培训名称">
                <el-input v-model="queryParams.trainingName" placeholder="培训名称" clearable />
            </el-form-item>
            <el-form-item prop="isQualified" label="是否合格">
                <el-select v-model="queryParams.isQualified" placeholder="是否合格">
                    <el-option v-for="dict in dict.type.
                        is_qualified" :key="dict.value" :label="dict.label" :value="dict.value" clearable />
                </el-select>
            </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="trainingTime" label="培训时间" align="center">
            </el-table-column>
            <el-table-column label="培训名称" align="center" prop="trainingName">
            </el-table-column>
            <el-table-column label="是否合格" align="center" prop="isQualified">
                <template slot-scope="scope">
                    {{ scope.row.isQualified === '0' ? '不合格' : '合格' }}
                </template>
            </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>
        <!-- <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="trainingTime">
                            <el-date-picker v-model="form.trainingTime" type="date" placeholder="选择发表时间"
                                :style="{ width: '100%' }" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="培训名称" prop="trainingName">
                            <el-input v-model="form.trainingName" :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否合格" prop="isQualified">
                            <el-select v-model="form.isQualified" placeholder="是否合格" :style="{ width: '100%' }">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </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="trainingTime">
                            <el-date-picker v-model="form.trainingTime" type="date" placeholder="选择发表时间"
                                :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="培训名称">
                            <el-input v-model="form.trainingName" :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否合格">
                            <el-select v-model="form.isQualified" placeholder="是否合格" :style="{ width: '100%' }">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </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 {
    addTraining, // 新增培训情况
    getTraining,// 查询培训情况列表
    updateTraining,  //修改培训情况
    delTraining,//// 删除培训情况
    listTraining,// // 查询培训情况详情

} from "@/api/smartSchool/personWork/traiNing";
import FilepersonUploadNew from "@/components/FilepersonUploadNew"

export default {
    dicts: ['is_qualified'],

    name: 'traiNing',
    components: {
        FilepersonUploadNew,
    },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            fileList: [],
            queryParams: {
                trainingTime: "",
                trainingName: "",
                isQualified: "",
                pageNum: 1,
                pageSize: 10,

            },
            // 附件
            schoolAccessoryList: [],
            title: "",
            rules: {
                trainingTime: [
                    { required: true, message: "培训时间不能为空", trigger: "blur" }
                ],
                trainingName: [
                    { required: true, message: "培训名称不能为空", trigger: "blur" }
                ],

                isQualified: [
                    { required: true, message: "是否合格不能为空", trigger: "blur" }
                ],
            },
            // 查看表格
            lookTable: [],
            tableData: [],
            options: [

            ],
            form: {
                trainingTime: "",
                trainingName: "",
                isQualified: "",

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

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


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

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

        /** 修改按钮操作 */
        handleUpdate(row) {
            const id = row.id || this.ids;
            listTraining(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.fileList);
                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,
                                trainingTime: this.form.trainingTime,
                                trainingName: this.form.trainingName,
                                isQualified: this.form.isQualified,
                                schoolAccessoryList: this.schoolAccessoryList.map(item => ({
                                    accessoryUrl: item.accessoryUrl,
                                    accessoryName: item.accessoryName
                                }))
                            };
                            updateTraining(newObj).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            const newObj = {
                                trainingTime: this.form.trainingTime,
                                trainingName: this.form.trainingName,
                                isQualified: this.form.isQualified,
                                schoolAccessoryList: this.schoolAccessoryList.map(item => ({
                                    accessoryUrl: item.accessoryUrl,
                                    accessoryName: item.accessoryName
                                }))
                            };
                            addTraining(newObj).then(response => {
                                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 delTraining(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 查看 */
        handleLook(row) {
            this.form = row;
            this.openLook = true;
            const id = row.id || this.ids
            listTraining(id).then((response) => {
                this.form = response.data;
                console.log('this.tableData', this.tableData);
                this.fileList = response.data.schoolAccessoryList;
                console.log('this.fileList', this.fileList);
                console.log(response.data);
            });
            this.title = "查看";

        },
        //新增按钮操作
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "新增培训情况";

        },
        // 表单重置
        reset() {
            this.form = {
                trainingTime: null,
                trainingName: null,
                isQualified: null,

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

}
</script>

<style scoped></style>

