<template>
    <div>
        <a-spin tip="加载中..." :spinning="spinning">
            <a-card>
        <div>
           <div>
               <span style="font-size: 18px;font-weight: 600;"> 叶酸发放登记</span>
           </div>
            <div style="margin: 30px 0px">
                <div class="divider_my"><span class="midText">居民信息</span></div>
            </div>
            <div style="clear: both"></div>
            <div style="margin-top: 16px">
                <div class="detail_title" >
                        <div class="divider_my_dashed">
                            <span class="midText"  style="font-size: 14px;color: #FF4D80;">女方信息</span>
                        </div>
                    <div style="clear: both"></div>
                </div>
                <a-descriptions bordered>
                <a-descriptions-item label="姓名">
                    {{detailInfo.medicalName || '--'}}
                </a-descriptions-item>
                <a-descriptions-item label="证件类型">
                    {{detailInfo.breedName || '--'}}
                </a-descriptions-item>
                <a-descriptions-item label="证件号码">
                    {{detailInfo.batchNumber || '--'}}
                </a-descriptions-item>
                <a-descriptions-item label="是否曾经怀孕">
                    {{detailInfo.expireDate || '--'}}
                </a-descriptions-item>
                <a-descriptions-item label="孕次">
                    {{detailInfo.expireDate || '--'}}
                </a-descriptions-item>
            </a-descriptions>
                <div class="detail_title" style="border-top: 0px">
                    <div class="divider_my_dashed">
                        <span class="midText"  style="font-size: 14px;color: #FF4D80;">男方信息</span>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <a-descriptions bordered>
                    <a-descriptions-item label="姓名">
                        {{detailInfo.medicalName || '--'}}
                    </a-descriptions-item>
                    <a-descriptions-item label="证件类型">
                        {{detailInfo.breedName || '--'}}
                    </a-descriptions-item>
                    <a-descriptions-item label="证件号码">
                        {{detailInfo.batchNumber || '--'}}
                    </a-descriptions-item>
                </a-descriptions>
                <div class="detail_title" style="border-top: 0px">
                    <div class="divider_my_dashed">
                        <span class="midText"  style="font-size: 14px;color: #FF4D80;">其他信息</span>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <a-descriptions bordered>
                    <a-descriptions-item label="联系电话">
                        {{detailInfo.medicalName || '--'}}
                    </a-descriptions-item>
                    <a-descriptions-item label="现在住址">
                        {{detailInfo.breedName || '--'}}
                    </a-descriptions-item>
                    <a-descriptions-item label="详细地址">
                        {{detailInfo.batchNumber || '--'}}
                    </a-descriptions-item>
                    <a-descriptions-item label="签署方式">
                        {{detailInfo.batchNumber || '--'}}
                    </a-descriptions-item>
                    <a-descriptions-item label="签署日期">
                        {{detailInfo.batchNumber || '--'}}
                    </a-descriptions-item>
                </a-descriptions>
                <a-descriptions bordered layout="vertical" class="no_border">
                    <a-descriptions-item label="上传照片">
                        {{detailInfo.batchNumber || '--'}}
                    </a-descriptions-item>
                </a-descriptions>
            </div>

            <div style="margin: 30px 0px">
                <div class="divider_my"><span class="midText">发放信息</span></div>
            </div>
            <div style="clear: both"></div>
            <a-descriptions bordered :column="2">
                <a-descriptions-item label="发放日期">
                    {{detailInfo.medicalName || '--'}}
                </a-descriptions-item>
                <a-descriptions-item label="发放医生">
                    {{detailInfo.breedName || '--'}}
                </a-descriptions-item>
                <a-descriptions-item label="备注">
                    {{detailInfo.breedName || '--'}}
                </a-descriptions-item>
            </a-descriptions>
            <div class="detail_title" style="border-top: 0px">
                <div class="divider_my_dashed">
                    <span class="midText"  style="font-size: 14px;color: #FF4D80;">叶酸发放种类</span>
                </div>
                <div style="clear: both"></div>
            </div>
            <a-table :dataSource="detailInfo.tableData"
                     :columns="columns"
                     rowKey="id"
                     :pagination="false"
                     bordered
            >
            </a-table>
        </div>
        <div style="text-align: center;margin-top: 40px">
            <a-button @click="goBack">关闭</a-button>
        </div>
            </a-card>
        </a-spin>
    </div>
</template>
<script>
    import moment from 'moment';
    import {closedDetail} from "../../../utils/common";
    const columns = [
        {
            title: '供应商',
            dataIndex: 'medicineName',
            ellipsis: true
        },
        {
            title: '品牌',
            dataIndex: 'typeName',
            ellipsis: true
        },
        {
            title: '批次号',
            dataIndex: 'factoryName',
            ellipsis: true
        },
        {
            title: '当前库存',
            dataIndex: 'batchNumber',
            ellipsis: true
        },
        {
            title: '发放数量(瓶)',
            dataIndex: 'specs',
            ellipsis: true
        },
    ]
    export default {
        data() {
            return {
                routerParams: {},
                detailInfo: {},
                spinning: false,
                columns
            }
        },
        created() {
            this.routerParams = this.$route.query
            this.getStockListDetail()
        },
        methods: {
            getStockListDetail() {
                this.spinning = true
                let par = {
                    id: this.routerParams.id
                }
                this.$api.stockManage.fetchInStockLisDetail(par).then(({data = [], code}) => {
                    this.spinning = false
                    this.detailInfo = data
                })
            },
            goBack() {
                closedDetail('/inStock/inStockManageDetail', '/Home/folviteDistribution')
            }
        },
    }
</script>
<style lang="less" scoped>
    .detail_title {
        padding: .1px 16px;
        border: 1px solid #F0F0F0;
        border-bottom: 0px
    }
</style>

<style lang="less">
    .no_border {
        border-top: 0px;
    }
</style>