<template>
<div>
    <el-form :inline="true" :model="query" class="query-form" size="mini">
        <el-form-item class="query-form-item">
            <el-input
                autofocus
                v-model="query.deviceId"
                placeholder="搜索"
                style="width:350px;"
            ></el-input>
        </el-form-item>

        <el-form-item style=" display: flex;">
            <el-button type="primary" :loading="loading" icon="search" @click="search">查询</el-button>
            <el-button :disabled="query.key==''" @click="getHistory" :loading="dialog.loading">查看历史</el-button>
        </el-form-item>

    </el-form>
    <single-view :product-detail="productDetail"/>
    <el-dialog title="历史记录"
               :visible.sync="dialog.visible"
               fullscreen="true"
              >
        <div style="margin-right:15px">
            <el-table
                :data="dialog.tableData"
                style="width: 100% "
                @row-click="rowClick"
                row-style="cursor: pointer"
                highlight-current-row
            >
                <el-table-column label="版本号" prop="versionnumber"/>
                <el-table-column label="版本状态" prop="versionstatus"/>
                <el-table-column label="版本日期" prop="versiontime"/>
                <el-table-column label="产品名称" prop="cpmctymc"/>
                <el-table-column label="规格型号" prop="ggxh"/>
                <el-table-column label="编码体系名称" prop="cpbsbmtxmc"/>
                <el-table-column label="发布日期" prop="cpbsfbrq"/>
            </el-table>
        </div>

        <single-view :product-detail="dialog.productDetail"/>
    </el-dialog>
</div>
</template>

<script>
import SingleView from "../components/single-view";
import {downloadSingle,downloadHistory} from "@/api/UDIDownload/udiSingle"
export default {
    name: "udiSingle",
    components: {SingleView},
    data(){
        return {
            query:{
                deviceId:"",
                key:""
            },
            loading:false,
            productDetail:null,
            dialog:{
                loading: false,
                visible: false,
                tableData:[],
                productDetail:null
            }
        }
    },
    methods:{
        search(){
            this.loading = true;
            downloadSingle(this.query.deviceId).then(res=>{
                if(res.data != null && res.data.length>0){
                    this.productDetail = res.data[0];
                    this.query.key = this.productDetail.devicerecordkey;
                }else{
                    this.productDetail = null;
                    this.query.key = "";
                }
                this.loading = false;
            }).catch(error => {
                this.productDetail = null;
                this.query.key = "";
                this.loading = false;
            })
        },
        getHistory(){
            this.dialog.loading = true;
            downloadHistory(this.query.key).then(res => {
                if(res.data != null && res.data.length>0){
                    this.dialog.tableData =  res.data;
                    this.dialog.productDetail = this.dialog.tableData[0];
                    this.dialog.visible = true;
                }else{
                    this.dialog.tableData = [];
                   this.$message.info("查无历史记录！")
                }
                this.dialog.loading = false;
            }).catch(error => {
                this.dialog.loading = false;
            })
        },
        rowClick(row, event, column) {
            //console.log(row,  event,  column)
            this.dialog.productDetail = row;
        },
        rowStyle({row,rowIndex}) {
            let result={};
            result.cursor="pointer";
            return result;
        }
    }
}
</script>

<style scoped>

</style>
