<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"
                    @click.native="saveOrder()"
                >保存
                </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="code">
                        <el-input v-model="formData.code" 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: 20px;">
                <el-col :span="3">
                    <div class="ao-text">
                        <span>部门：</span>
                    </div>
                </el-col>
                <el-col :span="7">
                    <el-form-item prop="deptName">
                        <el-input v-model="formData.deptName" 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.createUser" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-table :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 v-model="scope.row.maintenanceStatus"
                                  :label="0">未养护
                        </el-radio>
                        <el-radio 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 v-model="scope.row.deviceStatus" :label="1">
                            正常
                        </el-radio>
                        <el-radio 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 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>
        </el-form>
    </div>

</template>

<script>
import {addDeviceMAOrder} from "@/api/inventory/deviceMAOrder";
import {filterDetail} from "@/api/inventory/deviceCollectOrder";

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

    data() {
        return {
            collectOrderList: [],
            collectOrderTotal: 0,
            formData: {
                code: null,
                createUser: null,
                createTime: null,
                deptName: null,
                deptCode: null,
                remark: null,
                maintenanceStatus: null,
                deviceStatus: null
            },
            detailList: []
        }
    },
    methods: {
        saveOrder() {
            this.formData.remark = this.detailList[0].remark;
            this.formData.maintenanceStatus = this.detailList[0].maintenanceStatus;
            this.formData.deviceStatus = this.detailList[0].deviceStatus;
            addDeviceMAOrder(this.formData).then((res) => {
                if (res.code === 20000) {
                    this.closeDialog();
                } else {
                    this.$message.error(res.message);
                }
            }).catch((error) => {
                this.$message.error(error.message);
            });
        },
        getMAOrderDetailList(code) {
            let params = {code: code};
            filterDetail(params).then((res) => {
                this.detailList.push(res.data);
            })
        }
    },
    created() {
        this.formData = {
            code: this.deviceMAOrder.code,
            createUser: this.deviceMAOrder.createUser,
            deptName: this.deviceMAOrder.deptName,
            createTime: this.deviceMAOrder.createTime,
            deptCode: this.deviceMAOrder.deptCode
        };
        this.getMAOrderDetailList(this.deviceMAOrder.code);
    },
};
</script>

