<template>
    <div>
        <!-- 当前进度填报列表 -->
        <el-dialog
            append-to-body
            width="80%"
            v-if="dialogVisible"
            :visible.sync="innerVisible"
            :title="`当前进度 - ${currentRow ? currentRow.proGx : ''}`"
            @close="handleClose"
        >
            <el-form
                inline
                :model="currentProgressQuery"
                label-width="80px"
                class="mb-10"
            >
                <el-form-item label="填报时间">
                    <el-date-picker
                        v-model="currentProgressQuery.beginTime"
                        type="date"
                        placeholder="开始日期"
                        value-format="yyyy-MM-dd"
                        style="width: 160px"
                    />
                    <span class="range-split">~</span>
                    <el-date-picker
                        v-model="currentProgressQuery.endTime"
                        type="date"
                        placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        style="width: 160px"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-search"
                        @click="onHandleProgressQuery"
                    >
                        查询
                    </el-button>
                    <el-button
                        size="mini"
                        type="warning"
                        plain
                        icon="el-icon-refresh"
                        @click="onHandleProgressReset"
                    >
                        重置
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-plus"
                        @click="onHandleAddProgress"
                    >
                        新增
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table
                border
                :data="currentProgressList"
                v-loading="currentProgressLoading"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center"
                />
                <el-table-column
                    label="填报时间"
                    prop="fillingTime"
                    align="center"
                />
                <el-table-column
                    label="计划进度"
                    prop="planAccess"
                    align="center"
                />
                <el-table-column
                    label="当前进度"
                    prop="currentAccess"
                    align="center"
                />
                <el-table-column
                    label="偏差分析"
                    prop="deviationAnalyze"
                    align="center"
                />
            </el-table>

            <pagination
                :total="currentProgressTotal"
                :page.sync="currentProgressQuery.pageNum"
                :limit.sync="currentProgressQuery.pageSize"
                @pagination="onProgressPageChange"
            />
        </el-dialog>

        <!-- 新增填报弹窗 -->
        <el-dialog
            append-to-body
            width="420px"
            v-if="addProgressDialogVisible"
            :visible.sync="addProgressDialogVisible"
            title="进度填报"
        >
            <el-form
                :model="addProgressForm"
                :rules="addProgressRules"
                ref="addProgressFormRef"
                label-width="90px"
            >
                <el-form-item label="填报日期" prop="fillingTime">
                    <el-date-picker
                        v-model="addProgressForm.fillingTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择填报日期"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="计划进度" prop="planAccess">
                    <el-input
                        v-model="addProgressForm.planAccess"
                        clearable
                        placeholder="请输入计划进度"
                    />
                </el-form-item>
                <el-form-item label="填报进度" prop="currentAccess">
                    <el-input
                        v-model="addProgressForm.currentAccess"
                        clearable
                        placeholder="请输入填报进度"
                    />
                </el-form-item>
                <el-form-item label="偏差分析" prop="deviationAnalyze">
                    <el-input
                        v-model="addProgressForm.deviationAnalyze"
                        type="textarea"
                        :rows="3"
                        clearable
                        placeholder="请输入偏差分析"
                    />
                </el-form-item>
            </el-form>

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

<script>
import {
    getProgressProcessProgressList,
    createProcessPlan,
} from '@/api/basic/progress'

export default {
    name: 'CurrentProgress',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        currentRow: {
            type: Object,
            default: () => null,
        },
    },
    data() {
        return {
            innerVisible: false,

            currentProgressLoading: false,
            currentProgressTotal: 0,
            currentProgressList: [],
            currentProgressQuery: {
                pageNum: 1,
                pageSize: 10,
                beginTime: '',
                endTime: '',
            },

            addProgressDialogVisible: false,
            addProgressSubmitting: false,
            addProgressForm: {
                fillingTime: '',
                planAccess: '',
                currentAccess: '',
                deviationAnalyze: '',
            },
            addProgressRules: {
                fillingTime: [
                    {
                        required: true,
                        message: '请选择填报日期',
                        trigger: 'blur',
                    },
                ],
                planAccess: [
                    {
                        required: true,
                        message: '请输入计划进度',
                        trigger: 'blur',
                    },
                ],
                currentAccess: [
                    {
                        required: true,
                        message: '请输入填报进度',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    watch: {
        visible: {
            immediate: true,
            handler(val) {
                this.innerVisible = val
                if (val && this.currentRow) {
                    this.currentProgressQuery.pageNum = 1
                    this.loadCurrentProgressList()
                }
            },
        },
    },
    methods: {
        handleClose() {
            this.$emit('update:visible', false)
        },

        async loadCurrentProgressList() {
            if (!this.currentRow) return
            this.currentProgressLoading = true
            const params = {
                pageNum: this.currentProgressQuery.pageNum,
                pageSize: this.currentProgressQuery.pageSize,
                beginTime: this.currentProgressQuery.beginTime,
                endTime: this.currentProgressQuery.endTime,
                progressId: this.currentRow.id,
            }
            const res = await getProgressProcessProgressList(params)
            this.currentProgressLoading = false
            this.currentProgressList = res?.rows || res?.data || []
            this.currentProgressTotal =
                res?.total || this.currentProgressList.length
        },

        onHandleProgressQuery() {
            this.currentProgressQuery.pageNum = 1
            this.loadCurrentProgressList()
        },
        onHandleProgressReset() {
            this.currentProgressQuery.beginTime = ''
            this.currentProgressQuery.endTime = ''
            this.currentProgressQuery.pageNum = 1
            this.loadCurrentProgressList()
        },

        onHandleAddProgress() {
            this.addProgressDialogVisible = true
            this.addProgressForm = {
                fillingTime: '',
                planAccess: '',
                currentAccess: '',
                deviationAnalyze: '',
            }
        },

        onProgressPageChange({ page, limit }) {
            this.currentProgressQuery.pageNum = page
            this.currentProgressQuery.pageSize = limit
            this.loadCurrentProgressList()
        },

        async onHandleSubmitProgress() {
            this.$refs.addProgressFormRef.validate(async (valid) => {
                if (!valid || !this.currentRow) return
                this.addProgressSubmitting = true
                const payload = {
                    ...this.addProgressForm,
                    progressId: this.currentRow.id,
                }
                const res = await createProcessPlan(payload)
                this.addProgressSubmitting = false
                if (res.code === 200) {
                    this.$message.success('新增填报成功')
                    this.addProgressDialogVisible = false
                    this.loadCurrentProgressList()
                } else {
                    this.$message.error(res.msg || '新增失败')
                }
            })
        },
    },
}
</script>

<style scoped>
.range-split {
    margin: 0 8px;
}
</style>
