<template>
    <div style="width: 100%">
        <div style="width: 100%; padding: 10px">
            <div class="item-box">
                <div>设备类型:</div>
                <div style="margin-left: 10px; color: blue">{{ queryParams.maName }}</div>
            </div>
            <div class="item-box">
                <div>规格型号:</div>
                <div style="margin-left: 10px; color: blue">
                    {{ queryParams.maModel }}
                </div>
            </div>
            <div class="item-box">
                <div>二维码编码:</div>
                <div style="margin-left: 10px">{{ queryParams.qrCode }}</div>
            </div>
            <div class="item-box">
                <div>设备编码:</div>
                <div style="margin-left: 10px">{{ queryParams.maCode }}</div>
            </div>
            <div class="item-box">
                <div>设备状态:</div>
                <div style="margin-left: 10px">{{ queryParams.maStatus }}</div>
            </div>
            <div class="item-box">
                <div>本次检修人员:</div>
                <div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
            </div>
            <div class="item-box">
                <div>本次检修时间:</div>
                <div style="margin-left: 10px; color: blue">{{ queryParams.thisCheckTime }}</div>
            </div>
            <div class="item-box">
                <div>检验人员:</div>
                <div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
            </div>
            <div class="item-box">
                <div>下次检修时间:</div>
                <div style="margin-left: 10px; color: blue">{{ queryParams.nextCheckTime }}</div>
            </div>
            <div class="item-box">
                <div>检验结论:</div>
                <div style="margin-left: 10px; color: blue">{{ queryParams.inspectStatus || '合格' }}</div>
            </div>
            <div class="item-box">
                <div>联系电话:</div>
                <div style="margin-left: 10px">{{ queryParams.phone }}</div>
            </div>
            <!-- 主要参数 a链接 -->
            <div class="item-box">
                <div>主要参数:</div>
                <div style="margin-left: 10px">
                    <a href="" target="_blank" style="color: blue; text-decoration: underline">下载</a>
                </div>
            </div>
            <div class="item-box">
                <div>生产厂家:</div>
                <div style="margin-left: 10px">{{ queryParams.maVender }}</div>
            </div>
            <div class="item-box">
                <div>出厂日期:</div>
                <div style="margin-left: 10px">{{ queryParams.outFacTime }}</div>
            </div>
            <div class="item-box">
                <div>初次入库:</div>
                <div style="margin-left: 10px">{{ queryParams.inTime }}</div>
            </div>
            <div class="item-box">
                <div>服务工程次数:</div>
                <div style="margin-left: 10px">{{ queryParams.serviceNum }}</div>
            </div>
            <div class="item-box">
                <div>检验次数:</div>
                <div style="margin-left: 10px">{{ queryParams.serviceNum }}</div>
            </div>
            <div class="item-box">
                <div>更换配件次数:</div>
                <div style="margin-left: 10px">{{ queryParams.checkNum }}</div>
            </div>
            <div class="item-box">
                <div>报废时间:</div>
                <div style="margin-left: 10px">{{ queryParams.scrapTime || '暂无' }}</div>
            </div>
            <div class="item-box">
                <div>领料单位:</div>
                <div style="margin-left: 10px">{{ queryParams.leaseUnit }}</div>
            </div>
            <div class="item-box">
                <div>领料工程:</div>
                <div style="margin-left: 10px">{{ queryParams.leaseProject }}</div>
            </div>
            <div class="item-box">
                <div>领料时间:</div>
                <div style="margin-left: 10px">{{ queryParams.leaseTime }}</div>
            </div>
            <div class="item-box">
                <div>退料单位:</div>
                <div style="margin-left: 10px">{{ queryParams.backUnit }}</div>
            </div>
            <div class="item-box">
                <div>退料工程:</div>
                <div style="margin-left: 10px">{{ queryParams.backProject }}</div>
            </div>
            <div class="item-box">
                <div>退料时间:</div>
                <div style="margin-left: 10px">{{ queryParams.backTime }}</div>
            </div>
        </div>
        <div class="bottom-box">
            <div style="width: 100%; text-align: center; margin-bottom: 20px; color: #3e7c53; margin-top: 10px">
                检 验 合 格 证
            </div>
            <div style="width: 50%; display: flex">
                <div style="color: #3e7c53">名 称：</div>
                <div style="border-bottom: 1px solid #3e7c53">{{ queryParams.maName }}</div>
            </div>
            <div style="width: 50%; display: flex">
                <div style="color: #3e7c53">检验结论：</div>
                <div style="color: red; font-size: 18px; font-weight: 600">
                    {{ queryParams.inspectStatus || '合格' }}
                </div>
            </div>
            <div style="width: 100%; display: flex">
                <div style="color: #3e7c53">型 号：</div>
                <div style="border-bottom: 1px solid #3e7c53">{{ queryParams.maModel }}</div>
            </div>
            <div style="width: 100%; display: flex">
                <div style="color: #3e7c53">编 号：</div>
                <div style="border-bottom: 1px solid #3e7c53">{{ queryParams.maCode }}</div>
            </div>
            <div style="width: 100%; display: flex">
                <div style="color: #3e7c53">本次检验日期：</div>
                <div style="border-bottom: 1px solid #3e7c53">{{ queryParams.thisCheckTime }}</div>
            </div>
            <div style="width: 100%; display: flex">
                <div style="color: #3e7c53">下次检验日期：</div>
                <div style="border-bottom: 1px solid #3e7c53">{{ queryParams.nextCheckTime }}</div>
            </div>
            <div style="width: 50%; display: flex">
                <div style="color: #3e7c53">检修员：</div>
                <div style="border-bottom: 1px solid #3e7c53">
                    {{ queryParams.checkMan }}
                </div>
            </div>
            <div style="width: 50%; display: flex">
                <div style="color: #3e7c53">检验员：</div>
                <div style="border-bottom: 1px solid #3e7c53">
                    {{ queryParams.checkMan }}
                </div>
            </div>
            <div style="width: 100%; display: flex">
                <div style="color: #3e7c53">联系电话：</div>
                <div style="border-bottom: 1px solid #3e7c53">{{ queryParams.phone }}</div>
            </div>
            <div style="position: absolute; top: 3%; left: 15%">
                <canvas id="canvas" width="200" height="200"></canvas>
            </div>
        </div>
    </div>
</template>

<script>
import chapter from '@/utils/chapter'
import { getMachineByQrCode } from '@/api/basic/basic'
export default {
    data() {
        return {
            qrCode: '',
            queryParams: {
                deviceType: '', //设备类型
                specificationType: '', //规格型号
                qrCode: '', //二维码
                maCode: '', //设备编码
                maStatusName: '', //设备状态
                checkMan: '', //本次检验人
                thisCheckTime: '', //本次检验日期
                nextCheckTime: '', //下次检验日期
                // maStatusName:'',//设备状态
                inspectMan: '', //检验人员
                inspectStatus: '', //检验结论
                phone: '', //联系电话
                maVender: '', //厂家名称
                outFacTime: '', //出厂日期
                inOutNum: '', //出入库次数
                leaseUnit: '', // 领料单位
                leasePro: '', // 领料工程
                leaseTime: '', // 领料时间
                backUnit: '', //  退料单位
                backPro: '', // 退料工程
                backTime: '' // 退料时间
            }
        }
    },
    created() {
        this.qrCode = this.$route.query.qrCode
        // console.log(this.qrCode)
        this.getMachineByQrCode()
    },
    mounted() {
        chapter('检验专用章', '安徽送变电工程有限公司机具（物流）分公司')
    },
    methods: {
        getMachineByQrCode() {
            let param = {
                qrCode: this.qrCode
            }
            getMachineByQrCode(param).then(response => {
                console.log(response, '返回结果-----')
                this.queryParams = response.data
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.item-box {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #3e7c53;
    margin-bottom: 10px;
}
.bottom-box {
    display: flex;
    width: 99%;
    border: 4px solid #3f8b53;
    flex-wrap: wrap;
    margin: auto;
    position: relative;
}
</style>
