<template>
    <div class="app-container">
        <!-- 搜索条件 -->
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="申请人">
                <el-input v-model="queryForm.borrowBy" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="变更日期">
                <el-date-picker v-model="queryForm.startTime" type="date" placeholder="选择" value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-date-picker v-model="queryForm.endTime" type="date" placeholder="选择" value-format="yyyy-MM-dd">
                </el-date-picker>
            </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 stripe :data="tableData" border style="width: 98%">
            <el-table-column align="center" type="index" label="序号" width="55" />
            <el-table-column align="center" prop="borrowBy" label="申请人" />
            <el-table-column align="center" prop="borrowState" label="借用状态">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.borrow_state, row.borrowState) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="schoolTeacherBorrowDetailList" label="借用明细">
                <template slot-scope="{ row }">
                    <div v-for="detail in row.schoolTeacherBorrowDetailList" :key="detail.id">
                        {{ detail.instrumentName }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="applyTime" label="申请时间" />
            <el-table-column align="center" prop="borrowTime" label="借用时间" />
            <el-table-column align="center" prop="returnTime" label="归还时间" />
            <el-table-column align="center" prop="remark" label="备注" />
            <el-table-column align="center" fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.borrowState === '0' || scope.row.borrowState === '1'"
                        @click="handleLook(scope.row)" type="text" size="small">详情</el-button>
                    <el-button v-if="scope.row.borrowState === '0'" @click="returnItem(scope.row)" type="text"
                        size="small">归还</el-button>
                    <el-button v-if="scope.row.borrowState === '2'" @click="processItem(scope.row)" type="text"
                        size="small">借用</el-button>
                </template>

            </el-table-column>
        </el-table>

        <!-- 办理弹窗 -->
        <el-dialog :title="title" :visible.sync="openbl" width="42%" show-close>
            <el-form :model="form" ref="form" size="small" label-width="110px">
                <el-row>
                    <el-col>
                        <el-form-item label="借用人">
                            <el-input v-model="form.borrowBy" placeholder="请输入" clearable :disabled="isEdit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="借用明细">
                            <el-table stripe :data="tableDatabl" border>
                                <el-table-column align="center" type="index" label="序号" width="55" />
                                <el-table-column align="center" prop="instrumentName" label="仪器名称" />
                                <el-table-column align="center" prop="instrumentModel" label="仪器型号" />
                                <el-table-column align="center" prop="borrowNum" label="借用数量">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.borrowNum" size="mini"></el-input>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" placeholder="请输入" type="textarea" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="submitparentForm">确定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 归还弹窗 -->
        <el-dialog :title="title" :visible.sync="opengh" width="50%" show-close>
            <el-form :model="postForm" ref="postForm" size="small" label-width="110px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="借用人">
                            <el-input v-model="postForm.borrowBy" :disabled="isEdit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="借用状态">
                            <el-input v-model="postForm.borrowState" :disabled="isEdit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="申请时间">
                            <el-input v-model="postForm.applyTime" :disabled="isEdit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="借用明细">
                            <el-table stripe :data="tableDatagh" border>
                                <el-table-column align="center" type="index" label="序号" width="55" />
                                <el-table-column align="center" prop="instrumentName" label="仪器名称" />
                                <el-table-column align="center" prop="instrumentModel" label="仪器型号" />
                                <el-table-column align="center" prop="borrowNum" label="借用数量" />
                                <el-table-column align="center" prop="damageNum" label="损坏数量">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.damageNum" size="mini"></el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="备注">
                            <el-input v-model="postForm.remark" placeholder="请输入" type="textarea" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="cancelReturnItem">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 接触归还详情弹窗 -->
        <el-dialog title="详细信息" :visible.sync="openxq" width="50%" show-close>
            <el-form :model="formxq" ref="formxq" size="small" label-width="110px" :disabled="isEdit">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="借用人">
                            <el-input v-model="formxq.borrowBy"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="借用状态">
                            <el-input v-model="formxq.borrowState"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="申请时间">
                            <el-input v-model="formxq.applyTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="借用时间">
                            <el-input v-model="formxq.borrowTime"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="归还时间">
                            <el-input v-model="formxq.returnTime"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="借用明细">
                            <el-table stripe :data="tableDataxq" border>
                                <el-table-column align="center" type="index" label="序号" width="55" />
                                <el-table-column align="center" prop="instrumentName" label="仪器名称" />
                                <el-table-column align="center" prop="instrumentModel" label="仪器型号" />
                                <el-table-column align="center" prop="instrumentNum" label="借用数量" />
                                <el-table-column align="center" prop="damageNum" label="损坏数量" />
                            </el-table>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="备注">
                            <el-input v-model="formxq.remark" placeholder="请输入" type="textarea" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />
    </div>
</template>
<script>
import {
    getTeacherBorrow,
    getTeacherBorrowlxq,
    teacherBorrow,
    getReturnInstrument
} from '@/api/smartSchool/InstrumentDrugAdministration/instrumentBorrowManagement/warehouseEquipmentLoan'
export default {
    name: 'warehouseEquipmentLoan',
    dicts: ['borrow_state'],
    data() {
        return {
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                borrowBy: "",
                daterange: "",
                startTime: "",
                endTime: "",
            },
            //表格数据
            tableData: [

            ],
            //归还
            tableDatagh: [

            ],
            //详情
            tableDataxq: [

            ],
            //办理
            tableDatabl: [

            ],
            formxq: {},
            postForm: {

            },
            form: {},
            isEdit: false,
            title: '',
            // 总计
            total: 0,
            // 借用弹窗
            openbl: false,
            // 归还弹窗
            opengh: false,
            // 详情弹窗
            openxq: false
        }
    },
    created() {
        this.getList();
    },
    methods: {
        // 搜索
        getList() {
            getTeacherBorrow(this.queryForm).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        // 重置
        resetQuery() {
            this.queryForm = {
                pageNum: 1,
                pageSize: 10,
                borrowBy: "",
                daterange: "",
                startTime: "",
                endTime: "",
            },
                this.getList();
        },
        // 归还
        returnItem(row) {
            this.dialogTableReturnItem = true
            getTeacherBorrowlxq(row.id).then(response => {
                this.postForm = response.data;
                this.tableDatagh = response.data.schoolTeacherBorrowDetailList;
                this.opengh = true
                this.isEdit = true;

            })
            this.title = '归还'
        },
        // 详情
        handleLook(row) {
            getTeacherBorrowlxq(row.id).then(response => {
                this.formxq = response.data;
                this.tableDataxq = response.data.schoolTeacherBorrowDetailList;
                this.isEdit = true;
                this.openxq = true;

            })
        },
        // 办理
        processItem(row) {
            getTeacherBorrowlxq(row.id).then(response => {
                this.form = response.data;
                this.tableDatabl = response.data.schoolTeacherBorrowDetailList;
                this.openbl = true
                this.isEdit = true;

            })
            this.title = '借用'
        },
        // 借用确定
        submitparentForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    const params = {
                        id: this.form.id,
                        remark: this.form.remark,
                        schoolTeacherBorrowDetailList: this.form.schoolTeacherBorrowDetailList.map(detail => ({
                            instrumentId: detail.instrumentId,
                            borrowNum: detail.borrowNum
                        }))
                    };
                    teacherBorrow(params).then(response => {
                        console.log('this.form', this.form);
                        this.$modal.msgSuccess("借用成功");
                        this.openbl = false
                        this.getList();
                    });
                }
            });
        },
        // 借用取消
        cancel() {
            this.openbl = false
        },
        // 归还确定
        submitForm() {
            this.$refs["postForm"].validate(valid => {
                if (valid) {
                    const params = {
                        id: this.postForm.id,
                        borrowState: this.postForm.borrowState,
                        schoolTeacherBorrowDetailList: this.postForm.schoolTeacherBorrowDetailList.map(detail => ({
                            id: detail.id,
                            damageNum: detail.damageNum
                        }))
                    };
                    getReturnInstrument(params).then(response => {
                        console.log('this.postForm', this.postForm);
                        this.$modal.msgSuccess("归还成功");
                        this.opengh = false;
                        this.getList();
                    });
                }
            });
        },
        // 归还取消
        cancelReturnItem() {
            this.opengh = false
        }
    }
}
</script>

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