<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" :column="6">
              <a-descriptions-item label="姓名" :span="2">
                {{ detailInfo.womanName || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="证件类型" :span="2">
                {{ detailInfo.womenCertificateTypeName || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="证件号码" :span="2">
                {{ detailInfo.womenIdCard || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="出生日期" :span="2">
                {{ detailInfo.birthDate || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="联系电话" :span="2">
                {{ detailInfo.telephone || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="身高" :span="2">
                {{ detailInfo.height ? detailInfo.height + "cm" : '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="体重" :span="2">
                {{ detailInfo.weight ? detailInfo.weight + "kg" : '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="BMI" :span="2">
                {{ 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" :column="6">
              <a-descriptions-item label="户籍地址" :span="2">
                {{ detailInfo.registeredCodeName || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="户籍地址详细" :span="2">
                {{ detailInfo.permanentAddress || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="现住址" :span="2">
                {{ detailInfo.presentCodeName || '--' }}
              </a-descriptions-item>

              <a-descriptions-item label="现住址详细" :span="2">
                {{ detailInfo.nowAddress || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="签署方式" :span="2">
                {{ detailInfo.signedModeName || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="签署日期" :span="2">
                {{ detailInfo.parentDate || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="上传照片" v-if="detailInfo.source != 2" :span="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" :span="4">
                <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" :column="4">
            <a-descriptions-item label="结果" :span="2">
              <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="建议服用" :span="2">
              {{ 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]);
          })
        }
      }).catch(res => {
        this.spinning = false;
      })
    },
    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>
