<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
            <el-form-item label="设备名称" prop="equipmentName">
                <el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable />
            </el-form-item>
            <el-form-item label="分类编码" prop="classificationcode">
                <el-input v-model="queryParams.classificationcode" placeholder="请输入领用人" clearable />
            </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.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-table v-loading="loading" border :data="repairRecord" stripe>
            <el-table-column label="序号" type="index" width="55" align="center" fixed="left" />
            <el-table-column label="自编码" align="center" prop="encode" width="180px" fixed="left" />
            <el-table-column label="设备名称" align="center" prop="equipmentName" fixed="left" />
            <el-table-column label="型号" align="center" prop="model" fixed="left" />
            <el-table-column label="投产日期" align="center" prop="dateOfProduction" />
            <el-table-column label="地点" align="center" prop="place" />
            <el-table-column label="报修时间" prop="reportRepairTime" align="center" width="180px" />
            <el-table-column label="报修人" align="center" prop="reportRepair" />
            <el-table-column label="问题" align="center" prop="problem" />
            <el-table-column label="修理人" align="center" prop="repairName" />
            <el-table-column label="修理时间" align="center" prop="repairTime" width="180px" />
            <el-table-column label="修理状态" align="center" prop="repairState">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.repair_state" :value="scope.row.repairState"></dict-tag>
                </template>
            </el-table-column>
            <el-table-column label="评价" align="center" prop="evaluate" width="220px">
                <template slot-scope="scope">
                    <el-rate :value="Number(scope.row.evaluate)" :max="5" :disabled="!scope.row.editable"></el-rate>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="操作" align="center" width="80px" fixed="right">
                <template v-slot="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)">查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList"></pagination>
        <!--查看对话框 -->
        <el-dialog title="详细信息" :visible.sync="dialogVisible" width="1200px" append-to-body>
            <el-form ref="postForm" :model="postForm" label-width="110px" :disabled="isEdit">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="自编码" prop="encode">
                            <el-input v-model="postForm.encode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设备名称" prop="equipmentName">
                            <el-input v-model="postForm.equipmentName"></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"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="投产日期:" prop="dateOfProduction">
                            <el-date-picker v-model="postForm.dateOfProduction" type="date" style="width: 100%;"
                                value-format="yyyy-MM-dd" 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"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报修时间:" prop="reportRepairTime">
                            <el-date-picker v-model="postForm.reportRepairTime" type="date" style="width: 100%;"
                                value-format="yyyy-MM-dd" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="报修人" prop="reportRepair">
                            <el-input v-model="postForm.reportRepair" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="问题" prop="problem">
                            <el-input v-model="postForm.problem" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="修理人" prop="repairName">
                            <el-input v-model="postForm.repairName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="修理时间" prop="repairTime">
                            <el-date-picker v-model="postForm.repairTime" type="date" style="width: 100%;"
                                value-format="yyyy-MM-dd" clearable></el-date-picker>

                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="修理状态" prop="repairState">
                            <el-select v-model="postForm.repairState" placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.repair_state" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </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-form-item label="备注" prop="deadline">
                        <el-input v-model="postForm.deadline" />
                    </el-form-item>
                </el-row>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>

        </el-dialog>

    </div>
</template>

<script>
import {
    listTeacherbx,
    listTeacherbxxq
} from "@/api/smartSchool/personWork/propertyManagement";
export default {
    dicts: ['repair_state'],
    data() {
        return {
            queryParams: {
                equipmentName: '',
                classificationcode: '',
                repairState: '',
                pageNum: 1,
                pageSize: 10,
            },

            //报修记录表格数据
            repairRecord: [],
            loading: false,
            total: 0,
            dialogVisible: false,
            postForm: {
                equipmentid: '',
                evaluate: '',
            },
            isEdit: false,
        }
    },
    created() {
        this.getList();
    },
    methods: {
        //获取数据信息
        getList() {
            listTeacherbx(this.queryParams).then((response) => {
                this.repairRecord = response.rows;
                console.log(this.repairRecord);
                this.loading = false;
                this.total = response.total;
            });
        },
        handleLook(row) {
            console.log(row);
            const params = {
                id: row.id,
            }
            listTeacherbxxq(params).then(response => {
                this.postForm = response.data;
                this.postForm.evaluate = parseFloat(response.data.evaluate); // 将评价值转换为数字类型
                console.log(this.postForm);
                this.dialogVisible = true;
                this.isEdit = true;
            });
        },
        //重置
        resetQuery() {
            this.queryParams = {
                equipmentName: '',
                classificationcode: '',
                repairState: '',
                pageNum: 1,
                pageSize: 10,
            },
                this.getList();
        },

    }

}
</script>

<style lang="scss" scoped></style>

