<template>
    <div>
        <mt-header title="填写随访">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="remarks">
            注：药具领取前需填写之前的使用情况
        </div>
        <form>
            <div class="subject">
                <mt-radio
                        title="使用是否满意"
                        align="left"
                        v-model="formData.isAgree"
                        :options="options1" @change="changeAgree">
                </mt-radio>
                <div v-if="formData.isAgree==='1'" style="margin-top: 8px">
                    <input type="text" style="height: 33px" v-model.trim="formData.disagreeReason" @blur="blurDisagreeReason" placeholder="请填写原因"/>
                    <label class="checkMsg" v-if="formData.checkDisagreeReason">请填写不满意原因</label>
                </div>
                <mt-radio
                        title="有无不良反应"
                        align="left"
                        v-model="formData.isBadReaction"
                        :options="options2"
                        @change="changeBad"
                >
                </mt-radio>
                <div v-if="formData.isBadReaction==='1'" class="badReaction">
                    <div style="font-weight: bold; color: #888">请选择不良反应(多选)：</div>
                    <div v-for="item in options3" :key="item.value" style="margin-top: 7px">
                        <input type="checkbox" v-model="formData.badReaction" @change="changeBadReaction" :id="item.value" :value="item.value" class="hidden"/>
                        <span></span>
                        <span class="txt">{{item.label}}</span>
                    </div>
                    <label class="checkMsg" v-if="formData.checkBadReaction">请选择不良反应</label>
                    <div v-if="formData.badReaction.includes(9)">
                        <input type="text"  v-model="formData.otherBadReaction" @blur="blurOtherBadReaction" placeholder="请填写其他不良反应"/>
                        <label class="checkMsg" v-if="formData.checkOtherBadReaction">请填写其他不良反应</label>
                    </div>
                </div>
            </div>
        </form>
        <div class="sub-badReaction">
            <mt-button type="primary" @click="subReturnVisit">提 交</mt-button>
        </div>
    </div>
</template>

<script>
    import {addVisitRecord} from "../utils/api";
    import { Toast } from 'mint-ui';
    import { Indicator } from 'mint-ui';

    export default {
        name: "returnVisit",
        data() {
            return {
                options1: [{label: '满意', value: '0'}, {label: '不满意', value: '1'}],
                options2: [{label: '没有', value: '0'}, {label: '有', value: '1'}],
                options3: [
                    {label: '恶心呕吐', value: 1},
                    {label: '阴道点滴出血', value: 2},
                    {label: '月经过少或闭经', value: 3},
                    {label: '面部色素沉着', value: 4},
                    {label: '体重增加', value: 5},
                    {label: '其他', value: 9}],
                formData: {
                    isAgree:'0',
                    disagreeReason: '',
                    isBadReaction:'0',
                    badReaction: [],
                    otherBadReaction: '',
                    checkDisagreeReason:false,
                    checkOtherBadReaction:false,
                    checkBadReaction:false
                }
            }
        },
        methods:{
            changeAgree() {
             if(this.formData.isAgree == 0) {
                 this.formData.disagreeReason = ''
             }
            },
            blurDisagreeReason(){
                this.formData.checkDisagreeReason=this.formData.disagreeReason===''||this.formData.disagreeReason===undefined;
            },
            blurOtherBadReaction(){
                this.formData.checkOtherBadReaction=this.formData.otherBadReaction===''||this.formData.otherBadReaction===undefined;
            },
            changeBad() {
                if (this.formData.isBadReaction == 0) {
                    this.formData.badReaction = []
                    this.formData.otherBadReaction = ''
                }
            },
            changeBadReaction(){
                this.formData.checkBadReaction=this.formData.badReaction.length<1|| this.formData.badReaction===undefined;
            },
            subReturnVisit(){
                let flag=true;
                if(this.formData.isAgree==='1'){
                    this.blurDisagreeReason();
                    if(this.formData.checkDisagreeReason){
                        flag=false;
                    }
                }
                if(this.formData.isBadReaction==='1'){
                    this.changeBadReaction();
                    if(this.formData.checkBadReaction){
                        flag=false;
                    }
                    if(this.formData.badReaction.includes(9)){
                        this.blurOtherBadReaction();
                        if(this.formData.checkOtherBadReaction){
                            flag=false;
                        }
                    }
                }
                /*验证完毕*/
                if(flag){
                    Indicator.open()
                    let badInfo = this.formData.badReaction.join()
                    let info = JSON.parse(window.sessionStorage.getItem('mobileTokenIno'))
                    const {phone = '', userId =''} = info
                    let par = {
                        residentId: userId,
                        telephone: phone,
                        satisfied: this.formData.isAgree,
                        satisfiedReason: this.formData.disagreeReason,
                        bad: this.formData.isBadReaction,
                        badReason: badInfo,
                        inputType: 0,
                        badOther: this.formData.otherBadReaction
                    }
                    addVisitRecord(par).then(({data}) => {
                        Indicator.close()
                        if (data.code == 'SUCCESS') {
                            Toast({
                                message: '填写成功！',
                                duration: 2000
                            });
                          window.history.go(-1)
                        } else {
                            Toast({
                                message: '系统异常，请联系客服！',
                                duration: 2000
                            });
                        }
                    })
                }else {
                    return false;
                }
            }
        }
    }
</script>

<style lang="less">

    .checkMsg{
        color: red;
    }
    .remarks {
        background-color: #F5F6F8;
        padding: 5px 0px 5px 20px;
    }

    .subject {
        padding: 5px 0px 5px 20px;
        height: calc(100vh - 144px);
        overflow: auto;
    }

    .subject .mint-cell:not(:last-child) {
        float: left;
    }

    .subject input[type=text] {
        border: none;
        outline: none;
        width: 100%;
        padding-left: 5px;
        border-bottom: 1px solid #F0F0F0;
        color: #6E6166;
        outline: none;

    }

    .badReaction {
        width: 100%;
/*
        border-top: 1px solid #F0F0F0;
*/
        padding-top: 10px;
        padding-left: 5px;
    }

    .hidden {
        opacity: 0;
        position: absolute;
        z-index: 11;
    }
    input[type=checkbox] + span {
        display: inline-block;
        height: 16px;
        width: 16px;
        border-radius: 3px;
        background-color: white;
        border: 1px solid #cccccc;
    }
    input[type=checkbox]:checked + span {
        background-color: #00CA9D;
    }
    .txt {
        position: relative;
        top: -3px;
        left: 3px;
    }
    .sub-badReaction {
        position: fixed;
        z-index: 2;
        left: calc(50% - 155px);
        bottom: 20px;
    }

    .sub-badReaction .mint-button {
        width: 311px;
        height: 44px;
        background: linear-gradient(242deg, #dff9b9 -27%, #1bd09f 85%);
        border-radius: 22px;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    }
</style>