<template>
    <div>
        <a-spin tip="加载中..." :spinning="spinning">
            <a-card>
                <div>
                    <div>
                        <span style="font-size: 18px;font-weight: 600;color: #262626"> 叶酸发放登记</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 class="folvite_title">
                            <a-descriptions-item label="姓名">
                                {{detailInfo.womanName || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="证件类型">
                                {{detailInfo.womenCertificateTypeName || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="证件号码">
                                {{detailInfo.womenIdCard || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="是否曾经怀孕">
                                {{detailInfo.oncePregnantName || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="孕次">
                                {{detailInfo.pregnantNum || '--'}}
                            </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 class="folvite_title">
                            <a-descriptions-item label="姓名">
                                {{detailInfo.manName || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="证件类型">
                                {{detailInfo.menCertificateTypeName || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="证件号码">
                                {{detailInfo.menIdCard || '--'}}
                            </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 class="folvite_title">
                            <a-descriptions-item label="联系电话">
                                {{detailInfo.telephone || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="现在住址">
                                {{detailInfo.presentCodeName || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="详细地址">
                                {{detailInfo.nowAddress || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="签署方式" :span="routerParams.source == 2 ? 2: 1">
                                {{detailInfo.signedModeName || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="签署日期" :span="routerParams.source == 2 ? 2: 1">
                                {{detailInfo.parentDate || '--'}}
                            </a-descriptions-item>
                            <a-descriptions-item label="上传照片" v-if="routerParams.source != 2">
                                <img style="cursor: pointer" width="120px" height="120px" :src="detailInfo.consentUrl"
                                     @click="showVisible=true"/>
                            </a-descriptions-item>
                        </a-descriptions>
                   <!--     <div class="card_info">
                            <a-card class="book" :headStyle="{background: '#FAFAFA'}" v-if="routerParams.source == 2">
                                <div slot="title" style="text-align: center;">
                                    <span style="color: #262626;font-size: 14px">知情同意书</span>
                                </div>
                                <div>
                                    <div v-html="bookHtmlContent.content">
                                    </div>
                                </div>
                            </a-card>
                        </div>-->
                        <div v-if="routerParams.source == 2">
                            <img style="width: 100%;height: 160px" :src="detailInfo.applySignUrl">
                        </div>
                        <!--                <a-descriptions bordered layout="vertical" class="no_border">-->
                        <!--                    <a-descriptions-item label="上传照片">-->
                        <!--                        {{detailInfo.batchNumber || '&#45;&#45;'}}-->
                        <!--                    </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" class="folvite_title">
                        <a-descriptions-item label="发放日期">
                            {{detailInfo.provideDate || '--'}}
                        </a-descriptions-item>
                        <a-descriptions-item label="发放医生">
                            {{detailInfo.provideDoctorName || '--'}}
                        </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.provideRecordList"
                             :columns="columns"
                             rowKey="id"
                             :pagination="false"
                             bordered
                    >
                    </a-table>
                    <a-descriptions bordered :column="1" class="remark_info folvite_title ">
                        <a-descriptions-item label="备注">
                            {{detailInfo.remarks || '--'}}
                        </a-descriptions-item>
                    </a-descriptions>
                </div>
                <div style="text-align: center;margin-top: 40px">
                    <a-button class="ant-table-btn" @click="goBack">关闭</a-button>
                </div>
            </a-card>
        </a-spin>
        <a-modal title="查看知情同意书" :visible="showVisible" @cancel="showVisible = false" @ok="showVisible=false"
                 loading="true"
                 :maskClosable="false"
                 width="800px">
            <div>
                <img style="width: 100%" :src="detailInfo.consentUrl" height="100%"/>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import moment from 'moment';
    import {closedDetail} from "../../../utils/common";
    import router from "../../../../router";

    const columns = [
        {
            title: '供应商',
            dataIndex: 'supplierName',
            ellipsis: true
        },
        {
            title: '品牌',
            dataIndex: 'brandName',
            ellipsis: true
        },
        {
            title: '批次号',
            dataIndex: 'batchNumber',
            ellipsis: true
        },
        {
            title: '当前库存',
            dataIndex: 'number',
            ellipsis: true
        },
        {
            title: '发放数量',
            dataIndex: 'sendNumber',
            ellipsis: true
        },
    ]
    export default {
        data() {
            return {
                routerParams: {},
                detailInfo: {},
                spinning: false,
                bookHtmlContent: {content: undefined},
                columns,
                showVisible: false
            }
        },
        created() {
            this.routerParams = this.$route.query
            this.getStockListDetail()
            this.getBookHtmlContent()
        },
        methods: {
            getBookHtmlContent() {//获取用户知情书模板
                this.$api.common.fetchConsentInfo().then(({data}) => {
                    if (this.$api.utils.isBlank(data)) {
                        this.bookHtmlContent = {content: ""}
                    } else {
                        this.bookHtmlContent = data;
                    }
                })
            },
            getStockListDetail() {
                this.spinning = true
                let par = {
                    residentId: this.routerParams.id
                }
                this.$api.folviteDistributionManage.fetchFolviteDistributionDetail(par).then(({data = [], code}) => {
                    this.spinning = false;
                    this.detailInfo = data
                })
            },
            goBack() {
                this.$router.push("/Home/folviteDistribution");
                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;
    }

    .folvite_title {
        .ant-descriptions-item-label {
            width: 135px;
        }
    }

    .card_info {
        .ant-card-head-title {
            padding: 9px 0px !important;
        }

        .ant-card-head {
            min-height: 32px;
        }

        .ant-card-bordered {
            border-top: 0px !important;
            border-bottom: 0px !important;
        }
    }

    .remark_info {
        .ant-descriptions-view {
            .ant-descriptions-bordered .ant-descriptions-view {
                border: 0px !important;
            }
        }
    }
</style>