<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="报修单号">
                <el-input v-model="queryParams.id" placeholder="请输入报修单号" clearable></el-input>
            </el-form-item>
            <el-form-item label="报修时间" prop="repairsTime">
                <el-date-picker v-model="queryParams.repairsTime" type="datetime" placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss" clearable>
                </el-date-picker>
            </el-form-item>
            <el-form-item label="维修状态" prop="maintainState">
                <el-select v-model="queryParams.maintainState" placeholder="维修状态" clearable>
                    <el-option v-for="dict in dict.type.
                        maintain_state" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格数据 -->
        <el-tabs v-model="activeTab">
            <el-tab-pane label="未接单" name="incomplete">
                <el-table :data="applyTableinco" border style="width: 100%" :header-cell-style="{ background: '#f6f9fe' }">
                    <el-table-column align="center" type="index" label="序号" width="80px " />
                    <el-table-column align="center" prop="id" label="报修单号" />
                    <el-table-column align="center" prop="repairsName" label="报修人" />
                    <el-table-column align="center" prop="phone" label="联系方式" />
                    <el-table-column align="center" prop="repairsTime" label="报修时间" />
                    <el-table-column align="center" prop="failureEquipment" label="故障设备" />
                    <el-table-column align="center" prop="failureEquipmentArea" label="设备地点" />
                    <el-table-column align="center" prop="failureEquipmentDescribe" label="故障描述" />
                    <el-table-column align="center" prop="maintainResult" label="维修结果" />
                    <el-table-column align="center" prop="maintainState" label="维修状态">
                        <template slot-scope="{ row }">
                            {{ row.maintainState == 1 ? "未接单" : row.maintainState == 2 ? "维修中" : "已维修 " }}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180px" align="center" fixed="right"
                        class-name="small-padding fixed-width">
                        <template slot-scope="{ row }">
                            <div v-if="row.maintainState === 3">
                                <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(row)">
                                    查看
                                </el-button>
                            </div>
                            <div v-else-if="row.maintainState === 1">

                                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)"
                                    v-hasPermi="['system:application:remove']">
                                    派单
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(row)">
                                    查看
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)"
                                    v-hasPermi="['system:application:remove']">
                                    删除
                                </el-button>
                            </div>
                            <div v-else>

                                <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(row)">
                                    查看
                                </el-button>
                            </div>
                        </template>


                    </el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="维修中" name="notRepairable">
                <el-table :data="applyTablenot" border style="width: 100%" :header-cell-style="{ background: '#f6f9fe' }">
                    <el-table-column align="center" type="index" label="序号" width="80px " />
                    <el-table-column align="center" prop="id" label="报修单号" />
                    <el-table-column align="center" prop="repairsName" label="报修人" />
                    <el-table-column align="center" prop="phone" label="联系方式" />
                    <el-table-column align="center" prop="repairsTime" label="报修时间" />
                    <el-table-column align="center" prop="failureEquipment" label="故障设备" />
                    <el-table-column align="center" prop="failureEquipmentArea" label="设备地点" />
                    <el-table-column align="center" prop="failureEquipmentDescribe" label="故障描述" />
                    <el-table-column align="center" prop="maintainResult" label="维修结果" />
                    <el-table-column align="center" prop="maintainState" label="维修状态">
                        <template slot-scope="{ row }">
                            {{ row.maintainState == 1 ? "未接单" : row.maintainState == 2 ? "维修中" : "已维修 " }}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180px" align="center" fixed="right"
                        class-name="small-padding fixed-width">
                        <template slot-scope="{ row }">
                            <div v-if="row.maintainState === 3">
                                <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(row)">
                                    查看
                                </el-button>
                            </div>
                            <div v-else-if="row.maintainState === 1">
                                <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)"
                                    v-hasPermi="['system:application:remove']">
                                    派单
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)"
                                    v-hasPermi="['system:application:remove']">
                                    删除
                                </el-button>
                            </div>
                            <div v-else>

                                <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(row)">
                                    查看
                                </el-button>
                            </div>
                        </template>


                    </el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="rePaired">
                <el-table :data="applyTablerep" border style="width: 100%" :header-cell-style="{ background: '#f6f9fe' }">
                    <el-table-column align="center" type="index" label="序号" width="80px " />
                    <el-table-column align="center" prop="id" label="报修单号" />
                    <el-table-column align="center" prop="repairsName" label="报修人" />
                    <el-table-column align="center" prop="phone" label="联系方式" />
                    <el-table-column align="center" prop="repairsTime" label="报修时间" />
                    <el-table-column align="center" prop="failureEquipment" label="故障设备" />
                    <el-table-column align="center" prop="failureEquipmentArea" label="设备地点" />
                    <el-table-column align="center" prop="failureEquipmentDescribe" label="故障描述" />
                    <el-table-column align="center" prop="maintainResult" label="维修结果" />
                    <el-table-column align="center" prop="maintainState" label="维修状态">
                        <template slot-scope="{ row }">
                            {{ row.maintainState == 1 ? "未接单" : row.maintainState == 2 ? "维修中" : "已维修 " }}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180px" align="center" fixed="right"
                        class-name="small-padding fixed-width">
                        <template slot-scope="{ row }">
                            <div v-if="row.maintainState === 3">
                                <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(row)">
                                    查看
                                </el-button>
                            </div>
                            <div v-else-if="row.maintainState === 1">
                                <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)"
                                    v-hasPermi="['system:application:remove']">
                                    派单
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)"
                                    v-hasPermi="['system:application:remove']">
                                    删除
                                </el-button>
                            </div>
                            <div v-else>

                                <el-button size="mini" type="text" icon="el-icon-search" @click="handleLook(row)">
                                    查看
                                </el-button>
                            </div>
                        </template>


                    </el-table-column>

                </el-table>
            </el-tab-pane>

        </el-tabs>
        <!-- 派单对话框 -->
        <el-dialog :title="title" :visible.sync="openpd" width="600px" append-to-body>
            <el-form ref="formpd" :model="formpd" :rules="rules" label-width="110px">
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="维修人" prop="maintainName">
                            <el-input v-model="formpd.maintainName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="维修人联系电话" prop="maintainPhone">
                            <el-input v-model="formpd.maintainPhone" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <div style="text-align: center">
                <el-button type="primary" @click="submitFormpd">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>

        </el-dialog>
        <!-- 查看对话框 -->

        <el-dialog :title="title" :visible.sync="openLook" width="1200px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="维修人" prop="maintainName">
                            <el-input v-model="form.maintainName" placeholder="维修人"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="维修人联系方式" prop="maintainPhone">
                            <el-input v-model="form.maintainPhone" placeholder="维修人联系方式"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="维修结果" prop="maintainResult">
                            <el-input v-model="form.maintainResult" placeholder="维修结果"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="评价" prop="phevaluateone">
                            <el-rate v-model="form.evaluate" :max="5"></el-rate>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="报修单号" prop="id">
                            <el-input v-model="form.id" placeholder="报修单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报修人" prop="repairsName">
                            <el-input v-model="form.repairsName" placeholder="报修人"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系方式" prop="phone">
                            <el-input v-model="form.phone" placeholder="联系方式"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报修时间" prop="repairsTime">
                            <el-date-picker v-model="form.repairsTime" type="datetime" placeholder="选择日期时间"
                                value-format="yyyy-MM-dd HH:mm:ss" :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="故障设备" prop="failureEquipment">
                            <el-input v-model="form.failureEquipment" placeholder="故障设备"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="故障设备地点" prop="failureEquipmentArea">
                            <el-input v-model="form.failureEquipmentArea" placeholder="故障设备地点"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="故障描述" prop="failureEquipmentDescribe">
                            <el-input type="textarea" v-model="form.failureEquipmentDescribe" placeholder="故障描述"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- </div> -->
            </el-form>
            <div style="text-align: center">
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>







    </div>
</template>

<script>
import {
    listRepairs,// 查看所有后勤报修信息
    getRepairs,// 查询报修信息详情
    submitRepairs,//反馈结果接口
    dispatchRepairs//派单


} from "@/api/smartSchool/logisticsManage/repairReport";



export default {
    name: 'logisticsWarranty',
    dicts: ['maintain_state'],
    data() {

        return {
            activeTab: 'incomplete',
            maintainState: '',
            applyTable: [],
            applyTableinco: [],
            applyTablenot: [],
            applyTablerep: [],
            queryParams: {
                id: "",
                repairsTime: "",
                maintainState: "",
            },
            // 表格数据
            applyTable: [],
            // 查询表单
            queryForm: {

                pageNum: 1,
                pageSize: 10,


            },


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

            // 派单
            formpd: {
                id: "",
                maintainName: "",
                maintainState: "2",
                maintainPhone: "",

            },


            // 是否显示新增弹出层
            open: false,
            // 查看对话框
            openLook: false,
            // 派单
            openpd: false,
            // 反馈对话框
            openfk: false,
            // // 表单校验
            rules: {

                phone: [
                    { required: true, message: "联系方式不能为空", trigger: "blur" }
                ],

                repairsTime: [
                    { required: true, message: "保修时间不能为空", trigger: "blur" }
                ],
                failureEquipment: [
                    { required: true, message: "故障设备不能为空", trigger: "blur" }
                ],
                failureEquipmentArea: [
                    { required: true, message: "故障设备地点不能为空", trigger: "blur" }
                ],
                failureEquipmentDescribe: [
                    { required: true, message: "故障设备描述", trigger: "blur" }
                ],

            },
            // 弹出层标题
            title: '',
            form: {
                id: "",
                maintainResult: "",
                evaluate: "",
            }

        }
    },
    mounted() {
        this.formpd.evaluate = 5;
        this.activeTab = 'incomplete'; // 设置激活状态为未接单标签页
    },


    created() {
        this.getList();

    },
    methods: {

        /** 获取列表数据 */
        getList() {
            this.loading = true;
            listRepairs(this.queryParams)
                .then(response => {
                    this.loading = false;
                    this.applyTable = response.rows;
                    console.log('this.applyTable', this.applyTable);
                    this.applyTableinco = response.rows.filter(item => item.maintainState === 1);
                    console.log('this.applyTableinco', this.applyTableinco);
                    this.applyTablenot = response.rows.filter(item => item.maintainState === 2);
                    console.log('this.applyTablenot', this.applyTablenot);
                    this.applyTablerep = response.rows.filter(item => item.maintainState === 3);
                    console.log('this.applyTablerep', this.applyTablerep);
                    console.log('this.applyTable', this.applyTable);
                    this.total = response.total;


                })
                .catch(err => {
                    this.loading = false;
                });
        },



        // 搜索按钮
        handleQuery() {
            this.throttle(() => {
                this.queryForm.pageNum = 1;
                this.getList();
            })
        },
        /** 查看 */
        handleLook(row) {
            this.form = row;
            const id = row.id || this.ids;
            getRepairs(id).then(response => {
                this.form = response.data;
                console.log('this.form', this.form);
                this.openLook = true;
            }).catch(err => {

            })
            this.title = "查看报修情况";
        },
        // 重置按钮
        resetQuery() {
            this.queryParams = {
                id: "",
                repairsTime: null,
                pageNum: 1,
                pageSize: 10,
            }

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


        // 派单按钮操作
        handleUpdate(row) {
            const id = row.id || this.ids;
            this.title = "派单";
            this.openpd = true;
            getRepairs(id).then(response => {
                this.formpd.id = response.data.id;
                console.log('this.formpd.id', this.formpd.id);
            }).catch(err => {

            })

        },

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

        // 派单按钮
        submitFormpd() {
            const newObj = {};
            newObj.id = this.formpd.id;
            newObj.maintainState = this.formpd.maintainState;
            newObj.maintainName = this.formpd.maintainName;
            newObj.maintainPhone = this.formpd.maintainPhone;
            console.log('newObj', newObj);
            console.log(newObj.maintainState);
            dispatchRepairs(newObj)
                .then((response) => {
                    // 派单成功，显示提示信息并刷新页面
                    this.$message.success("派单成功");
                    this.openpd = false;
                    this.formpd.maintainResult = '';
                    this.getList();
                })
        },


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

        reset() {
            // 这里需要重置对话框表单
            this.postForm = {

            };
            this.resetForm('postForm');
        },



        // 反馈结果
        submitApply(row) {
            const id = row.id || this.ids;
            getRepairs(id).then(response => {
                this.formfk.id = response.data.id;
                console.log('this.form', this.form);
                this.openfk = true;
                this.formfk.maintainResult = '';
                this.title = "反馈结果";

            })

        },
        // 反馈结果按钮
        submitFormfk() {
            this.$refs.formfk.validate((valid) => {
                if (valid) {
                    const newObj = {};
                    newObj.id = this.formfk.id;
                    newObj.maintainResult = this.formfk.maintainResult;
                    newObj.maintainState = this.formfk.maintainState;
                    newObj.evaluate = this.formfk.evaluate;
                    console.log('newObj', newObj);
                    console.log(newObj.maintainState);
                    submitRepairs(newObj)
                        .then((response) => {
                            this.$modal.msgSuccess("反馈成功");
                            this.openfk = false;
                            this.formfk.maintainResult = '';
                            this.getList();
                        })
                        .catch((error) => {
                            // 处理错误
                        });
                } else {
                    return false;
                }
            });
        },

    }
}
</script>

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