<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script src="/static/js/jquery-3.5.1.min.js?v="+Math.random()></script>
    <script src="/static/js/common.js?v="+Math.random()></script>
    <script>
        document.write('<link href="/static/css/html5/index/index.css?v=' + Math.random() + '" rel="stylesheet" type="text/css"/>');
        document.write('<link href="/static/css/html5/index/question.css?v=' + Math.random() + '" rel="stylesheet" type="text/css"/>');
    </script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?0305f34866fc4fe377f1bec6dc84d92f";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div class="container" v-cloak>
    <div v-show="isFinish == 0">
        <div class="content">
            <div class="item">
                <span>姓名</span>
                <input type="text" class="input_val" placeholder="请输入" v-model="form.patientName">
            </div>
            <div class="item">
                <span>性别</span>
                <div class="radio-box float">
                    <input class="radio" v-model="form.sex" type="radio" name="sex" value="1"><div>男</div>
                    <input class="radio" v-model="form.sex" type="radio" name="sex" value="2"><div>女</div>
                </div>
            </div>
            <div class="item">
                <span>手机号</span>
                <input type="text" class="input_val" v-model="form.phone" placeholder="请输入">
            </div>
            <div class="item">
                <span>出生日期</span>
                <el-date-picker
                        v-model="form.dateOfBirth"
                        type="date"
                        class="input_val"
                        :picker-options="expireTimeOPtion"
                        @change="getAge(form.dateOfBirth)"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择">
                </el-date-picker>
            </div>
            <div class="item">
                <span>年龄</span>
                <input type="text" class="input_val" readonly v-model="form.age">
            </div>
            <div class="item">
                <span>指导医生</span>
                <input type="text" class="input_val" v-model="form.doctorName" placeholder="请输入">
            </div>
        </div>
        <div class="footer">
            <button @click="submitInfo()">提交</button>
        </div>
    </div>
    <div v-show="isFinish == 1" class="questionBox">
        <div v-show="isFirst ==1 && questionList.length!=0">
            <p class="titleTip">问卷一</p>
            <div class="questionList" v-for="(item,i) in questionList">
                <div class="question_title">
                    <span>{{i+1}}.</span>
                    <span class="question_title_text">{{item.quTitle}}</span>
                </div>
                <div class="answerList">
                    <div class="answerList_option" v-for="(key,index) in item.option">
                        <input class="radio" type="radio" @change="getAnswer(item.quId,key)" :name="'sex'+item.quId" :value="key.optionId">
                        <span class="answerList_option_text">
                        <span class="answerList_option_sel">{{key.option}}.</span>
                        <span>{{key.optionTitle}}</span>
                    </span>
                    </div>
                </div>
            </div>
            <div class="footer">
                <button @click="submit()">提交</button>
            </div>
        </div>
        <div v-show="isFirst == 2 && questionList2.length!=0">
            <p class="titleTip">问卷二</p>
            <div class="questionList" v-for="(item,i) in questionList2">
                <div class="question_title">
                    <span>{{i+1}}.</span>
                    <span class="question_title_text">{{item.quTitle}}</span>
                </div>
                <div class="answerList">
                    <div class="answerList_option" v-for="(key,index) in item.option">
                        <input class="radio" type="radio" @change="getAnswer2(item.quId,key)" :name="'sex'+item.quId" :value="key.optionId">
                        <span class="answerList_option_text">
                        <span class="answerList_option_sel">{{key.option}}.</span>
                        <span>{{key.optionTitle}}</span>
                    </span>
                    </div>
                </div>
            </div>
            <div class="footer">
                <button @click="submit2()">提交</button>
            </div>
        </div>
    </div>
    <div v-show="isFinish == 2" class="finishList">
        <div>
            <div>
                <p class="finishTitle">问卷一结果：</p>
                <p>得分：<em class="fenshu">{{scoreAll}}</em></p>
                <p v-if="scoreAll<16">
                    提示：总分<16分，建议您避免吸烟、生物燃料等危险因素，保持运动，保护健康。
                </p>
                <p v-if="scoreAll>=16">
                    提示：总分≥16分，需要进一步检查明确是否患有慢阻肺。
                </p>
            </div>
            <div style="border-top: 1px solid #ccc;margin-top: 30px;">
                <p class="finishTitle">问卷二结果：</p>
                <p>得分：<em class="fenshu">{{scoreAll2}}</em></p>
                <p v-if="scoreAll2>=5">
                    提示：如果您的总分≥5分，说明您的呼吸问题可能是慢性阻塞性肺疾病(COPD)导致。慢阻肺通常被称为慢性支气管炎和/或肺气肿,是一种缓慢进展的严重肺病。虽然慢阻肺不能治愈，但它是可以控制的。 请将这份结果报告拿给医生看。您的得分越高,说明您有慢阻肺的可能性越大。医生可以做个简单的呼吸测试(也称为肺功能测定)，帮助评价您的呼吸状况。
                </p>
                <p v-if="scoreAll2<5">
                    提示：如果您的总分<5分，而且您有呼吸问题,请将这份结果报告拿给医生看。医生会帮助评估您呼吸问题的类型。
                </p>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/ucenter.js?v="+Math.random()></script>
<script src="/static/js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    document.write('<script src="/static/js/h5/index/index.js?v=' + Math.random() + '"><\/script\>');
</script>

</html>
