<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="设备名称" prop="equipmentName">
                <el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="分类编码" prop="classificationCode">
                <el-input v-model="queryParams.classificationCode" placeholder="请输入分类编码" clearable></el-input>
            </el-form-item>
            <el-form-item label="修理结果" prop="repairState">
                <el-select v-model="queryParams.repairState" placeholder="修理结果" clearable>
                    <el-option v-for="(item, index) in dict.type.dispose_state" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="处理状态" prop="disposeState">
                <el-select v-model="queryParams.disposeState" placeholder="维修状态" clearable>
                    <el-option v-for="(item, index) in dict.type.repair_state" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增
                </el-button>
            </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-table :data="applyTable" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" />
            <el-table-column align="center" prop="encode" label="自编码" width="150px" />
            <el-table-column align="center" prop="equipmentName" label="设备名称" />
            <el-table-column align="center" prop="model" label="型号" />
            <el-table-column align="center" prop="classificationCode" label="分类编码" />
            <el-table-column align="center" prop="dateOfProduction" label="投产日期" />
            <el-table-column align="center" prop="place" label="地点" />
            <el-table-column align="center" prop="problem" label="问题" />
            <el-table-column align="center" prop="repairName" label="修理人" />
            <el-table-column align="center" prop="repairTime" label="修理时间" />
            <el-table-column align="center" prop="repairState" label="修理结果">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.dispose_state, row.repairState) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="disposeState" label="处理状态">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.repair_state, row.disposeState) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="evaluate" label="评价" width="150px">
                <template slot-scope="scope">
                    <el-rate v-model="scope.row.evaluate" :max="5" :disabled="!scope.row.editable"></el-rate>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px" class-name="small-padding fixed-width">
                <template slot-scope="{ row }">
                    <div>
                        <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(row)">
                            查看
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">
                            修改
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增/修改/查看对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body @close="cancel">
            <el-form ref="postForm" :model="postForm" :rules="rules" label-width="110px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="自编码" prop="encode">
                            <el-input v-model="postForm.encode" placeholder="自编码" @change="getRencode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报修人" prop="reportRepairId">
                            <el-select v-model="postForm.reportRepairId" filterable placeholder="请选择报修人" clearable
                                style="width: 100%;">
                                <el-option v-for="(item, index) in userList" :key="index" :label="item.userName"
                                    :value="item.userId">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="设备名称" prop="equipmentName">
                            <el-input v-model="postForm.equipmentName" placeholder="设备名称"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="问题" prop="problem">
                            <el-input v-model="postForm.problem" placeholder="问题"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="型号" prop="model">
                            <el-input v-model="postForm.model" placeholder="型号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="维修人" prop="repairName">
                            <el-select v-model="postForm.repairName" placeholder="请选择维修人" clearable style="width: 100%;">
                                <el-option v-for="item in sbflOptions" :key="item.repairId" :label="item.repairName"
                                    :value="item.repairId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="投产日期:" prop="dateOfProduction">
                            <el-date-picker v-model="postForm.dateOfProduction" type="date" placeholder="选择日期"
                                style="width: 100%;" value-format="yyyy-MM-dd" clearable
                                :readonly="isReadOnly"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="维修时间:" prop="repairTime">
                            <el-date-picker v-model="postForm.repairTime" type="datetime" placeholder="选择日期"
                                style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="地点" prop="place">
                            <el-input v-model="postForm.place" placeholder="地点" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="处理状态" prop="disposeState">
                            <el-select v-model="postForm.disposeState" placeholder="处理状态" clearable style="width: 100%;">
                                <el-option v-for="(item, index) in dict.type.repair_state" :key="index" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="报修时间:" prop="reportRepairTime">
                            <el-date-picker v-model="postForm.reportRepairTime" type="datetime" placeholder="选择日期"
                                style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="评价" prop="evaluate">
                            <el-rate v-model="postForm.evaluate" :max="5"></el-rate>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="postForm.remark" placeholder="请输入内容" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div style="text-align: center">
                <el-button type="primary" v-show="isEditable" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">{{ isEditable ? '取 消' : '退 出' }}</el-button>
            </div>

        </el-dialog>

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


    </div>
</template>

<script>
import {
    getRepair,
    queryRepair,
    addRepair,
    editRepair,
    deleteRepair,
    getRepairencode,//根据自编码获取设备信息
    getRepairname
} from '@/api/smartSchool/schoolProperty/repairApplicant.js'
import { getUserList } from "../../../../api/smartSchool/schoolProperty/equipmenTledger";
export default {
    name: 'repairApplicant',
    dicts: ['dispose_state', 'repair_state'],
    data() {
        return {
            isReadOnly: false,
            sbflOptions: [],
            repairStatusOptions: {
            },
            maintainState: '',
            queryParams: {
                equipmentName: "",
                classificationCode: "",
                repairState: "",
                disposeState: "",
                pageNum: 1,
                pageSize: 10,
            },
            // 表格数据
            applyTable: [],
            // 查询表单
            queryForm: {

                pageNum: 1,
                pageSize: 10,


            },


            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 是否只读
            readonly: false,
            // 多个禁用
            multi: false,
            // 显示搜索条件
            showSearch: true,
            // 信息列表
            infoList: [],
            // 数据总数
            total: 0,

            userList: [],
            // 新增/修改表单
            postForm: {
                equipmentId: null,
                classificationCode: "",
                reportRepairId: "",
                reportRepair: "",
                problem: "",
                repairId: "",
                repairName: "",
                repairPhone: "",
                repairTime: "",
                repairState: "",
                disposeState: "",
                evaluate: null,
                remark: "",
                equipmentName: null,
                model: null,
                place: null,
                dateOfProduction: null





            },
            // 是否显示新增弹出层
            open: false,
            isEditable: true,
            // 查看对话框
            openLook: false,
            // // 表单校验
            rules: {
                encode: [
                    { required: true, message: "自编码不能为空", trigger: "blur" }
                ],
                reportRepairId: [
                    { required: true, message: "报修人不能为空", trigger: "blur" }
                ]
            },
            // 弹出层标题
            title: '',
            form: {
                id: "",
                maintainResult: "",
                evaluate: 0,
            }

        }
    },

    created() {
        this.postForm.evaluate = 5;
        this.getList();
        this.getRepairname();
        this.getSelectUser();

    },
    methods: {
        /** 获取列表数据 */
        getList() {
            getRepair(this.queryParams).then(response => {
                this.loading = false;
                this.applyTable = response.rows;
                console.log('this.applyTable', this.applyTable);
                this.total = response.total;
            }).catch(err => {
                this.loading = false;
            })
        },

        /** 查看 */
        handleLook(row) {
            this.form = row;
            const id = row.id || this.ids;
            queryRepair(id).then(response => {
                this.postForm = response.data;
                this.open = true;
                this.isEditable = false
            }).catch(err => {

            })
            this.title = "查看";
        },
        //获取报修人数据
        getSelectUser() {
            getUserList().then(res => {
                if (res.code == 200) {
                    this.userList = res.rows
                }
            })
        },
        // 重置按钮
        resetQuery() {
            this.queryParams = {
                id: "",
                repairsTime: null,
                pageNum: 1,
                pageSize: 10,
            }

            this.getList(); // 重新发一次请求
        },
        // 新增按钮操作
        handleAdd() {
            this.isShow = true;
            this.isDisabled = false;
            this.open = true;
            this.title = "添加申请";
            this.reset();
        },

        // 根据自编码获取设备信息
        getRencode() {
            const code = this.postForm.encode
            getRepairencode(code).then(res => {
                if (res.code == 200) {
                    this.postForm.equipmentId = res.data.equipmentId
                    this.postForm.model = res.data.model
                    this.postForm.equipmentName = res.data.equipmentName
                    this.postForm.dateOfProduction = res.data.dateOfProduction
                }
            })
        },

        //获取修理人下拉框
        getRepairname() {
            getRepairname().then(((res) => {
                if (res.code == 200) {
                    this.sbflOptions = res.data;
                    console.log('this.sbflOptions', this.sbflOptions);
                }

            })).catch(err => {

            })
        },

        // 修改按钮操作
        handleUpdate(row) {
            const id = row.id || this.ids;
            this.title = "修改申请";
            queryRepair(id).then(response => {
                this.postForm = response.data;
                this.open = true;
                this.isEditable = true;
            }).catch(err => {

            })
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除"' + ids + '"的数据项？').then(function () {
                return deleteRepair(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },

        // 提交表单
        submitForm() {
            const reportRepairId = this.postForm.reportRepairId;
            this.postForm.reportRepair = reportRepairId == '' ? '' : this.userList.find(item => item.userId == reportRepairId).userName;
            this.$refs["postForm"].validate(valid => {
                if (valid) {
                    this.$modal.loading('正在上传数据，请稍等...');
                    if (this.postForm.disposeState === "1" || this.postForm.disposeState === "0") {
                        this.postForm.repairState = "1";
                    } else if (this.postForm.disposeState === null) {
                        this.postForm.repairState = "0";
                    } else {
                        this.postForm.repairState = "0"; // 当 disposeState 不满足上述条件时，默认设置为 0
                    }


                    if (this.postForm.id != null) {
                        editRepair(this.postForm).then(response => {
                            console.log('this.postForm',);
                            this.$modal.closeLoading();
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        }).catch(err => {
                            this.$modal.closeLoading();
                        });

                    } else {
                        if (this.postForm.disposeState === "1" || this.postForm.disposeState === "0") {
                            this.postForm.repairState = "1";
                        } else if (this.postForm.disposeState === null) {
                            this.postForm.repairState = "0";
                        } else {
                            this.postForm.repairState = "0"; // 当 disposeState 不满足上述条件时，默认设置为 0
                        }
                        addRepair(this.postForm).then(response => {
                            console.log(this.postForm);
                            this.$modal.closeLoading();
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        }).catch(err => {
                            this.$modal.closeLoading();
                        });
                    }
                }
            }
            );


        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        reset() {
            // 这里需要重置对话框表单
            this.postForm = {
                equipmentId: null,
                classificationCode: "",
                reportRepairId: "",
                reportRepair: "",
                problem: "",
                repairId: "",
                repairName: "",
                repairPhone: "",
                repairTime: "",
                repairState: "",
                disposeState: "",
                evaluate: null,
                remark: "",
                equipmentName: null,
                model: null,
                place: null,
                dateOfProduction: null
            };
        },





    }
}
</script>

<style>
.hidden-item {
    display: none;
}
</style>
