<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="100px">
            <el-form-item prop="activityName">
                <el-input v-model="queryForm.activityName" @keyup.enter.native="handleQuery" placeholder="活动名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeData(dateRange)">
                </el-date-picker>
                <!-- 时间短（天） -->
                <span v-if="diffDate !== ''" style="font-size: 14px">({{ diffDate }})天</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="handleAdd">新增</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格信息 -->
        <el-table stripe ref="applyTable" v-loading="loading" :data="infoList" :cell-style="cellStyle">
            <el-table-column type="index" label="序号" width="55" align="center" fixed="left"></el-table-column>
            <el-table-column label="活动名称" align="center" prop="activityName" width="100px" fixed="left" />
            <el-table-column label="活动地点" align="center" width="120px" prop="activityArea" />
            <el-table-column label="负责人" align="center" prop="specificUserName" />
            <el-table-column label="活动人数" align="center" prop="activityNumber" />
            <el-table-column label="是否彩排" align="center" width="120px" prop="isRehearsal">
                <template slot-scope="{ row }">
                    {{ row.isRehearsal == 0 ? "否" : row.isRehearsal == 1 ? "是" : "" }}
                </template>
            </el-table-column>
            <el-table-column label="是否录像" align="center" prop="isVideo">
                <template slot-scope="{ row }">
                    {{ row.isVideo == 0 ? "否" : row.isVideo == 1 ? "是" : "" }}
                </template>
            </el-table-column>
            <el-table-column label="是否直播" align="center" prop="isLive">
                <template slot-scope="{ row }">
                    {{ row.isLive == 0 ? "否" : row.isLive == 1 ? "是" : "" }}
                </template>
            </el-table-column>
            <el-table-column label="申请状态" align="center" width="120px" prop="state">
                <template slot-scope="{ row }">
                    {{ row.state === '0' ? "未提交" :
                        row.state === '1' ? "审核中" :
                            row.state === '2' ? "审核通过" :
                                "审核不通过" }}
                </template>
            </el-table-column>
            <el-table-column label="申请人" align="center" prop="applyName" />
            <el-table-column label="申请时间" width="200px" align="center" prop="applyTime" />
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="200px">
                <template slot-scope="scope">
                    <div v-if="scope.row.state === '0'">
                        <!-- 未提交状态 -->
                        <el-button size="mini" type="text" icon="el-icon-s-promotion"
                            @click="submitApply(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>
                    </div>
                    <div v-else>
                        <!-- 审核中、审核通过、审核不通过状态 -->
                        <el-button size="mini" type="text" icon="el-icon-search" @click="lookForm(scope.row)">查看</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增/修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body @close="cancel">
            <el-form ref="postForm" :model="postForm" :rules="rules" label-width="110px">
                <div class="dialog-footer btn">
                    <el-button class="btnup" type="primary" @click="submitForm">确 定</el-button>
                    <el-button class="btnup" @click="cancel">关 闭</el-button>
                </div>
                <h2 style="
            text-align: center;
            font-size: 24px;
            font-family: SourceHanSansSC-regular;
          ">
                    东营市二中大型活动信息技术保障申请单
                </h2>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="活动名称" prop="activityName">
                            <el-input v-model="postForm.activityName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="活动场地" prop="activityArea">
                            <el-input v-model="postForm.activityArea" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="活动时间" prop="activityTime">
                            <el-date-picker v-model="postForm.activityTime" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择日期" :picker-options="pickerOptions"
                                :style="{ width: '276.66px' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="具体负责人" prop="specificUserName">
                            <el-input type="text" v-model="postForm.specificUserName" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="活动人数" prop="activityNumber">
                            <el-input type="number" v-model="postForm.activityNumber" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="预计时长" prop="duration">
                            <el-input type="number" v-model="postForm.duration" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="是否彩排" prop="isRehearsal">
                            <el-radio-group v-model="postForm.isRehearsal">
                                <el-radio label='1'>是</el-radio>
                                <el-radio label='0'>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否录像" prop="isVideo">
                            <el-radio-group v-model="postForm.isVideo">
                                <el-radio label='1'>是</el-radio>
                                <el-radio label='0'>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否直播" prop="isLive">
                            <el-radio-group v-model="postForm.isLive">
                                <el-radio label='1'>是</el-radio>
                                <el-radio label='0'>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否需要大屏" prop="isBigScreen">
                            <el-radio-group v-model="postForm.isBigScreen">
                                <el-radio label='1'>是</el-radio>
                                <el-radio label='0'>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="其他要求" prop="otherRequirements">
                            <el-input v-model="postForm.otherRequirements" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="leadershipName">
                            <template #label>
                                <span class="required">*</span>
                                分管领导
                            </template>
                            <el-input :value="postForm.leadershipName" placeholder="请选择分管领导"
                                @focus="openSelect('选择分管领导', 'leaderList', 2)"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="24">
                        <el-form-item prop="url">
                            <!-- <el-upload class="upload-demo" ref="upload" action="#" :auto-upload="true"
                                :before-upload="beforeUpload" :on-change="fileChange" :http-request="uploadFile"
                                :on-remove="handleRemoveFile" :file-list="fileList">
                                <el-input slot="trigger" size="small" type="primary">选取文件
                                </el-input>
                            </el-upload> -->
                            <template #label>
                                <span class="required">*</span>
                                流程单附件
                            </template>
                            <FileUploadNew @input="getFileList" :limit="1" :value="fileList"></FileUploadNew>
                            <!--
                 limit：number            附件最大数量
                 fileSize：number         附件大小限制（mb）
                 fileType：array          附件类型
                 :value="附件List"        编辑、查看时向子组件传递的附件list（value在子组件props中定义）
                 @input="接收方法"  子组件向父组件传参的方法(input在子组件中引用用于数据回传)
                 -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="sm">
                    说明：1.至少提前两天进行申请，并与信息技术中心进行电话确认
                </div>
                <div class="sm sm2">2.大型活动必须是学校研究确定同意安排的</div>
                <div class="sm sm2">
                    3.提报申请单必须同步提交活动详细流程单（节目单）及需要的活动资源
                </div>
            </el-form>
        </el-dialog>
        <!--查看对话框 -->
        <el-dialog :title="title" :visible.sync="look" width="1200px" append-to-body @close="cancel">
            <el-form ref="postForm" :model="postForm" :rules="rules" label-width="110px">
                <div class="dialog-footer btn">
                    <el-button class="btnup" @click="cancel">关 闭</el-button>
                </div>
                <h2 style="
            text-align: center;
            font-size: 24px;
            font-family: SourceHanSansSC-regular;
          ">
                    东营市二中大型活动信息技术保障申请单
                </h2>

                <div>
                    <table style="width: 100%" class="tabstyle">
                        <tr>
                            <td>活动名称</td>
                            <td class="btntext">{{ activityName }}</td>
                            <td>活动场地</td>
                            <td class="btntext">{{ activityArea }}</td>
                            <td>活动时间</td>
                            <td class="btntext">{{ activityTime }}</td>
                        </tr>
                        <tr>
                            <td>具体负责人</td>
                            <td class="btntext">{{ specificUserName }}</td>
                            <td>活动人数</td>
                            <td class="btntext">{{ activityNumber }}</td>
                            <td style="width: 100px">预计时长</td>
                            <td class="btntext">{{ duration }}</td>
                        </tr>
                        <tr>
                            <td>是否彩排</td>
                            <td class="btntext"> {{
                                isRehearsal === '1' ? '是' : '否' }} </td>
                            <td>是否录像</td>
                            <td class="btntext">{{ isVideo === '1' ? '是' : '否' }}</td>
                            <td style="width: 100px">是否直播</td>
                            <td class="btntext">{{ isLive === '1' ? '是' : '否' }}</td>
                        </tr>
                        <tr>
                            <td>话筒数量</td>
                            <td>{{ htNumber }}</td>
                            <td>是否需要大屏</td>
                            <td class="btntext" colspan="5">{{ isBigScreen === '1' ? '是' : '否' }}</td>
                        </tr>

                        <tr>
                            <td rowspan="2" class="btntxt">附件</td>
                            <td colspan="6">
                                <!-- <p v-for="(item, index) in fileList" :key="index">
                                    <el-link :underline="false" :href="item.fjlj" type="primary" target="_blank">
                                        {{ item.fjmc }}
                                    </el-link>

                                </p>  -->
                                <p>
                                    <el-link :underline="false" :href="postForm.fjlj" type="primary" target="_blank">
                                        {{ postForm.fjmc }}
                                    </el-link>
                                    <!-- <el-button type="primary" size="mini" @click="downloadFile(postForm.fjlj)">
                                        下载
                                    </el-button> -->

                                </p>
                            </td>
                        </tr>



                    </table>
                    <el-row style="margin-top: 15px; margin-left: 20px">
                        <el-col :span="8">
                            <span class="uploadname" style="font-size: 16px; font-weight: bold">申请人：
                                {{ applyName }}
                            </span>
                        </el-col>
                        <el-col :span="8">
                            <span class="uploadname" style="font-size: 16px; font-weight: bold">申请部门：
                                {{ applyDept }}
                            </span>
                        </el-col>
                        <el-col :span="8">
                            <span class="uploadname" style="font-size: 16px; font-weight: bold">学校分管领导：
                                {{ leadershipName }}&nbsp; {{ displayState }}
                            </span>
                        </el-col>
                    </el-row>
                </div>
                <div class="sm">
                    说明：1.至少提前两天进行申请，并与信息技术中心进行电话确认
                </div>
                <div class="sm sm2">2.大型活动必须是学校研究确定同意安排的</div>
                <div class="sm sm2">
                    3.提报申请单必须同步提交活动详细流程单（节目单）及需要的活动资源
                </div>
            </el-form>
        </el-dialog>
        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList"></pagination>
        <!-- 选择对应处理人 -->
        <SelectUser :id="selectHandles.id" :open.sync="selectHandles.open" :title="selectHandles.title"
            :width="selectHandles.width" :execute="selectHandles.method" @select="selectUser"></SelectUser>
    </div>
</template>

<script>
import {
    listAuditor,// 查询礼堂预约列表
    addAuditor,// 新增礼堂预约
    getAuditor,// 查看详情
    updateAuditor, //修改礼堂预约信息
    delAuditor,  // 删除礼堂预约
    submitAuditor,//提交礼堂预约申请
    getLeaderList,//获取校领导下拉框
    uploadList,//文件上传
} from "@/api/smartSchool/personWork/auditoriumReservation";
import { CustomCellStyle } from "@/enums/customStyle";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import SelectUser from "./components/SelectUser";
import moment from 'moment'
import FileUploadNew from '@/components/FileUploadNew';
import { downLoadFile } from "@/utils/utilLibrary/downloadFile";
import 'moment/locale/zh-cn';
export default {
    name: "auditoriumReservation",
    components: {
        SelectUser,
        FileUploadNew
    },


    data() {
        return {
            stateTexts: ['未提交', '审核中', '审核通过', '审核不通过'],
            // 上传
            upload: {
                isUploading: false,
                progress: 0,
                hasFile: false,
            },
            // 天数
            diffDate: "",
            title: '', // 初始化 "title" 属性
            week: "", // 选择的天数
            // 日期范围
            dateRange: [],
            // 提交状态
            state: "",
            // 自定义列表单元格样式
            cellStyle: CustomCellStyle,
            // 活动名称
            activityName: "",
            // 活动地点
            activityArea: "",
            // 活动时间
            activityTime: "",
            // 具体负责人
            specificUserName: "",
            // 活动人数
            activityNumber: "",
            // 预计时长
            duration: "",
            // 是否彩排
            isRehearsal: "",
            // 是否录像
            isVideo: "",
            // 是否直播
            isLive: "",
            // 是否大屏
            isBigScreen: "",
            // 话筒数量
            htNumber: "",
            // 附件名称
            fjmc: "",
            // 附件路径
            fjlj: "",
            // 申请人
            applyName: "",
            //申请部门
            applyDept: "",
            // 学校分管领导
            leadershipName: "",
            //后端传校领导列表
            schoolLeaderList: [],
            // 部门树选项
            deptOptions: undefined,
            teacherSelect: '教师信息',
            teacherSelectDialog: false,
            // 查询表单
            queryForm: {
                activityName: "",
                dateRange: [], // 选择的开始日期和结束日期
                pageNum: 1,
                pageSize: 10,
                sj: ''
            },
            // 弹出层标题
            dialogTitle: "",
            dialogTeacherLeaveView: false,
            dialogViewTeacherLeave: false,
            dialogTeacherLeave: false,
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 是否只读
            readonly: false,
            // 多个禁用
            multi: false,
            // 显示搜索条件
            showSearch: true,
            // 信息列表
            infoList: [

            ],
            form: {},
            // 数据总数
            total: 0,
            // 新增/修改表单
            postForm: {
                activityName: "",
                activityArea: '',
                activityTime: "",
                specificUserName: this.$store.state.user.name,
                activityNumber: "",
                duration: "",
                isRehearsal: "",
                isVideo: "",
                isLive: "",
                isBigScreen: "",
                htNumber: "",
                fjmc: "",
                fjlj: "",
                leadershipId: "",

            },
            pickerOptions: {
                disabledDate(time) {
                    const today = moment().startOf('day');
                    return moment(time).isBefore(today);
                }
            },

            // 分管领导id
            leadershipId: '',
            // 审批人
            entrust: {
                open: false,
                title: '选择审批人'
            },
            // 文件回显
            fileList: [],
            // 选择对应处理人
            selectHandles: {
                id: null,
                open: false,
                title: '',
                width: '50%',
                method: null,
                type: null // 处理类型： 1 级部/处室； 2 分管； 3 主管
            },
            // 是否显示新增弹出层
            open: false,
            // 查看
            look: false,
            // 展示确定取消按钮
            isShow: true,
            // 是否禁用输入框
            isDisabled: false,
            // // 表单校验
            rules: {

                activityName: [
                    { required: true, message: "活动名称不能为空", trigger: "blur" }
                ],
                activityArea: [
                    { required: true, message: "活动场地不能为空", trigger: "blur" }
                ],

                specificUserName: [
                    { required: true, message: "具体负责人不能为空", trigger: "blur" }
                ],
                activityNumber: [
                    { required: true, message: "活动人数不能为空", trigger: "blur" }
                ],
                activityTime: [
                    { required: true, message: "活动不能为空", trigger: "blur" }
                ],

                duration: [
                    { required: true, message: "预计时长不能为空", trigger: "blur" }
                ],
                isRehearsal: [
                    { required: true, message: "是否彩排不能为空", trigger: "blur" }
                ],
                isVideo: [
                    { required: true, message: "是否录像不能为空", trigger: "blur" }
                ],
                isLive: [
                    { required: true, message: "是否直播为空", trigger: "blur" }
                ],

                isBigScreen: [
                    { required: true, message: "是否需要大屏不能为空", trigger: "blur" }
                ],

                // leadershipName: [
                //     { required: true, message: "分管领导不能为空", trigger: "change" }
                // ],

                fjmc: [
                    { required: true, message: "流程单附件不能为空", trigger: "blur" }
                ],





            },

            // 列表信息
            columns: [],
        };
    },
    computed: {
        displayState() {
            return this.stateTexts[this.state] || '';
        }
    },
    created() {
        this.getList();



    },

    methods: {
        downloadFile(url) {
            // 在这里编写下载文件的逻辑，可以使用浏览器的下载功能或者自定义的下载方法
            window.open(url, "_blank");
        },
        // changeData(dateRange) {
        //     if (Array.isArray(dateRange) && dateRange.length === 2) {
        //         this.queryForm.sj = dateRange; // 更新日期范围选择器的值
        //         this.queryForm.startTime = dateRange[0]; // 更新开始日期
        //         this.queryForm.endTime = dateRange[1]; // 更新结束日期

        //         // 调用后端接口或其他相关处理
        //         // this.getList();
        //     }
        // },

        getDisplayState(state) {
            switch (state) {
                case 0:
                    return '未提交';
                case 1:
                    return '审核中';
                case 2:
                    return '审核通过';
                case 3:
                    return '审核不通过';
                default:
                    return '';
            }

        },

        handleUploadClick() {
            // 触发文件上传的点击事件
            this.$refs.upload.$el.querySelector('.el-upload__input').click();
        },
        //上传按钮
        getFileList(data) {
            console.log('data', data);
            this.fileList = data;
            if (this.fileList.length != 0) {
                this.postForm.fjlj = data[0].fjlj;
                this.postForm.fjmc = data[0].fjmc;
                console.log('this.postForm', this.postForm);
            } else {
                this.postForm.fjlj = '';
                this.postForm.fjmc = '';


            }
        },

        /** 获取列表数据 */
        getList() {
            const params = {
                activityName: this.queryForm.activityName,
                pageNum: this.queryForm.pageNum,
                pageSize: this.queryForm.pageSize,
                startTime: this.dateRange[0],
                endTime: this.dateRange[1]
            };
            console.log('params', params);
            listAuditor(params).then(response => {
                this.loading = false;
                this.infoList = response.rows;
                console.log(111, response.rows);
                this.total = response.total;
            }).catch(err => {
                this.loading = false;
            })
        },

        confirm() {
            this.dialogViewTeacherLeave = false;
        },
        openViewTeacherLeaveForm(row) {
            this.reset();
            const id = row.id || this.ids
            getTeacherLeave(id).then(response => {
                this.form = response.data;
                this.dialogViewTeacherLeave = true;
            });
        },
        dialogOpenApproveHistory(row) {
            this.dialogApproveHistory = true
            this.getApproveHistoryList(row)
        },
        getApproveHistoryList(row) {
            listHistory({ instanceId: row.instanceId }).then(res => {
            })
        },
        openTeacherSelect() {
            this.teacherSelectDialog = true
        },
        // 新增操作
        setTeacherInfo(data) {
            this.teacherSelectDialog = false;
            this.$set(this.form, 'teacherName', data.teacherName);
            this.$set(this.form, 'teacherId', data.id);
            this.dialogTeacherAward = true;
            this.title = "新增请假信息";
        },
        /** 获取教师信息列表 */
        getTeacherList(queryForm, callback) {
            listInform(queryForm).then(response => {
                callback(response.rows, response.total);
            }).catch(error => {
                callback([], 0);
            })
        },
        //获校领导下拉框、
        schoolLeader() {
            getLeaderList().then(((res) => {
                if (res.code == 200) {
                    this.schoolLeaderList = res.rows
                }

            }))
        },
        handleDeputyLeader(data) {
            const { leadershipName, leadershipId } = data;
            this.form.leadershipName = leadershipName;
            this.form.leadershipId = leadershipId;
        },

        /** 查看 */
        lookForm(row) {
            this.reset();
            const id = row.id || this.ids
            // this.title = "查看";
            this.postForm = row;
            console.log(111, row)
            getAuditor(id).then((response) => {
                console.log(333, this.postForm);
                this.activityArea = response.data.activityArea;
                this.activityName = response.data.activityName;
                this.activityTime = response.data.activityTime;
                this.specificUserName = response.data.specificUserName;
                this.activityNumber = response.data.activityNumber;
                this.duration = response.data.duration;
                this.isRehearsal = response.data.isRehearsal;
                this.isVideo = response.data.isVideo;
                this.isLive = response.data.isLive;
                this.htNumber = response.data.htNumber;
                this.isBigScreen = response.data.isBigScreen;
                this.applyName = response.data.applyName;
                this.applyDept = response.data.applyDept;
                this.leadershipName = response.data.leadershipName;
                this.postForm.fjmc = response.data.fjmc; // 将 fjmc 存储在 postForm 中
                this.postForm.fjlj = response.data.fjlj; // 将 fjlj 存储在 postForm 中
                console.log('this.fjmc', this.fjmc);
                this.state = response.data.state;
                this.loading = false;
                this.look = true;
            });
        },

        // 计算天数
        changeData(value) {
            const startDate = value[0];
            const endDate = value[1];
            const diffDate = moment(endDate).diff(startDate, 'day');
            this.diffDate = diffDate; // 更新diffDate属性的值
            console.log('value', value);
            console.log('this.diffDate', this.diffDate);

        },
        // 提交按钮
        submitApply(row) {
            console.log('row', row);
            this.$confirm('确认要提交申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    submitAuditor(row.id).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            })
                            this.getList()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    })
                })
        },


        // 搜索按钮
        handleQuery() {
            this.throttle(() => {
                this.queryForm.pageNum = 1;
                this.getList();
            });
        },

        // 重置按钮
        resetQuery() {
            const state = this.queryForm.state;
            this.dateRange = []; // 重置日期选择器
            this.diffDate = ''; // 重置 diffDate 为默认值
            this.queryForm = {
                state: state,
                pageNum: 1,
                pageSize: 10,
            };
            this.week = "";
            this.handleQuery(); // 重新发一次请求
        },


        // getFormatDate(timeDate) {
        //     let date = new Date(timeDate);
        //     let year = date.getFullYear();
        //     let month = date.getMonth() + 1;
        //     let day = date.getDate();
        //     return [year, '-', month, '-', day].join('');
        // },



        readNodes(nodes = [], arr = []) {
            for (let item of nodes) {
                arr.push({ id: item.id, label: item.label })
                if (item.children && item.children.length) this.readNodes(item.children, arr)
            }
            return arr
        },

        // 选择处理人:打开对话框
        openSelect(title, method, type) {
            this.selectHandles.open = true;
            this.selectHandles.title = title;
            this.selectHandles.method = method;
            this.selectHandles.type = type;

        },
        // 选择处理人
        selectUser(select) {
            console.log('select', select);
            // 这种写法存在一定危险，后续最好是可以有更好的字段名对应
            this.$set(this.form, `handUserName${this.selectHandles.type}`, select.name);
            this.$set(this.form, `handUserId${this.selectHandles.type}`, select.id);
            this.postForm.leadershipName = select.name;
            this.postForm.leadershipId = select.id;

        },


        // 新增按钮操作
        handleAdd() {
            this.reset();
            // const userId = this.$store.state.user.userId;
            this.postForm.activityArea = "博远礼堂";
            // this.postForm.specificUserName = this.$store.state.user.name;
            this.postForm.fjlj = '';
            this.postForm.fjmc = '';
            this.isShow = true;
            this.isDisabled = false;
            this.open = true;
            // this.title = "添加申请";
        },

        // 修改按钮操作
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            this.postForm = row;
            console.log('this.fileList', this.fileList);
            getAuditor(id).then(response => {
                this.postForm = response.data;
                console.log('this.fileList', this.fileList)
                if (this.postForm.fjlj == '' || this.postForm.fjlj == undefined || this.postForm.fjlj == null) {
                    this.fileList = []
                } else {
                    this.fileList = [{
                        fjlj: this.postForm.fjlj,
                        fjmc: this.postForm.fjmc,
                    }]
                }


                console.log('postForm', this.postForm);
                this.postForm.leadershipName = response.data.leadershipName
                console.log(1111, response.data);
                this.open = true;
                this.isDisabled = false;


            });
        },
        // 删除按钮操作
        handleDelete(row) {
            this.throttle(() => {
                const ids = row.id || this.ids;
                if (ids) {
                    this.$modal
                        .confirm(
                            `是否确认删除选中的${Object.hasOwnProperty.call(ids, "length") ? ids.length : 1
                            }条数据？`
                        )
                        .then(() => {
                            this.$modal.loading("正在处理数据，请稍等...");
                            return delAuditor(ids);
                        })
                        .then(() => {
                            this.$modal.closeLoading();
                            this.getList();
                            this.$modal.msgSuccess("删除成功");
                        })
                        .catch(() => {
                            this.$modal.closeLoading();
                        });
                }
            });
        },
        // 提交表单
        submitForm() {
            this.throttle(() => {
                this.$refs["postForm"].validate((valid) => {
                    if (valid) {
                        console.log('this.postForm', this.postForm);
                        // this.$modal.loading("正在上传数据，请稍等...");
                        if (this.postForm.id != null) {
                            if (this.fileList.length != 0) {
                                // 查看表单
                                updateAuditor(this.postForm)
                                    .then((response) => {
                                        this.$modal.closeLoading();
                                        this.$modal.msgSuccess("修改成功");
                                        this.open = false;
                                        this.getList();
                                    })
                                    .catch((err) => {
                                        this.$modal.closeLoading();
                                    });
                            } else {
                                this.$modal.msgError("流程单附件不能为空");
                            }

                        } else {
                            if (this.fileList.length != 0) {
                                console.log('this.postForm', this.postForm);
                                addAuditor(this.postForm)
                                    .then((response) => {
                                        this.$modal.closeLoading();
                                        this.$modal.msgSuccess("新增成功");
                                        this.open = false;
                                        this.getList();
                                    })
                                    .catch((err) => {
                                        this.$modal.closeLoading();
                                    });
                            } else {
                                this.$modal.msgError("流程单附件不能为空");

                            }
                            // 新增

                        }
                    }
                });
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.look = false;
            // this.resetQuery();
            this.reset();
        },
        // 重置
        reset() {
            // 这里需要重置对话框表单
            this.postForm = {
                activityName: "",
                activityArea: '',
                activityTime: "",
                specificUserName: this.$store.state.user.name,
                activityNumber: "",
                duration: "",
                isRehearsal: "",
                isVideo: "",
                isLive: "",
                isBigScreen: "",
                htNumber: "",
                // fjmc: null, 
                // fjlj: null, 

                leadershipId: "",
                pageNum: 1,
                pageSize: 10,
                leadershipName: "",


            };
            this.fileList = []; // 清空附件列表
            this.resetForm("postForm");
        },

        /** 下载 */
        handleDownLoad({ url, name, id }) {
            if (isString(url) && url.lastIndexOf("/") > -1) {
                // this.$download.name(url.slice(url.lastIndexOf("/") + 1), false);
                // this.download(url, {});
                // downLoadFile(url, name);
                updateDownload(id).then(response => {
                    this.$download.resource(url);
                    this.getList();
                }).catch(error => {
                })
            } else {
                return "";
            }
        },
        /** 上传文件前的钩子 */
        beforeUpload() {
            this.upload.isUploading = false;
            this.upload.progress = 0;
        },

        /** 添加的文件时触发该钩子 */
        fileChange(file, fileList) {
            fileList.length > 0 && (this.upload.hasFile = true);
            this.$refs.upload.uploadFiles = [file];
        },

        /** 上传文件到服务器 */
        submitFile() {
            this.$refs.upload.submit();
        },

        /** 删除文件 */
        handleRemoveFile(file, fileList) {
            fileList.length === 0 && (this.upload.hasFile = false);
        },

        /** 文件上传 */
        // uploadFile(file, fileList) {
        //     const fileData = file.file;
        //     const fileName = fileData.name;
        //     const formData = new FormData();
        //     formData.append("file", fileData);
        //     this.upload.isUploading = true;
        //     uploadList(formData).then(response => {
        //         this.$message.success("上传成功");
        //         this.form.url = response.url;
        //         this.form.name = fileName;
        //         this.upload.isUploading = false;
        //     }).catch(error => {
        //         // 处理上传失败的情况
        //     });
        // },
        // 附件上传回调函数
        uploadFile(data) {
            console.log('getFileList', data)
            // this.form.files = data
            uploadList().then(response => {
                return {
                    "fjlj": item.url,
                    "fjmc": item.name
                }
            })
            console.log('dzbFjList', this.dzbFjList)
        },
        /** 文件下载 */
        // downloadFile(fileUrl) {
        // },



    },
};
</script>

<style lang="scss" scoped>
.sm {
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    /* text-align: left; */
    font-family: SourceHanSansSC-regular;
    margin-top: 8px;
    margin-left: 28px;
}

.sm2 {
    margin-left: 68px;
}

.btn {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.btnup {
    margin-left: 12px;
    padding: 9px 25px;
    border-radius: 6px;
    background-color: rgba(15, 64, 245, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 13px;
    text-align: center;
    font-family: PingFang SC;
}

.F1title {
    font-size: 16px;
    font-weight: bold;
    margin: 4px;
}

.tabstyle {
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 16px !important;
}

.tabstyle td,
.tabstyle th {
    border: 1px solid black;
    padding: 8px;
    position: relative;
}

.tabstyle input[type="text"] {
    border: none;
    outline: none;
    font-size: inherit;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* opacity: 0; */
}

.btntext {
    width: 260px;
}

// 新增弹窗输入框宽度
.equal-width {
    width: 100%;
    /* 设置宽度为100% */
}

.required {
    color: red;
}

.label-text {
    margin-left: 5px;
}
</style>
