<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.dispose_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="handleOption(0)">新增</el-button>
            </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-table :data="applyTable" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" fixed="left" />
            <el-table-column align="center" prop="encode" label="自编码" width="150px" fixed="left" />
            <el-table-column align="center" prop="equipmentName" label="设备名称" fixed="left" />
            <el-table-column align="center" prop="model" label="型号" fixed="left" />
            <el-table-column align="center" prop="classificationCode" label="分类编码" fixed="left" />
            <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="修理时间" width="160px" />
            <el-table-column align="center" prop="repairState" label="修理结果">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.repair_state, row.repairState) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="disposeState" label="处理状态">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.dispose_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="操作" align="center" prop="orgname" width="180" fixed="right">
                <template slot-scope="{ row }">
                    <div>
                        <el-button type="text" size="small" @click="handleOption(2, row)">查看</el-button>
                        <el-button type="text" size="small" @click="handleOption(1, row)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增/修改/查看对话框 -->
        <el-dialog title="详细信息" :visible.sync="dialogVisible" width="1200px" append-to-body>
            <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="自编码" :disabled="nowType != 0 ? true : false"
                                @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" placeholder="请选择维修人" style="width: 100%;"
                                :disabled="nowType == 2 ? true : false" filterable>
                                <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="设备名称"
                                :disabled="nowType == 2 ? true : false"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="问题" prop="problem">
                            <el-input v-model="postForm.problem" placeholder="问题"
                                :disabled="nowType == 2 ? true : false"></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="型号"
                                :disabled="nowType == 2 ? true : false"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="维修人" prop="repairId">
                            <el-select v-model="postForm.repairId" placeholder="请选择维修人" clearable style="width: 100%;"
                                :disabled="nowType == 2 ? true : false" filterable>
                                <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"
                                :disabled="nowType == 2 ? true : false"></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
                                :disabled="nowType == 2 ? true : false"></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="地点" :disabled="nowType == 2 ? true : false" />
                        </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%;"
                                :disabled="nowType == 2 ? true : false">
                                <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>

                        <!-- 根据处理状态为1显示repairState下拉框 -->
                        <el-form-item v-if="postForm.disposeState === '1'" label="维修状态" prop="repairState">
                            <el-select v-model="postForm.repairState" 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
                                :disabled="nowType == 2 ? true : false"></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" :disabled="nowType == 2 ? true : false"></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="请输入内容"
                                :disabled="nowType == 2 ? true : false" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" v-if="nowType != 2" @click="submitForm">确 定</el-button>
            </span>

        </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: [],
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 是否只读
            readonly: false,
            // 多个禁用
            multi: false,
            // 显示搜索条件
            showSearch: true,
            // 数据总数
            total: 0,
            dialogVisible: false,
            nowType: 0, // 0新增、1编辑、2查看
            // 新增/修改表单
            postForm: {
                id: '',
                encode: '',
                equipmentId: null,
                classificationCode: "",
                reportRepairId: "",
                reportRepair: "",
                problem: "",
                repairId: "",
                repairName: "",
                repairPhone: "",
                repairTime: "",
                repairState: "",
                disposeState: "",
                evaluate: null,
                remark: "",
                equipmentName: null,
                reportRepairTime: "",
                model: null,
                place: null,
                dateOfProduction: null,
                disposeState: '', // 处理状态
                repairState: '' // 维修状态

            },
            //报修人列表
            userList: [],
            // // 表单校验
            rules: {
                encode: [
                    { required: true, message: "自编码不能为空", trigger: "blur" }
                ],
                reportRepairId: [
                    { required: true, message: "报修人不能为空", trigger: "blur" }
                ],

                repairName: [
                    { required: true, message: "修理人不能为空", trigger: "blur" }
                ],
                problem: [
                    { required: true, message: "问题不能为空", trigger: "blur" }
                ],

                repairTime: [
                    { required: true, message: "修理时间不能为空", trigger: "blur" }
                ],

            },
            // 弹出层标题
            title: '',


        }
    },
    watch: {
        'postForm.disposeState'(newVal) {
            if (newVal === 0) {
                this.postForm.repairState = ''; // 将repairState重置为空

            }
        }
    },

    created() {
        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;
            })
        },


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

            this.getList(); // 重新发一次请求
        },

        // 根据自编码获取设备信息
        async getRencode() {
            try {
                const response = await getRepairencode(this.postForm.encode);
                console.log("response", response);
                this.postForm.equipmentId = response.data.equipmentId;
                this.postForm.equipmentName = response.data.equipmentName;
                this.postForm.model = response.data.model;
                this.postForm.place = response.data.place;
                this.postForm.dateOfProduction = response.data.dateOfProduction;
            } catch (error) {

            }
        },

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

            })).catch(err => {

            })
        },


        // 0新增、1编辑、2查看
        handleOption(type, item) {
            this.postForm = {
                id: '',
                encode: null,
                equipmentId: null,
                classificationCode: "",
                reportRepairId: "",
                reportRepair: "",
                problem: "",
                repairId: "",
                repairName: "",
                repairPhone: "",
                repairTime: "",
                repairState: "",
                disposeState: "",
                evaluate: null,
                remark: "",
                equipmentName: null,
                model: null,
                place: null,
                dateOfProduction: null,
                reportRepairTime: ""
            }
            this.nowType = type;
            this.getRepairname();
            this.getSelectUser();
            if (type != 0) {
                const id = item.id;
                queryRepair(id).then(res => {
                    if (res.code == 200) {
                        console.log(res.data);
                        Object.keys(this.postForm).forEach(key => {
                            if (res.data[key]) {
                                this.$set(this.postForm, key, res.data[key]);
                            }
                        });
                    }

                })
            }
            this.dialogVisible = true
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const { id, equipmentName, model } = row;
            const equipmentNames = equipmentName || this.equipmentNames;
            const models = model || this.models;
            this.$modal
                .confirm(`是否确认删除"${equipmentNames} ${models}"的数据项？`)
                .then(() => {
                    return deleteRepair(id, equipmentNames, models);
                })
                .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;
            console.log('this.postForm', this.postForm);
            this.$refs["postForm"].validate(valid => {
                if (valid) {
                    if (this.nowType == 1) { // 修改操作
                        if (this.postForm.id != null) {
                            editRepair(this.postForm)
                                .then(response => {
                                    console.log('this.postForm', this.postForm);
                                    this.dialogVisible = false;
                                    this.$modal.msgSuccess("修改成功");
                                    this.getList();
                                })
                                .catch(err => {
                                    // 处理错误
                                });
                        }
                    } else if (this.nowType == 0) { // 新增操作
                        addRepair(this.postForm)
                            .then(response => {
                                console.log('this.postForm', this.postForm);
                                this.dialogVisible = false;
                                this.$modal.msgSuccess("新增成功");
                                this.getList();
                            })
                            .catch(err => {
                                // 处理错误
                            });
                    }
                }
            });
        },





        // 取消按钮
        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>
