<template>
    <!-- 数据分析 整体效能分析 -->
    <div class="app-container">
        <!-- 搜索 -->
        <el-form label-width="auto" inline :model="queryParams">
            <el-form-item label="天气类型">
                <el-input
                    clearable
                    v-model="queryParams.weather"
                    placeholder="请输入项目名称"
                />
            </el-form-item>
            <el-form-item label="日期">
                <el-date-picker
                    clearable
                    v-model="queryParams.createTime"
                    placeholder="请选择项目类型"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                    type="date"
                />
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="onHandleQuery">
                    查询
                </el-button>
                <el-button
                    size="mini"
                    type="primary"
                    @click="onHandleAddProject"
                >
                    新增
                </el-button>
                <el-button
                    size="mini"
                    type="warning"
                    icon="el-icon-warning-outline"
                    @click="onHandleRiskWarning"
                >
                    风险预警
                </el-button>
            </el-form-item>
        </el-form>

        <el-table border :data="projectList">
            <el-table-column
                align="center"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                show-overflow-tooltip
                v-for="column in tableColumns"
            />
            <el-table-column label="操作" align="center" width="240">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        style="padding: 6px 6px"
                        @click="onHandleEditProject(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        style="padding: 6px 6px"
                        @click="onHandleDeleteProject(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="total"
            @pagination="getProjectList"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
        />

        <el-dialog
            append-to-body
            width="50%"
            v-if="addAndEditDialogVisible"
            :visible.sync="addAndEditDialogVisible"
            :title="`${addAndEditDialogTitle}整体效能`"
        >
            <AddAndEditForm
                ref="addAndEditFormRef"
                :detailsId="detailsId"
                :editRow="editRow"
            />

            <div slot="footer" class="dialog-footer">
                <el-button @click="addAndEditDialogVisible = false">
                    关闭
                </el-button>
                <el-button type="primary" @click="onHandleSubmit">
                    提交
                </el-button>
            </div>
        </el-dialog>

        <!-- 风险预警弹框 -->
        <el-dialog
            append-to-body
            width="80%"
            v-if="riskWarningDialogVisible"
            :visible.sync="riskWarningDialogVisible"
            title="风险预警"
        >
            <el-form inline class="mb10">
                <el-form-item label="综合查询">
                    <el-input
                        clearable
                        style="width: 200px"
                        placeholder="请输入关键字"
                        v-model="riskWarningQueryParams.keyword"
                        @keyup.enter.native="onHandleRiskWarningQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-search"
                        @click="onHandleRiskWarningQuery"
                    >
                        查询
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-plus"
                        @click="onHandleAddRiskWarning"
                    >
                        新增
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table
                border
                :data="riskWarningList"
                v-loading="riskWarningLoading"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center"
                />
                <el-table-column
                    label="提醒类型"
                    prop="reminderType"
                    align="center"
                />
                <el-table-column
                    label="提醒时间"
                    prop="reminderTime"
                    align="center"
                />
                <el-table-column
                    label="分析提醒内容"
                    prop="reminderContent"
                    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="onHandleEditRiskWarning(scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="danger"
                            size="mini"
                            style="padding: 6px 6px"
                            @click="onHandleDeleteRiskWarning(scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                :total="riskWarningTotal"
                @pagination="onRiskWarningPageChange"
                :page.sync="riskWarningQueryParams.pageNum"
                :limit.sync="riskWarningQueryParams.pageSize"
            />
        </el-dialog>

        <!-- 风险预警新增/编辑弹框 -->
        <el-dialog
            append-to-body
            width="500px"
            v-if="riskWarningFormDialogVisible"
            :visible.sync="riskWarningFormDialogVisible"
            :title="`${riskWarningFormDialogTitle}风险预警`"
        >
            <el-form
                :model="riskWarningForm"
                :rules="riskWarningRules"
                ref="riskWarningFormRef"
                label-width="100px"
            >
                <el-form-item label="提醒类型" prop="reminderType">
                    <el-select
                        v-model="riskWarningForm.reminderType"
                        placeholder="请选择提醒类型"
                        style="width: 100%"
                    >
                        <el-option label="人员" value="人员" />
                        <el-option label="设备" value="设备" />
                    </el-select>
                </el-form-item>
                <el-form-item label="提醒时间" prop="reminderTime">
                    <el-date-picker
                        v-model="riskWarningForm.reminderTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择提醒时间"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label="分析提醒内容" prop="reminderContent">
                    <el-input
                        v-model="riskWarningForm.reminderContent"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入分析提醒内容"
                        clearable
                    />
                </el-form-item>
            </el-form>

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

<script>
import {
    getOverallEffectivenessListAPI,
    deleteOverallEffectivenessAPI,
} from '@/api/dataAnalysis/overallEffectiveness'
import {
    getRiskWarningListAPI,
    addRiskWarningAPI,
    editRiskWarningAPI,
    deleteRiskWarningAPI,
} from '@/api/dataManage/overallEffectiveness'

import AddAndEditForm from './components/addAndEditForm.vue'

export default {
    name: 'ProjectQuality',
    components: {
        AddAndEditForm,
    },
    data() {
        return {
            total: 0,
            detailsId: '',
            editRow: {},
            projectList: [],
            addAndEditDialogVisible: false,
            addAndEditDialogTitle: '',
            tableColumns: [
                {
                    label: '天气类型',
                    prop: 'weather',
                },
                {
                    label: '日期',
                    prop: 'createTime',
                },
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: '',
            },

            // 风险预警
            riskWarningDialogVisible: false,
            riskWarningLoading: false,
            riskWarningList: [],
            riskWarningTotal: 0,
            riskWarningQueryParams: {
                pageNum: 1,
                pageSize: 10,
                keyword: '',
            },
            riskWarningFormDialogVisible: false,
            riskWarningFormDialogTitle: '新增',
            riskWarningSubmitting: false,
            riskWarningEditId: null,
            riskWarningForm: {
                reminderType: '',
                reminderTime: '',
                reminderContent: '',
            },
            riskWarningRules: {
                reminderType: [
                    {
                        required: true,
                        message: '请选择提醒类型',
                        trigger: 'change',
                    },
                ],
                reminderTime: [
                    {
                        required: true,
                        message: '请选择提醒时间',
                        trigger: 'change',
                    },
                ],
                reminderContent: [
                    {
                        required: true,
                        message: '请输入分析提醒内容',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },

    created() {
        this.getProjectList()
    },

    methods: {
        onHandleQuery() {
            this.getProjectList()
        },
        onHandleAddProject() {
            this.addAndEditDialogVisible = true
            this.addAndEditDialogTitle = '新增'
        },
        // 获取工程质量列表
        async getProjectList() {
            const res = await getOverallEffectivenessListAPI(this.queryParams)
            this.projectList = res.rows
            this.total = res.total
        },

        // 编辑工程质量
        onHandleEditProject(row) {
            this.detailsId = row.id
            this.editRow = row
            this.addAndEditDialogVisible = true
            this.addAndEditDialogTitle = '编辑'
        },

        // 删除工程质量
        onHandleDeleteProject(row) {
            this.$confirm('此操作将永久删除该整体效能, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    const res = await deleteOverallEffectivenessAPI({
                        id: row.id,
                    })
                    if (res.code === 200) {
                        this.$message.success('删除成功')
                        this.getProjectList()
                    } else {
                        this.$message.error('删除失败')
                    }
                })
                .catch(() => {})
        },

        // 提交工程质量
        async onHandleSubmit() {
            const res = await this.$refs.addAndEditFormRef.submitForm()
            if (res) {
                this.$message.success('提交成功')
                this.getProjectList()
                this.addAndEditDialogVisible = false
            } else {
                this.$message.error('提交失败')
            }
        },

        // 打开风险预警弹框
        onHandleRiskWarning() {
            this.riskWarningDialogVisible = true
            this.getRiskWarningList()
        },

        // 风险预警相关方法
        // 获取风险预警列表
        async getRiskWarningList() {
            this.riskWarningLoading = true
            try {
                const res = await getRiskWarningListAPI(
                    this.riskWarningQueryParams,
                )
                this.riskWarningList = res.rows || []
                this.riskWarningTotal = res.total || 0
            } catch (error) {
                this.$message.error('获取风险预警列表失败')
            } finally {
                this.riskWarningLoading = false
            }
        },

        // 查询风险预警
        onHandleRiskWarningQuery() {
            this.riskWarningQueryParams.pageNum = 1
            this.getRiskWarningList()
        },

        // 分页变化
        onRiskWarningPageChange() {
            this.getRiskWarningList()
        },

        // 新增风险预警
        onHandleAddRiskWarning() {
            this.riskWarningFormDialogTitle = '新增'
            this.riskWarningEditId = null
            this.riskWarningForm = {
                reminderType: '',
                reminderTime: '',
                reminderContent: '',
            }
            this.riskWarningFormDialogVisible = true
        },

        // 编辑风险预警
        onHandleEditRiskWarning(row) {
            this.riskWarningFormDialogTitle = '编辑'
            this.riskWarningEditId = row.id
            this.riskWarningForm = {
                reminderType: row.reminderType || '',
                reminderTime: row.reminderTime || '',
                reminderContent: row.reminderContent || '',
            }
            this.riskWarningFormDialogVisible = true
        },

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

        // 提交风险预警
        async onHandleSubmitRiskWarning() {
            this.$refs.riskWarningFormRef.validate(async (valid) => {
                if (!valid) return
                this.riskWarningSubmitting = true
                try {
                    const params = { ...this.riskWarningForm }
                    if (this.riskWarningEditId) {
                        params.id = this.riskWarningEditId
                    }
                    const API = this.riskWarningEditId
                        ? editRiskWarningAPI
                        : addRiskWarningAPI
                    const res = await API(params)
                    if (res.code === 200) {
                        this.$message.success(
                            this.riskWarningEditId ? '编辑成功' : '新增成功',
                        )
                        this.riskWarningFormDialogVisible = false
                        this.getRiskWarningList()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                } catch (error) {
                    this.$message.error('操作失败')
                } finally {
                    this.riskWarningSubmitting = false
                }
            })
        },
    },
}
</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;
    // height: 90vh !important;
    // min-height: 90vh !important;
    // max-height: 90vh !important;
    .el-dialog__body {
        flex: 1 !important;
        overflow-y: scroll !important;
        padding: 20px 20px !important;
        box-sizing: border-box !important;
    }
}
</style>
