<template>
    <div class="informedConsentForm">
        <!-- 头部 -->
        <van-nav-bar fixed title="知情同意书">
            <template #left>
                <img src="../../assets/images/back.png" alt="" @click="goBack" />
            </template>
        </van-nav-bar>

        <div class="title">
            <!-- <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经介绍，我已了解到云南省农村妇女增补叶酸项目是为降低神经管缺陷发生，提高出生人口素质的一项有益于个人、家庭、社会及国家的重要工作，是政府改善民生、构建社会主义和谐社会的一项举措。</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我知道孕妇体内叶酸缺乏，是造成神经管缺陷的重要原因。孕早期如果缺乏叶酸可导致胎儿严重畸形，此外，孕期缺乏叶酸还可导致流产、死产、未成熟儿、胎盘早剥等严重不良后果。</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;同时，我也知道服用叶酸片可能存在的不良反应:偶见过敏反应，很少发生中毒现象。有些妇女长期服用叶酸后可出现厌食、恶心、腹胀等胃肠道症状。叶酸与维生素C同服，可能抑制叶酸在胃肠中的吸收。</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经咨询，我也知道服用叶酸片只能是预防和降低神经管缺陷的发生风险，接受该服务后仍有生育神经管缺陷儿（无脑儿、脑膨出及脊柱裂等）的可能。</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经认真考虑，我同意接受管理单位提供的孕前、孕早期服用叶酸片预防神经管缺陷服务，并自愿配合做好随访等相关服务。</span> -->
            <div v-html="htmlContent"></div>
        </div>
        <div class="border_dashed"></div>

        <div class="sign_block">
            <div class="sign_block_title">
                <div>申请人签名</div>
                <div class="sign_block_reset" @click="handleRouter" v-if="!disable">
                    <img src="../../assets/images/fresh.png" alt="">
                    <span>重新签名</span>
                </div>
            </div>
            
            <div class="sign_block_content">
                <div v-if="disable" @click="handleRouter">点击在线签名</div>
                <img v-else v-for="(img, index) in imageList" :key="index" v-lazy="img" />
            </div>
        </div>
        <div class="submit_btn_block">
            <van-button @click="handleClick" :disabled="disable">提 交</van-button>
        </div>
    </div>
</template>
<script>
import {isEmpty} from '@/utils/common'
import {getInformedConsentForm} from '@/axios/api'
export default {
    data() {
        return {
            disable: true,
            htmlContent: '',
            imageList: [],
        }
    },
    created() {
        this.getEsignImg();
        this.getHtmlContent();
    },
    methods: {
        // 返回
        goBack() {
            this.$router.push('receiveApply');
        },
        handleClick() {
            this.$router.push('receiveApply');
        },
        handleRouter() {
            this.$router.push('canvas');
        },

        getEsignImg() {
            let imgUrl = window.sessionStorage.getItem('esignImg');
            if (isEmpty(imgUrl)) {
                this.disable = true;
            } else {
                this.disable = false;
                let str = imgUrl.replace('https', 'http');
                this.imageList.push(str);
            };
        },

        // 获取知情同意书内容
        getHtmlContent() {
            let unitId = JSON.parse(sessionStorage.getItem('applyUnitInfo')).unitId;
            this.$toast.open();
            getInformedConsentForm(unitId).then(res => {
                if (res.code === 'SUCCESS') {
                    if (res.data) {
                        this.htmlContent = res.data.content;
                    };
                    
                };
            }).finally(() => {
                this.$toast.close();
            });
        },
    },
}
</script>
<style lang="less" scoped>
.informedConsentForm {
    padding-top: 52px;

    .title {
        color: #595959;
        font-size: 14px;
        line-height: 22px;
        padding: 0 20px;
        // display: flex;
        // flex-direction: column;

        // span {
        //     margin: 0 20px 10px 20px;
        // }
    }

    .sign_block {
        font-size: 16px;
        color: #262626;
        margin: 0 24px;

        .sign_block_title {
            display: flex;
            justify-content: space-between;

            .sign_block_reset {
                display: flex;
                align-items: center;

                span {
                    font-size: 12px;
                    color: #595959;
                    margin-left: 4px;
                }
            }
        }

        .sign_block_content {
            margin-top: 8px;
            height: 102px;
            background-image: url('../../assets/images/sign.png');
            background-color: #EFF2F7;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: #A5AEBE;

            img {
                max-width: 102px;
                transform: rotate(-90deg);
            }
        }
    }
}
</style>