<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.birthDate || '--' }}
                            </a-descriptions-item>
                            <a-descriptions-item label="身高">
                                {{ detailInfo.height ? detailInfo.height + "cm" : '--' }}
                            </a-descriptions-item>
                            <a-descriptions-item label="体重">
                                {{ detailInfo.weight ? detailInfo.weight + "kg" : '--' }}
                            </a-descriptions-item>
                            <a-descriptions-item label="BMI">
                                {{ detailInfo.bmi ? detailInfo.bmi: '--' }}
                            </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="detailInfo.source == 2 ? 2: 1">
                                {{ detailInfo.signedModeName || '--' }}
                            </a-descriptions-item>
                            <a-descriptions-item label="签署日期" :span="detailInfo.source == 2 ? 2: 1">
                                {{ detailInfo.parentDate || '--' }}
                            </a-descriptions-item>
                            <a-descriptions-item label="上传照片" v-if="detailInfo.source != 2">
                                <img style="cursor: pointer" width="120px" height="120px" :src="detailInfo.consentUrl"
                                     @click="showVisible=true"/>
                            </a-descriptions-item>
                            <a-descriptions-item label="签名" v-if="detailInfo.source == 2">
                                <img style="margin-left: 30px;width: auto;height: 80px;transform: rotate(-90deg)"
                                     :src="detailInfo.applySignUrl">
                            </a-descriptions-item>
                        </a-descriptions>
                    </div>

                    <div style="margin: 30px 0px">
                        <div class="divider_my"><span class="midText">问卷</span></div>
                        <div style="clear: both"></div>
                    </div>
                    <a-descriptions bordered   class="folvite_title">
                        <a-descriptions-item label="结果"  >
                            <div v-if="checkedList&&checkedList.length>0">
                                <p  v-for="item in checkedList ">{{item}}</p>
                            </div>
                            <p v-else>--</p>
                        </a-descriptions-item>
                        <a-descriptions-item label="建议服用">
                            {{ detailInfo.recommendEat || '--' }}
                        </a-descriptions-item>
                    </a-descriptions>
                    <!--发放信息-->
                    <div style="margin: 30px 0px">
                        <div class="divider_my"><span class="midText">发放信息</span></div>
                        <div style="clear: both"></div>
                    </div>
                    <a-descriptions bordered :column="3" class="folvite_title">
                        <a-descriptions-item label="发放日期">
                            {{ detailInfo.provideDate || '--' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="发放数量">
                            {{ detailInfo.provideNumber ? detailInfo.provideNumber + "瓶" : '--' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="发放医生">
                            {{ detailInfo.provideDoctorName || '--' }}
                        </a-descriptions-item>
                        <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 {getEnumByFlag} from "../../../utils/common";

export default {
    data() {
        return {
            routerParams: {},
            detailInfo: {},
            spinning: false,
            bookHtmlContent: {content: undefined},
            showVisible: false,
            plainOptions: {},
            checkedList: [],
        }
    },
    created() {
        let questionEnum = getEnumByFlag('folacin_resident_info_question');
        questionEnum.forEach(enums => {
            this.plainOptions["key" + enums.enumValue] = enums.enumName;
        });
        this.routerParams = this.$route.query;
        this.getStockListDetail()
        this.getBookHtmlContent()
    },
    methods: {
        getBookHtmlContent() {//获取用户知情书模板
            let par = {
                menuId: this.routerParams.menuId
            }
            this.$api.common.fetchConsentInfo(par).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;
                if (data.question) {
                    let questionList = data.question.split(",");
                    questionList.forEach(x => {
                        this.checkedList.push(this.plainOptions["key"+x]);
                    })
                }
            })
        },
        goBack() {
            if (process.env.NODE_ENV == "dev") {
                this.$router.push("/Home/folviteDistribution");
            } else {
                window.top.postMessage({
                    messageType: 'THIRD_PAGECHANGE',
                    name: `${this.routerParams.menuCode}`,
                    source: "yesuan"
                }, '*')
            }
        },
    },
}
</script>
<style lang="less" scoped>
.detail_title {
  padding: .1px 16px;
  border: 1px solid #F0F0F0;
  border-bottom: 0px
}

/deep/ .ant-checkbox-wrapper {
  width: 800px;
}

/deep/ .ant-checkbox-wrapper-disabled span {
  color: rgba(37, 37, 37, 1);
}
</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>
