<template>
    <div style="padding: 5px;">
        <el-row :gutter="10">
            <el-col :span="6">
                <el-table stripe="true" @row-click="handleRowClick" :data="leftList" v-loading="loading" ref="table"
                    border highlight-current-row>
                    <el-table-column prop="lineName" label="产线名称" align="center" :show-overflow-tooltip="true" />
                    <el-table-column prop="alarmCode" label="报警记录编码" align="center" :show-overflow-tooltip="true" />
                    <el-table-column prop="alarmInfo" label="报警信息" align="center" :show-overflow-tooltip="true" />
                </el-table>
                <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getLeftList" />
            </el-col>
            <el-col :span="18">
                <div style="width: 100%; height: 50px;">
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </div>
                <div style="width: 100%; height: 80vh; ">
                    <el-row :gutter="10">
                        <el-col :span="15">
                            <el-form ref="form" :model="form" label-width="100" label-position="left">
                                <el-row>
                                    <el-col :lg="12">
                                        <el-form-item label="报警记录编码">
                                            <el-input disabled v-model="form.alarmCode" placeholder="请输入报警记录编码" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="产线">
                                            <el-input disabled v-model="form.lineCode" placeholder="请输入产线" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="产线名称">
                                            <el-input disabled v-model="form.lineName" placeholder="请输入产线名称" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="报警类型">
                                            <el-input disabled v-model="form.alarmType" placeholder="请输入报警类型" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="报警级别">
                                            <el-input disabled v-model="form.alarmLevel" placeholder="请输入报警级别" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="报警信息">
                                            <el-input disabled v-model="form.alarmInfo" placeholder="请输入报警信息" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="接收方">
                                            <el-input disabled v-model="form.receiver" placeholder="请输入接收方" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="接收方名称">
                                            <el-input disabled v-model="form.receiverName" placeholder="请输入接收方名称" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="处理结果">
                                            <el-input v-model="form.handleResult" placeholder="请输入处理结果" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :lg="12">
                                        <el-form-item label="备注">
                                            <el-input v-model="form.remark" placeholder="请输入备注" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <el-button type="primary" @click="handleUpdate">响应</el-button>
                            <el-button type="success" @click="handleDelete">处理完毕</el-button>
                            <el-button type="warning" @click="handleCancel">报告上级</el-button>
                        </el-col>
                        <el-col :span="8">4</el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { listAndonAlarmRecord, listAndonAlarmRecordTime } from "@/api/andonManagement/humanComputerInteraction/index.js"
export default {
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 15,
            },
            leftList: [],
            total: 0,
            loading: false,
            form: {},
        }
    },
    created() {
        this.getLeftList()
    },
    mounted() {

    },
    methods: {
        getLeftList() {
            this.loading = true;
            listAndonAlarmRecord(this.queryParams).then(res => {
                if (res.code == 200) {
                    this.loading = false;
                    this.leftList = res.data.result;
                    this.total = res.data.totalNum;
                }
            })
        },
        handleRowClick(row, column, event) {
            this.form = {
                ...row
            }
        }
    }
}
</script>

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA;
    border-color: #dfe4ed;
    color: #606266;
    cursor: not-allowed;
}
</style>