<template>
    <div>
        <el-form :model="formData" ref="dataForm">
            <el-button-group style="display: flex;margin: -50px 0 10px 80%; height: 35px">
                <el-button
                    type="primary"
                    :disabled="this.detailList.length > 0"
                    @click.native="selectCollectOrderList()"
                >选择设备领用单
                </el-button>
                <el-button
                    type="primary"
                    @click.native="saveMAOrder()"
                >保存
                </el-button>
            </el-button-group>

            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="3">
                    <div class="ao-text">
                        <span>养护记录号：</span>
                    </div>
                </el-col>
                <el-col :span="7">
                    <el-form-item prop="orderId">
                        <el-input v-model="formData.orderId" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <div class="ao-text">
                        <span>养护日期：</span>
                    </div>
                </el-col>
                <el-col :span="7">
                    <el-form-item prop="createTime">
                        <el-input v-model="formData.createTime" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 0px">
                <el-col :span="3">
                    <div class="ao-text">
                        <span>领用记录号：</span>
                    </div>
                </el-col>

                <el-col :span="7">
                    <el-form-item prop="collOrderId">
                        <el-input v-model="formData.collOrderId" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-table v-loading="loading" :data="detailList" style="width: 100%; margin-top: 10px;"
                      max-height="300" height="300" ref="multipleTable">
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column label="条码" width="180" prop="code" show-overflow-tooltip></el-table-column>
                <el-table-column width="150"
                                 label="产品通用名"
                                 prop="productName"
                                 show-overflow-tooltip
                ></el-table-column>
                <el-table-column width="150" label="规格型号" prop="ggxh" show-overflow-tooltip></el-table-column>
                <el-table-column width="150" label="批次号" prop="batchNo"></el-table-column>
                <el-table-column width="150" label="养护状态" prop="maintenanceStatus">
                    <template slot-scope="scope">
                        <el-radio :disabled="scope.$index !== currentIndex" v-model="scope.row.maintenanceStatus"
                                  :label="0">未养护
                        </el-radio>
                        <el-radio :disabled="scope.$index !== currentIndex" v-model="scope.row.maintenanceStatus"
                                  :label="1">已养护
                        </el-radio>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="设备状态" prop="deviceStatus">
                    <template slot-scope="scope">
                        <el-radio :disabled="scope.$index !== currentIndex" v-model="scope.row.deviceStatus" :label="1">
                            正常
                        </el-radio>
                        <el-radio :disabled="scope.$index !== currentIndex" v-model="scope.row.deviceStatus" :label="0">
                            异常
                        </el-radio>
                    </template>
                </el-table-column>
                <el-table-column width="200" label="养护备注" prop="remark">
                    <template slot-scope="scope">
                        <el-input :disabled="scope.$index !== currentIndex" v-model="scope.row.remark"></el-input>
                    </template>
                </el-table-column>
                <el-table-column width="180" label="生产日期(yyMMdd)" prop="produceDate"></el-table-column>
                <el-table-column width="180" label="失效日期(yyMMdd)" prop="expireDate"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column width="250" label="注册/备案凭证号" prop="zczbhhzbapzbh"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column width="150" label="生产厂家" prop="ylqxzcrbarmc"
                                 show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.stop="true"
                            @click.native="editOrderDetail(scope.$index, scope.row)"
                        >编辑
                        </el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click.stop="true"
                            @click.native="updateOrderDetail(scope.row)"
                        >保存
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

        </el-form>

        <el-dialog
            title="选择领用设备"
            :visible.sync="selectCollectOrderVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="85%"
            v-if="selectCollectOrderVisible"
            :append-to-body='true'
        >
            <el-form :inline="true" :model="filterQuery" size="mini">
                <el-row>
                    <el-form-item class="query-form-item">
                        <el-input v-model="filterQuery.orderId" placeholder="领用记录号" clearable></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-select v-model="filterQuery.deptCode" placeholder="请选择领用部门" clearable="true"
                                   size="mini">
                            <el-option
                                v-for="item in deptList"
                                :key="item.name"
                                :label="item.name"
                                :value="item.code">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                            <el-button type="primary" icon="search" @click="getDeviceCollectOrderList"
                            >查询
                            </el-button
                            >
                        </el-button-group>
                    </el-form-item>
                </el-row>
            </el-form>

            <el-table v-loading="collOrderLoading" :data="collectOrderList" style="width: 100%"
                      highlight-current-row="false"
                      @current-change="combine">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="领用记录号" prop="orderId"></el-table-column>
                <el-table-column label="领用部门" prop="deptName"></el-table-column>
                <el-table-column label="领用人" prop="createUser"></el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.stop="true"
                            @click.native="showCollectOrderDetail(scope.row)"
                        >详情
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                :page-size="filterQuery.limit"
                :current-page="filterQuery.page"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="collectOrderTotal"
            ></el-pagination>
        </el-dialog>

        <el-dialog
            title="领用设备列表"
            :visible.sync="collOrderDetailVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="85%"
            v-if="collOrderDetailVisible"
            :append-to-body='true'
        >
            <el-table v-loading="collOrderDetailLoading" :data="collOrderDetailList" style="width: 100%"
                      highlight-current-row="false"
                      @current-change="combine"
                      ref="multipleTable">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="产品名称" prop="productName"></el-table-column>
                <el-table-column label="规格型号" prop="ggxh"></el-table-column>
                <el-table-column label="批次号" prop="batchNo"></el-table-column>
                <el-table-column label="生产厂家" prop="ylqxzcrbarmc" show-overflow-tooltip></el-table-column>
                <el-table-column label="注册/备案凭证号" prop="zczbhhzbapzbh" show-overflow-tooltip></el-table-column>
                <el-table-column label="条码" prop="code" show-overflow-tooltip></el-table-column>
            </el-table>

            <el-pagination
                :page-size="collDetailQuery.limit"
                :current-page="collDetailQuery.page"
                @current-change="handleCollOrderDetailChange"
                layout="prev, pager, next"
                :total="collOrderDetailTotal"
            ></el-pagination>
        </el-dialog>
    </div>

</template>

<script>
import {
    updateDeviceMAOrderDetail,
    addMAOrder,
    updateDeviceMAOrder,
    getDeviceMAOrderDetailList
} from "@/api/inventory/deviceMAOrder";
import {getCollectOrderList, getCollectOrderDetailList} from "@/api/inventory/deviceCollectOrder";
import {isBlank} from "@/utils/strUtil";
import {filterDepts} from "@/api/auth/authDept";

export default {
    props: {
        deviceMAOrder: {
            type: Object,
            required: true,
        },
        closeDialog: {
            type: Function,
            required: true,
        },
    },

    data() {
        return {
            filterQuery: {
                orderId: null,
                deptCode: null,
                page: 1,
                limit: 10
            },
            collectOrderList: [],
            collectOrderTotal: 0,
            formData: {
                id: null,
                orderId: null,
                collOrderId: null,
                createTime: null,
                status: 0,
            },
            detailList: [],
            loading: false,
            currentIndex: -1,
            selectCollectOrderVisible: false,
            collOrderDetailVisible: false,
            collOrderDetailList: [],
            collOrderDetailLoading: false,
            collOrderLoading: false,
            collDetailQuery: {
                orderId: null,
                page: 1,
                limit: 10
            },
            collOrderDetailTotal: 0,
            deptList: []
        }
    },
    methods: {
        selectCollectOrderList() {
            //保存或更新养护记录仓库信息
            this.onReset();
            this.selectCollectOrderVisible = true;
        },
        saveMAOrder() {
            if (!isBlank(this.formData.orderId)) {
                this.saveOrder();
                this.closeDialog();
            } else {
                this.$message.error("请选择养护设备！");

            }
        },
        saveOrder() {
            if (isBlank(this.formData.orderId)) {
                addMAOrder(this.formData).then((res) => {
                    if (res.code === 20000) {
                        this.formData.id = res.data.id;
                        this.formData.orderId = res.data.orderId;
                        this.formData.createTime = res.data.createTime;
                        this.getList();
                    } else {
                        this.$message.error(res.message);
                    }
                }).catch((error) => {
                    this.$message.error(error.message);
                });
            } else {
                updateDeviceMAOrder(this.formData).then((res) => {
                    if (res.code === 20000) {
                        this.formData.createTime = res.data.createTime;
                        this.getList();
                    } else {
                        this.$message.error(res.message);
                    }
                }).catch((error) => {
                    this.$message.error(error.message);
                });
            }
        },
        getList() {
            let params = {orderIdFk: this.formData.orderId};
            getDeviceMAOrderDetailList(params).then((res) => {
                if (res.code === 20000) {
                    this.detailList = res.data.list || [];
                }
            })
        },
        updateOrderDetail(row) {
            updateDeviceMAOrderDetail(row).then((res) => {
                if (res.code === 20000) {
                    this.$message.success("保存成功！")
                    this.getList();
                }
            })
        },
        editOrderDetail(index, row) {
            this.currentIndex = index;
        },
        onReset() {
            this.filterQuery = {
                orderId: null,
                deptCode: null,
                page: 1,
                limit: 10
            };
            this.multiProduct = [];
            this.getDeviceCollectOrderList();
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getDeviceCollectOrderList();
        },
        getDeviceCollectOrderList() {
            getCollectOrderList(this.filterQuery).then((res) => {
                this.collectOrderList = res.data.list || [];
                this.collectOrderTotal = res.data.total || 0;
            }).catch(() => {
                this.collectOrderList = [];
                this.collectOrderTotal = 0;
            });
        },
        combine(row) {
            this.selectCollectOrderVisible = false;
            this.formData.collOrderId = row.orderId;
            this.saveOrder();
        },
        handleCollOrderDetailChange(val) {
            this.collDetailQuery.page = val;
            this.getCollOrderDetailList();
        },
        showCollectOrderDetail(row) {
            this.collOrderDetailVisible = true;
            this.collOrderDetailList = [];
            this.collOrderDetailTotal = 0;
            this.collDetailQuery.orderId = row.orderId;
            this.collDetailQuery.page = 1;
            this.getCollOrderDetailList();
        },
        getCollOrderDetailList() {
            this.collOrderDetailLoading = true;
            getCollectOrderDetailList(this.collDetailQuery).then((res) => {
                this.collOrderDetailLoading = false;
                if (res.code === 20000) {
                    this.collOrderDetailList = res.data.list || [];
                    this.collOrderDetailTotal = res.data.total || 0;
                } else {
                    this.collOrderDetailList = [];
                    this.collOrderDetailTotal = 0;
                }
            }).catch(() => {
                this.collOrderDetailLoading = false;
                this.collOrderDetailList = [];
                this.collOrderDetailTotal = 0;
            });
        },
        getDepts() {
            filterDepts().then((res) => {
                this.deptList = res.data.list || [];
            })
        },
    },
    created() {
        this.getDepts();
        if (null !== this.deviceMAOrder) {
            this.formData.id = this.deviceMAOrder.id;
            this.formData.orderId = this.deviceMAOrder.orderId;
            this.formData.collOrderId = this.deviceMAOrder.collOrderId;
            this.formData.createTime = this.deviceMAOrder.createTime;
            this.getList();
        }
    },
};
</script>

