<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 prop="dateRange">
                <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <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 border stripe ref="applyTable" v-loading="loading" :data="infoList" :cell-style="cellStyle">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="活动名称" align="center" prop="activityName" />
            <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" width="80" />
            <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="申请时间" align="center" prop="applyTime" />
            <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- v-if="queryForm.submitState" -->
                    <div>
                        <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="look" width="1200px" append-to-body>
            <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 === '1' ? '是' : '否' }}</td>
                            <td>是否需要大屏</td>
                            <td class="btntext" colspan="5">{{ isBigScreen === '1' ? '是' : '否' }}</td>
                        </tr>
                        <tr>
                            <td rowspan="2" class="btntxt">附件</td>
                            <td colspan="7">{{ fjmc }}</td>
                            <!-- <div style="color:#ff4949;font-size: 12px"
                                        v-if="this.dzbFjList.length == 0 && this.dzbFjList.length == 0">提示：会议记录不能为空
                                    </div> -->
                            <!-- <div v-else></div>
                                    <UploadFileNew @input="getFileList" :value="fileList">
                                    </UploadFileNew> -->
                        </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>
        <!-- 选择对应处理人 -->
        <!-- <SelectUser :id="selectHandles.id" :open.sync="selectHandles.open" :title="selectHandles.title"
            :width="selectHandles.width" :execute="selectHandles.method" @select="selectUser"></SelectUser> -->

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


    </div>
</template>

<script>
import {
    listAuditorqb,
    getAuditor,

} from "@/api/smartSchool/personWork/venueReservation/audreservationStatus";
import { deptTreeSelect, getUser } from "@/api/system/user"
import Treeselect from "@riophae/vue-treeselect";
import { CustomCellStyle } from '@/enums/customStyle';
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { SubmitState } from "@/enums/apply";
import HandleResolve from '@/views/smartSchool/personWork/vehicleApply/components/HandleResolve';
import { ExportType } from "@/enums/common";

export default {
    name: 'audreservationStatus',
    dicts: ['vehicle_types', "vehicle_type", "vehicle_state", "vehicle_use_type"],
    components: {
        Treeselect,
        HandleResolve,


    },
    computed: {
        displayState() {
            return this.stateTexts[this.state] || '';
        }
    },
    watch: {
        'postForm.departmentId'() {
            this.$nextTick(() => {
                this.$refs['postForm'].validateField('departmentId')
            })
        }
    },
    data() {
        const checkKilometers = (rule, value, callback) => {
            let regPos = new RegExp(/^\d+$/)
            if (regPos.test(value)) {
                callback()
            } else {
                callback(new Error('请输入数值'));
            }
        };
        return {
            stateTexts: ['未提交', '审核中', '审核通过', '审核不通过'],
            week: "", // 选择的天数
            // 日期范围
            dateRange: [],
            // 单选框
            radio1: 3,
            radio2: 3,
            radio3: 3,
            radio4: 3,
            // 提交状态
            SubmitState,
            // 提交状态
            state: "",
            // 自定义列表单元格样式
            cellStyle: CustomCellStyle,
            // 当前选中的状态(未提交， 已提交)
            activeName: SubmitState.WILL_SUBMIT,
            // 查询表单
            queryForm: {
                activityName: "",
                dateRange: [], // 选择的开始日期和结束日期
                pageNum: 1,
                pageSize: 10,
                sj: '',
                state: "",
            },
            // 审批历史表单
            historyForm: {
                instanceId: '',
                comment: '',
                assigneeName: '',
            },
            // 审批历史列表
            historyList: [],
            // 遮罩层
            loading: false,
            // 可选车辆列表
            vehicleList: [],
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 是否只读
            readonly: false,
            // 多个禁用
            multi: false,
            // 显示搜索条件
            showSearch: true,
            // 信息列表
            infoList: [],
            // 数据总数
            total: 0,
            // 部门树选项
            deptOptions: undefined,
            // 新增/修改表单
            postForm: {},

            // 查看
            look: false,
            // 是否显示选择车辆弹出层
            workableVehicle: false,
            // 是否显示审批历史弹出层
            historyView: false,
            // 是否显示进度查看弹出层
            progressView: false,
            // 展示确定取消按钮
            isShow: true,
            // 是否禁用输入框
            isDisabled: false,
            // // 表单校验
            rules: {
                licensePlate: [
                    { required: true, message: "车辆不能为空", trigger: "change" },
                ],
                departmentId: [
                    { required: true, message: "用车部门不能为空", trigger: "change" }
                ],
                kilometers: [
                    { required: true, message: "公里数不能为空", trigger: "blur" },
                    { validator: checkKilometers, trigger: 'blur' }
                ]
            },
            // 弹出层标题
            title: '',
            // 列表信息
            columns: [

            ],

            // 活动名称
            activityName: "",
            // 活动地点
            activityArea: "",
            // 活动时间
            activityTime: "",
            // 具体负责人
            specificUserName: "",
            // 活动人数
            activityNumber: "",
            // 预计时长
            duration: "",
            // 是否彩排
            isRehearsal: "",
            // 是否录像
            isVideo: "",
            // 是否直播
            isLive: "",
            // 是否大屏
            isBigScreen: "",
            // 话筒数量
            htNumber: "",
            // 附件名称
            fjmc: "",
            applyName: "",
            //申请部门
            applyDept: "",
            // 学校分管领导
            leadershipName: "",
            //后端传校领导列表
            schoolLeaderList: [],
            // 分管领导id
            leadershipId: '',
            // 查看
            look: false,
            // limitStart: {
            //   disabledDate: time => Date.parse(time) < Date.parse(new Date()) - 24 * 60 * 60 * 1000
            // },
            limitEnd: {
                disabledDate: time => Date.parse(time) < Date.parse(this.postForm.startTime) - 24 * 60 * 60 * 1000
            },
            // 选中的车辆
            selectedCar: null,
            // 开始结束时间
            dateRange: [],
            // 角色选项
            roleOptions: [],
            // 用车列表
            queryVehicleForm: {
                pageNum: 1,
                pageSize: 10,
                licensePlate: ''
            },
            // 用车列表加载
            vehicleLoading: false,
            // 用车列表总数
            vehicleTotal: 0,
            // 进度查看
            // progress: {
            //     title: "审批查看",
            //     open: false,
            //     look:false,
            //     id: undefined,
            //     instanceId: undefined
            // },

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

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

        },


        /** 获取列表数据 */
        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(123, params);
            listAuditorqb(params).then(response => {
                this.loading = false;
                this.infoList = response.rows;
                console.log(111, response.rows);
                this.total = response.total;
            }).catch(err => {
                this.loading = false;
            })
        },
        /** 查看 */
        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.state = response.data.state;
                this.fjmc = response.data.fjmc;
                this.loading = false;
                this.look = true;
            });


        },
        // 天数
        changeData(value) {
            if (value !== null) {
                const startDate = new Date(value[0]); // 开始日期
                const endDate = new Date(value[1]); // 结束日期
                const today = new Date(); // 当前日期
                // 计算日期差（以天为单位）
                const timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
                const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
                // 如果选择的日期超过了今天，则显示日期差
                if (endDate > today) {
                    this.week = daysDiff + "天";
                } else {
                    this.week = "";
                }
                console.log("Start date: ", startDate);
                console.log("End date: ", endDate);
                console.log("Days difference: ", daysDiff);
            } else {
                this.week = "";
            }
        },
        // 搜索按钮
        handleQuery() {
            this.throttle(() => {
                this.queryForm.pageNum = 1;
                this.getList();
            })
        },

        // 重置按钮
        resetQuery() {
            const submitState = this.queryForm.submitState;
            this.queryForm = {
                submitState: submitState,
                pageNum: 1,
                pageSize: 10,
            }
            this.dateRange = [];
            this.handleQuery(); // 重新发一次请求
        },


        reset() {
            // 这里需要重置对话框表单
            this.postForm = {
                pageNum: 1,
                pageSize: 10,
                title: undefined,//标题

            };
            this.resetForm('postForm');
        },

        // 关闭按钮
        cancel() {

            this.look = false;

        },






    }
}
</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;
}
</style>
