<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="108px">
            <el-form-item label="实验名称">
                <el-input v-model="queryForm.experimentName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="计划开始时间">
                <el-date-picker v-model="queryForm.startTime" type="date" placeholder="选择" value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-date-picker v-model="queryForm.endTime" type="date" placeholder="选择月" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="申报状态">
                <el-select v-model="queryForm.applyState" placeholder="请选择" clearable>
                    <el-option v-for="dict in dict.type.declare_state" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" 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" border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="55" />
            <el-table-column align="center" prop="sub" label="学科">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.lab_sub, row.sub) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="schoolYearSemester" label="学年" />
            <el-table-column align="center" prop="className" label="班级" />
            <el-table-column align="center" prop="experimentTime" label="实验时间" />
            <el-table-column align="center" prop="section" label="节次" />
            <el-table-column align="center" prop="experimentName" label="实验名称" />
            <el-table-column align="center" prop="experimentClassify" label="实验分类">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.experiment_classify, row.experimentClassify) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="labName" label="实验室" />
            <el-table-column align="center" prop="chapterContent" label="章节内容" />
            <el-table-column align="center" prop="schoolAccessoryList" label="附件" width="200">
                <template slot-scope="scope">
                    <div v-for="(accessory, index) in scope.row.accessoryList" :key="index">
                        <a :href="baseUrl + accessory.accessoryUrl" target="_blank">{{ accessory.accessoryName }}</a>
                    </div>
                </template>

            </el-table-column>
            <el-table-column align="center" prop="applyState" label="申报状态">
                <template slot-scope="{ row }">
                    <div v-if="row.applyState === '1'">已确认</div>
                    <div v-else-if="row.applyState === '0'">未确认</div>
                </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <template v-if="scope.row.applyState === '0'">
                        <el-button @click="handleLook(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                    <template v-else-if="scope.row.applyState === '1' && scope.row.state === '0'">
                        <div>
                            <el-button @click="handleLook(scope.row)" type="text" size="small">查看</el-button>
                            <el-button size="small" type="text" @click="handleUpload(scope.row)">上传附件</el-button>
                        </div>
                    </template>
                    <template v-else>
                        <el-button @click="handleLook(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </template>
            </el-table-column>


        </el-table>
        <!-- 查看弹窗 -->
        <el-dialog title="申请信息" :visible.sync="dialogTableVisible" width="60%">
            <el-form :model="form" ref="form" size="small" label-width="110px" :disabled="isEdit">
                <el-row :gutter="30">
                    <el-col :span="10">
                        <el-form-item label="学科">
                            <el-select v-model="form.sub" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.lab_sub" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="级部">
                            <el-input v-model="form.grade" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="10">
                        <el-form-item label="学年">
                            <el-input v-model="form.schoolYear" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="班级">
                            <el-input v-model="form.grade" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="10">
                        <el-form-item label="实验时间">
                            <el-input v-model="form.experimentTime" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="节次">
                            <el-input v-model="form.section" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="10">
                        <el-form-item label="实验名称">
                            <el-input v-model="form.labName" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="实验分类">
                            <el-select v-model="form.experimentClassify" placeholder="请选择" clearable>
                                <el-option v-for="dict in dict.type.experiment_classify" :key="dict.value"
                                    :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="10">
                        <el-form-item label="实验室">
                            <el-input v-model="form.labName" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="章节内容">
                            <el-input v-model="form.chapterContent" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <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-col :span="10">
                        <el-form-item label="申报状态">
                            <el-input :value="getStatusText(form.applyState)" disabled placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button type="primary" @click="cancle">取 消</el-button>
            </div>

        </el-dialog>
        <!-- 导入弹出框 -->
        <el-dialog :title="upload.title" :visible.sync="opendr" width="400px" append-to-body>
            <el-form ref="postForm" :model="postForm" label-width="110px">
                <FileUploadlab @input="getFileList" :limit="1" :value="fileList"></FileUploadlab>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm()"> 确 定 </el-button>
                <el-button @click="cancel = false">取 消</el-button>
            </div>
        </el-dialog>

        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";

import {
    getTeacherlabList,
    getTeacherLab,
    uploadFile,
    uploadFilelist,

} from '@/api/smartSchool/classTeacherWork/laboratoryManagement/laboratoryApplicationrecords';
import FileUploadlab from '@/components/FileUploadlab';

export default {
    dicts: ['experiment_classify', 'lab_sub', 'declare_state'],
    name: 'index',
    components: {
        FileUploadlab
    },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                experimentName: "",
                applyState: "",
                startTime: "",
                endTime: "",
            },
            accessoryUrl: '',
            accessoryName: '',
            schoolAccessoryList: [],
            fileList: [],
            //表格数据
            tableData: [

            ],
            //学科分类
            options: {

            },
            form: {

            },
            postForm: {
                id: '',
                accessoryUrl: '',
                accessoryName: '',
            },
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url:
                    process.env.VUE_APP_BASE_API + "/common/upload",
            },
            applyState: '',            // 表单是否可以修改、
            isEdit: true,
            total: 0,
            dialogTableVisible: false,
            opendr: false,
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getStatusText(applyState) {
            if (applyState === '0') {
                return "未确认";
            } else if (applyState === '1') {
                return "已确认";
            }
        },
        //表单查询
        getList() {
            getTeacherlabList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.tableData = res.rows;
                    this.total = res.total;
                    this.tableData = res.rows.map(item => {
                        item.accessoryList = item.schoolAccessoryList; // 将附件信息赋值给accessoryList属性
                        return item;
                    });
                    console.log(this.tableData, 'this.tableData');
                }
            })
        },

        //查看按钮操作
        handleLook(row) {
            this.dialogTableVisible = true;
            const id = row.id || this.ids
            getTeacherLab(id).then(response => {
                this.form = response.data;
                this.fileList = response.data.schoolAccessoryList;
                this.isEdit = true;
            })

        },
        resetQuery() {
            this.queryForm = {
                pageNum: 1,
                pageSize: 10,
                experimentName: "",
                applyState: "",
                startTime: "",
                endTime: "",
            },
                this.getList();
        },
        //提交按钮
        submitFileForm() {
            // 将 fileList 中的数据转换成 schoolAccessoryList 格式的数组
            const schoolAccessoryList = this.fileList.map(item => ({
                accessoryUrl: item.fjlj,
                accessoryName: item.fjmc
            }));

            // 定义请求的参数对象
            const params = {
                id: this.postForm.id,
                schoolAccessoryList: schoolAccessoryList
            };
            console.log(params);
            // 发送上传文件列表请求
            uploadFilelist(params).then(response => {
                console.log(params);
                this.opendr = false;
                this.getList();
                console.log("schoolAccessoryList", schoolAccessoryList);
            });
        },

        //上传附件按钮操作
        handleUpload(row) {
            console.log(row);
            this.postForm.id = row.id;
            this.opendr = true;
        },
        //取消按钮
        cancle() {
            this.dialogTableVisible = false;
            this.opendr = false;
        },
        //上传按钮
        // getFileList(data) {
        //     console.log('data', data);
        //     this.fileList = data;
        //     if (this.fileList.length !== 0) {
        //         const file = data[0]; // 获取第一个文件的信息
        //         console.log('file', file);
        //         this.accessoryUrl = file.originalFilename;
        //         this.accessoryName = file.url;
        //         console.log(this.accessoryUrl, this.accessoryName);
        //     } else {
        //         this.form.accessoryUrl = '';
        //         this.form.accessoryName = '';
        //     }

        // },
        getFileList(data) {
            console.log('data', data);
            this.fileList = data;
            console.log(this.fileList);
            if (this.fileList.length != 0) {
                this.postForm.accessoryUrl = data[0].fjlj;
                this.postForm.accessoryName = data[0].fjmc;
                console.log('this.postForm', this.postForm);
            } else {
                this.postForm.accessoryUrl = '';
                this.postForm.accessoryName = '';
            }
        },




    }

}

</script>

<style lang="scss" scoped>
.el-table__column--ellipsis .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>