<template>
    <div>
        <mt-header title="申领结果">
            <div  slot="left" @click="goBack">
                <mt-button icon="back"></mt-button>
            </div>
        </mt-header>

        <div>
            <div style="text-align: center">
                <img src="../../assets/img/successfulApplication.png" style="width: 120px;height: 120px">
            </div>


            <div
                    class="list-data"
            >
                <div class="content" v-for="item in detailInfo" :key="item.id">
                    <div class="title_bor flex_baseline">
                        <div class="title">{{item.medicalName}}</div>
                        <div class="leftManual">本次申领
                            <span style="color: #1890FF;margin: 0px 2px">{{item.receivedNum}}</span>
                            <span>{{item.receivedUnit}}</span></div>
                    </div>
                    <div class="details">
                        <div class="item">
                            <label class="item-left">生产厂家</label>
                            <label class="item-right">{{item.company || '--'}}</label>
                        </div>
                        <div class="item">
                            <label class="item-left">类型</label>
                            <label class="item-right">{{item.breedName || '--'}}</label>
                        </div>
                        <div class="item">
                            <label class="item-left">规格</label>
                            <label class="item-right">{{item.specs || '--'}}</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loading" v-if="loading">
                <span id="load-text">{{loadText}}</span>
            </div>
         <!--   <div v-if="noDataShow">
                <NoData></NoData>
            </div>-->
        </div>

    </div>
</template>

<script>
    import {getUserCollectRecordByNo} from "../../utils/api";
    import NoData from '../component/noData';
    import { Toast,Indicator } from 'mint-ui';

    export default {
        components: {NoData},
        data() {
            return {
                loading: false,
                detailInfo: [],
                loadText:'加载中...',
                noDataShow: false,
                param: {
                    pageIndex: 0,
                    pageSize: 10
                },
                dataInfo: {},
                routerDetail: {}
            }
        },
        created() {
            this.routerDetail = this.$route.query
            this.getRecordInfo()
        },
        methods: {
            getRecordInfo() {
                Indicator.open()
                let pars = {
                   no: this.routerDetail.info,
                }
                getUserCollectRecordByNo(pars).then(({data = {}}) => {
                    Indicator.close()
                    this.detailInfo = data.data
                    console.log(this.detailInfo)
                    if (this.detailInfo.length == 0) {
                        this.noDataShow = true
                    } else {
                        this.noDataShow = false
                    }
                }).catch(res => {
                    Toast({
                        message: '系统异常，请联系客服！',
                        duration: 2000
                    });
                    Indicator.close()
                }).finally(() => {
                    Indicator.close()
                })
            },
            goBack() {
                window.history.go(-1)
            },
        },
        beforeDestroy() {
            this.detailInfo = []
        }
    }
</script>

<style scoped lang="less">
    .content {
        width: 90%;
        margin: 20px auto 0px;
        padding: 10px;
        border: 1px solid #F3F3F3;
        border-radius: 1rem;
        box-shadow: darkgrey 0px 2px 20px -10px;
        .title {
            font-weight: bold;
            line-height: 1.5;
            font-size: 14px!important;
            padding: 0px 0px 3px 0px;
            /*width: 70%;*/
        }
        .leftManual {
            font-size: 12px;
            color: #595959;
        }
    }

    .manualPel {
        color: #595959;
        font-size: 11px;
    }
    .content .title_bor {
        border-bottom: 1px solid #F3F3F3;
    }

    .content .details .item {
        line-height: 24px;
    }


    .content .details .item .item-right {
        /*float: right;*/
        margin-left: 8px;
        color: #262626;
        font-size: 11px;
    }
    .content .details .item .item-left {
        color: #595959;
        font-size: 11px;
    }
    .list-data{
        /*height: calc(100% - 40px);*/
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    .loading{
        height: 80px;
        width: 100%;
        text-align: center;
    }

</style>