<template>
    <!-- 工人效率分析 -->
    <div class="app-container">
        <el-radio-group v-model="activeTab" style="margin-bottom: 20px">
            <el-radio-button label="作业任务管理"></el-radio-button>
            <el-radio-button label="分析提醒"></el-radio-button>
        </el-radio-group>

        <!-- 作业任务管理 -->
        <template v-if="activeTab === '作业任务管理'">
            <el-form label-width="auto" inline :model="taskQueryParams">
                <el-form-item label="姓名">
                    <el-input
                        v-model="taskQueryParams.userName"
                        placeholder="请输入姓名"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="延期">
                    <el-select
                        clearable
                        placeholder="请选择"
                        v-model="taskQueryParams.isYq"
                    >
                        <el-option label="未延期" :value="0" />
                        <el-option label="延期" :value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-search"
                        @click="onHandleTaskQuery"
                    >
                        查询
                    </el-button>
                    <el-button
                        size="mini"
                        type="warning"
                        plain
                        icon="el-icon-refresh"
                        @click="onHandleTaskReset"
                    >
                        重置
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-plus"
                        @click="onHandleAddTask"
                    >
                        新增
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table border :data="taskList" v-loading="taskLoading">
                <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center"
                />
                <el-table-column
                    label="工程名称"
                    prop="proName"
                    align="center"
                />
                <el-table-column label="姓名" prop="userName" align="center" />
                <el-table-column
                    label="所属班组"
                    prop="teamName"
                    align="center"
                />
                <el-table-column
                    label="工作内容"
                    prop="workContent"
                    align="center"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="任务状态"
                    prop="taskStatus"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ getTaskStatusText(scope.row.taskStatus) }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="计划开始时间"
                    prop="planStartTime"
                    align="center"
                />
                <el-table-column
                    label="计划完成时间"
                    prop="planEndTime"
                    align="center"
                />
                <el-table-column
                    label="实际完成时间"
                    prop="endTime"
                    align="center"
                />
                <el-table-column label="是否延期" prop="isYq" align="center">
                    <template slot-scope="scope">
                        {{
                            scope.row.isYq === 1 || scope.row.isYq === '1'
                                ? '延期'
                                : '未延期'
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="延期天数" prop="yaDay" align="center" />
                <el-table-column label="操作" align="center" width="140">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            style="padding: 6px 6px"
                            @click="onHandleEditTask(scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="danger"
                            size="mini"
                            style="padding: 6px 6px"
                            @click="onHandleDeleteTask(scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                :total="taskTotal"
                :page.sync="taskQueryParams.pageNum"
                :limit.sync="taskQueryParams.pageSize"
                @pagination="onTaskPageChange"
            />
        </template>

        <!-- 分析提醒 -->
        <template v-if="activeTab === '分析提醒'">
            <el-form inline class="mb10" key="task">
                <el-form-item label="综合查询">
                    <el-input
                        v-model="reminderQueryParams.keyword"
                        placeholder="请输入关键字"
                        clearable
                        style="width: 200px"
                        @keyup.enter.native="onHandleReminderQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-search"
                        @click="onHandleReminderQuery"
                    >
                        查询
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-plus"
                        @click="onHandleAddReminder"
                    >
                        新增
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table
                border
                :data="reminderList"
                v-loading="reminderLoading"
                key="task"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center"
                />
                <el-table-column
                    label="工程名称"
                    prop="proName"
                    align="center"
                />
                <el-table-column
                    label="提醒类型"
                    prop="txType"
                    align="center"
                />
                <el-table-column
                    label="提醒时间"
                    prop="txTime"
                    align="center"
                />
                <el-table-column
                    label="分析提醒内容"
                    prop="content"
                    align="center"
                    show-overflow-tooltip
                />
                <el-table-column label="操作" align="center" width="140">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            style="padding: 6px 6px"
                            @click="onHandleEditReminder(scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="danger"
                            size="mini"
                            style="padding: 6px 6px"
                            @click="onHandleDeleteReminder(scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                key="task"
                :total="reminderTotal"
                :page.sync="reminderQueryParams.pageNum"
                :limit.sync="reminderQueryParams.pageSize"
                @pagination="onReminderPageChange"
            />
        </template>

        <!-- 作业任务新增/编辑弹框 -->
        <el-dialog
            append-to-body
            width="45%"
            v-if="taskDialogVisible"
            :visible.sync="taskDialogVisible"
            :title="`${taskDialogTitle}作业任务`"
        >
            <el-form
                :model="taskForm"
                :rules="taskRules"
                ref="taskFormRef"
                label-width="120px"
            >
                <el-form-item label="工程名称" prop="bidCode">
                    <el-select
                        v-model="taskForm.bidCode"
                        placeholder="请选择工程名称"
                        style="width: 100%"
                        @change="handleProChange"
                    >
                        <el-option
                            v-for="item in projectList"
                            :key="item.bidCode"
                            :label="item.proName"
                            :value="item.bidCode"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名" prop="userName">
                    <el-input
                        v-model.trim="taskForm.userName"
                        placeholder="请输入姓名"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="所属班组" prop="teamId">
                    <el-select
                        v-model="taskForm.teamId"
                        placeholder="请选择所属班组"
                        style="width: 100%"
                        @change="handleTeamChange"
                    >
                        <el-option
                            v-for="item in teamList"
                            :key="item.teamId"
                            :label="item.teamName"
                            :value="item.teamId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="工作内容" prop="workContent">
                    <el-input
                        v-model.trim="taskForm.workContent"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入工作内容"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="任务状态" prop="taskStatus">
                    <el-select
                        v-model="taskForm.taskStatus"
                        placeholder="请选择任务状态"
                        style="width: 100%"
                    >
                        <el-option label="未开始" value="3" />
                        <el-option label="进行中" value="2" />
                        <el-option label="已完成" value="1" />
                        <el-option label="延期" value="4" />
                    </el-select>
                </el-form-item>
                <el-form-item label="计划开始时间" prop="planStartTime">
                    <el-date-picker
                        v-model="taskForm.planStartTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择计划开始时间"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="计划完成时间" prop="planEndTime">
                    <el-date-picker
                        v-model="taskForm.planEndTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择计划完成时间"
                        style="width: 100%"
                        @change="calculateDelayInfo"
                    />
                </el-form-item>
                <el-form-item label="实际完成时间" prop="endTime">
                    <el-date-picker
                        v-model="taskForm.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择实际完成时间"
                        style="width: 100%"
                        @change="calculateDelayInfo"
                    />
                </el-form-item>
                <el-form-item label="是否延期">
                    <el-input
                        :value="taskForm.isYq === 1 ? '延期' : '未延期'"
                        disabled
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="延期天数">
                    <el-input
                        :value="taskForm.yaDay || 0"
                        disabled
                        style="width: 100%"
                    />
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="taskDialogVisible = false"> 取消 </el-button>
                <el-button
                    type="primary"
                    :loading="taskSubmitting"
                    @click="onHandleSubmitTask"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>

        <!-- 分析提醒新增/编辑弹框 -->
        <el-dialog
            append-to-body
            width="50%"
            v-if="reminderDialogVisible"
            :visible.sync="reminderDialogVisible"
            :title="`${reminderDialogTitle}分析提醒`"
        >
            <el-form
                :model="reminderForm"
                :rules="reminderRules"
                ref="reminderFormRef"
                label-width="auto"
            >
                <el-form-item label="工程名称" prop="bidCode">
                    <el-select
                        v-model="reminderForm.bidCode"
                        placeholder="请选择工程名称"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in projectList"
                            :key="item.bidCode"
                            :label="item.proName"
                            :value="item.bidCode"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="提醒类型" prop="txType">
                    <el-input
                        v-model.trim="reminderForm.txType"
                        placeholder="请输入提醒类型"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="提醒时间" prop="txTime">
                    <el-date-picker
                        v-model="reminderForm.txTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择提醒时间"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="分析提醒内容" prop="content">
                    <el-input
                        v-model="reminderForm.content"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入分析提醒内容"
                        clearable
                    />
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="reminderDialogVisible = false">
                    取消
                </el-button>
                <el-button
                    type="primary"
                    :loading="reminderSubmitting"
                    @click="onHandleSubmitReminder"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getWorkerTaskListAPI,
    addWorkerTaskAPI,
    editWorkerTaskAPI,
    deleteWorkerTaskAPI,
    getAnalysisReminderListAPI,
    addAnalysisReminderAPI,
    editAnalysisReminderAPI,
    deleteAnalysisReminderAPI,
} from '@/api/dataManage/workerEfficiency'
import {
    getProjectSelectListAPI,
    getTeamSelectListAPI,
} from '@/api/dataManage/common'

export default {
    name: 'WorkerEfficiency',
    data() {
        return {
            activeTab: '作业任务管理',
            // 作业任务管理
            taskLoading: false,
            taskList: [],
            taskTotal: 0,
            taskQueryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: '',
                isYq: null,
            },
            taskDialogVisible: false,
            taskDialogTitle: '新增',
            taskSubmitting: false,
            taskEditId: null,
            projectList: [],
            teamList: [],
            taskForm: {
                bidCode: '',
                userName: '',
                teamName: '',
                teamId: '',
                workContent: '',
                taskStatus: '',
                planStartTime: '',
                planEndTime: '',
                endTime: '',
                isYq: 0, // 是否延期 0-未延期 1-延期
                yaDay: 0, // 延期天数
            },
            taskRules: {
                bidCode: [
                    {
                        required: true,
                        message: '请选择工程名称',
                        trigger: 'change',
                    },
                ],
                userName: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur',
                    },
                ],
                teamId: [
                    {
                        required: true,
                        message: '请选择所属班组',
                        trigger: 'change',
                    },
                ],
                workContent: [
                    {
                        required: true,
                        message: '请输入工作内容',
                        trigger: 'blur',
                    },
                ],
                taskStatus: [
                    {
                        required: true,
                        message: '请选择任务状态',
                        trigger: 'change',
                    },
                ],
                planStartTime: [
                    {
                        required: true,
                        message: '请选择计划开始时间',
                        trigger: 'change',
                    },
                ],
                planEndTime: [
                    {
                        required: true,
                        message: '请选择计划完成时间',
                        trigger: 'change',
                    },
                ],
            },

            // 分析提醒
            reminderLoading: false,
            reminderList: [],
            reminderTotal: 0,
            reminderQueryParams: {
                pageNum: 1,
                pageSize: 10,
                keyword: '',
            },
            reminderDialogVisible: false,
            reminderDialogTitle: '新增',
            reminderSubmitting: false,
            reminderEditId: null,
            reminderForm: {
                bidCode: '',
                txType: '',
                txTime: '',
                content: '',
            },
            reminderRules: {
                bidCode: [
                    {
                        required: true,
                        message: '请选择工程名称',
                        trigger: 'change',
                    },
                ],
                txType: [
                    {
                        required: true,
                        message: '请选择提醒类型',
                        trigger: 'change',
                    },
                ],
                txTime: [
                    {
                        required: true,
                        message: '请选择提醒时间',
                        trigger: 'change',
                    },
                ],
                content: [
                    {
                        required: true,
                        message: '请输入分析提醒内容',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    created() {
        this.getWorkerTaskList()
        this.getProjectSelectList()
        this.getTeamSelectList()
    },
    watch: {
        activeTab(newVal) {
            if (newVal === '分析提醒') {
                this.getAnalysisReminderList()
            }
        },
    },
    methods: {
        // 作业任务管理相关方法
        // 获取作业任务列表
        async getWorkerTaskList() {
            this.taskLoading = true
            try {
                const res = await getWorkerTaskListAPI(this.taskQueryParams)
                this.taskList = res.rows || []
                this.taskTotal = res.total || 0
            } catch (error) {
                this.$message.error('获取作业任务列表失败')
            } finally {
                this.taskLoading = false
            }
        },

        // 查询作业任务
        onHandleTaskQuery() {
            this.taskQueryParams.pageNum = 1
            this.getWorkerTaskList()
        },

        // 重置作业任务
        onHandleTaskReset() {
            this.taskQueryParams = {
                pageNum: 1,
                pageSize: 10,
                userName: '',
                isYq: null,
            }
            this.getWorkerTaskList()
        },

        // 分页变化
        onTaskPageChange() {
            this.getWorkerTaskList()
        },

        // 新增作业任务
        onHandleAddTask() {
            this.taskDialogTitle = '新增'
            this.taskEditId = null
            this.taskForm = {
                bidCode: '',
                userName: '',
                teamId: '',
                teamName: '',
                workContent: '',
                taskStatus: '',
                planStartTime: '',
                planEndTime: '',
                endTime: '',
                isYq: 0,
                yaDay: 0,
            }
            this.$nextTick(() => {
                if (this.$refs.taskFormRef) {
                    this.$refs.taskFormRef.clearValidate()
                }
            })
            this.taskDialogVisible = true
        },

        // 编辑作业任务
        onHandleEditTask(row) {
            this.taskDialogTitle = '编辑'
            this.taskEditId = row.id
            // 处理isYq字段：确保是数字类型 0或1
            let isYq = 0
            if (
                row.isYq !== null &&
                row.isYq !== undefined &&
                row.isYq !== ''
            ) {
                isYq = row.isYq === 1 || row.isYq === '1' ? 1 : 0
            }
            // 处理taskStatus字段：确保是字符串类型
            let taskStatus = ''
            if (
                row.taskStatus !== null &&
                row.taskStatus !== undefined &&
                row.taskStatus !== ''
            ) {
                taskStatus = String(row.taskStatus)
            }
            this.taskForm = {
                bidCode: row.bidCode || '',
                userName: row.userName || '',
                teamId: row.teamId || '',
                teamName: row.teamName || '',
                workContent: row.workContent || '',
                taskStatus: taskStatus,
                planStartTime: row.planStartTime || '',
                planEndTime: row.planEndTime || '',
                endTime: row.endTime || '',
                isYq: isYq, // 是否延期 0-未延期 1-延期
                yaDay: row.yaDay || 0, // 延期天数
            }
            // 如果编辑时需要加载班组列表，确保已加载
            if (this.teamList.length === 0) {
                this.getTeamSelectList()
            }
            this.$nextTick(() => {
                if (this.$refs.taskFormRef) {
                    this.$refs.taskFormRef.clearValidate()
                }
                // 如果后端没有返回延期信息，则根据时间计算
                if (
                    (!row.isYq && row.isYq !== 0) ||
                    (!row.yaDay && row.yaDay !== 0)
                ) {
                    this.calculateDelayInfo()
                }
            })
            this.taskDialogVisible = true
        },

        // 删除作业任务
        onHandleDeleteTask(row) {
            this.$confirm('此操作将永久删除该作业任务, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    try {
                        const res = await deleteWorkerTaskAPI({ id: row.id })
                        if (res.code === 200) {
                            this.$message.success('删除成功')
                            this.getWorkerTaskList()
                        } else {
                            this.$message.error(res.msg || '删除失败')
                        }
                    } catch (error) {
                        this.$message.error('删除失败')
                    }
                })
                .catch(() => {})
        },

        // 计算是否延期和延期天数
        calculateDelayInfo() {
            const { planEndTime, endTime } = this.taskForm

            if (!planEndTime) {
                this.taskForm.isYq = 0
                this.taskForm.yaDay = 0
                return
            }

            const planEndDate = new Date(planEndTime)
            planEndDate.setHours(0, 0, 0, 0)

            let compareDate
            // 如果有实际完成时间，使用实际完成时间
            if (endTime) {
                compareDate = new Date(endTime)
            } else {
                // 如果没有实际完成时间，使用当前日期
                compareDate = new Date()
            }
            compareDate.setHours(0, 0, 0, 0)

            // 计算天数差
            const diffTime = compareDate - planEndDate
            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

            // 判断是否延期：0-未延期，1-延期
            if (diffDays > 0) {
                this.taskForm.isYq = 1
                this.taskForm.yaDay = diffDays
            } else {
                this.taskForm.isYq = 0
                this.taskForm.yaDay = 0
            }
        },

        // 提交作业任务
        async onHandleSubmitTask() {
            this.$refs.taskFormRef.validate(async (valid) => {
                if (!valid) return

                // 提交前计算是否延期和延期天数
                this.calculateDelayInfo()

                this.taskSubmitting = true
                try {
                    const params = { ...this.taskForm }
                    // 确保isYq是数字类型
                    params.isYq = Number(params.isYq) || 0
                    // 确保yaDay是数字类型
                    params.yaDay = Number(params.yaDay) || 0
                    // 确保taskStatus是字符串类型
                    if (
                        params.taskStatus !== null &&
                        params.taskStatus !== undefined
                    ) {
                        params.taskStatus = String(params.taskStatus)
                    }
                    if (this.taskEditId) {
                        params.id = this.taskEditId
                    }
                    const API = this.taskEditId
                        ? editWorkerTaskAPI
                        : addWorkerTaskAPI
                    const res = await API(params)
                    if (res.code === 200) {
                        this.$message.success(
                            this.taskEditId ? '编辑成功' : '新增成功',
                        )
                        this.taskDialogVisible = false
                        this.getWorkerTaskList()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                } catch (error) {
                    this.$message.error('操作失败')
                } finally {
                    this.taskSubmitting = false
                }
            })
        },

        // 分析提醒相关方法
        // 获取分析提醒列表
        async getAnalysisReminderList() {
            this.reminderLoading = true
            try {
                const res = await getAnalysisReminderListAPI(
                    this.reminderQueryParams,
                )
                this.reminderList = res.rows || []
                this.reminderTotal = res.total || 0
            } catch (error) {
                this.$message.error('获取分析提醒列表失败')
            } finally {
                this.reminderLoading = false
            }
        },

        // 查询分析提醒
        onHandleReminderQuery() {
            this.reminderQueryParams.pageNum = 1
            this.getAnalysisReminderList()
        },

        // 分页变化
        onReminderPageChange() {
            this.getAnalysisReminderList()
        },

        // 新增分析提醒
        onHandleAddReminder() {
            this.reminderDialogTitle = '新增'
            this.reminderEditId = null
            this.reminderForm = {
                txType: '',
                txTime: '',
                content: '',
            }
            this.reminderDialogVisible = true
        },

        // 编辑分析提醒
        onHandleEditReminder(row) {
            this.reminderDialogTitle = '编辑'
            this.reminderEditId = row.id
            this.reminderForm = {
                bidCode: row.bidCode || '',
                txType: row.txType || '',
                txTime: row.txTime || '',
                content: row.content || '',
            }
            this.reminderDialogVisible = true
        },

        // 删除分析提醒
        onHandleDeleteReminder(row) {
            this.$confirm('此操作将永久删除该分析提醒, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    try {
                        const res = await deleteAnalysisReminderAPI({
                            id: row.id,
                        })
                        if (res.code === 200) {
                            this.$message.success('删除成功')
                            this.getAnalysisReminderList()
                        } else {
                            this.$message.error(res.msg || '删除失败')
                        }
                    } catch (error) {
                        this.$message.error('删除失败')
                    }
                })
                .catch(() => {})
        },

        // 提交分析提醒
        async onHandleSubmitReminder() {
            this.$refs.reminderFormRef.validate(async (valid) => {
                if (!valid) return
                this.reminderSubmitting = true
                try {
                    const params = { ...this.reminderForm }
                    if (this.reminderEditId) {
                        params.id = this.reminderEditId
                    }
                    const API = this.reminderEditId
                        ? editAnalysisReminderAPI
                        : addAnalysisReminderAPI
                    const res = await API(params)
                    if (res.code === 200) {
                        this.$message.success(
                            this.reminderEditId ? '编辑成功' : '新增成功',
                        )
                        this.reminderDialogVisible = false
                        this.getAnalysisReminderList()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                } catch (error) {
                    this.$message.error('操作失败')
                } finally {
                    this.reminderSubmitting = false
                }
            })
        },

        // 获取工程下拉列表
        async getProjectSelectList() {
            const res = await getProjectSelectListAPI()
            this.projectList = res.data
        },

        // 获取班组下拉列表
        async getTeamSelectList() {
            try {
                const res = await getTeamSelectListAPI({
                    pageNum: 1,
                    pageSize: 1000,
                })

                if (res.code === 200) {
                    this.teamList = res.rows || res.data || []
                }
            } catch (error) {}
        },

        // 工程名称的change事件
        handleProChange(value) {
            // 工程改变时，可以加载对应的班组列表
            // this.getTeamSelectList()
        },

        // 班组的change事件
        handleTeamChange(value) {
            const selectedTeam = this.teamList.find(
                (item) => item.teamId == value,
            )
            if (selectedTeam) {
                this.taskForm.teamName = selectedTeam.teamName || ''
            } else {
                this.taskForm.teamName = ''
            }
        },

        // 获取任务状态文本
        getTaskStatusText(status) {
            const statusMap = {
                1: '已完成',
                2: '进行中',
                3: '未开始',
                4: '延期',
            }
            // 处理数字类型和字符串类型
            const statusStr = String(status)
            return statusMap[statusStr] || status || '-'
        },
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    .el-dialog__body {
        flex: 1 !important;
        overflow-y: scroll !important;
        padding: 20px 20px !important;
        box-sizing: border-box !important;
    }
}
</style>
