<template>
    <div class="choiceContraceptives">
        <mt-header title="选择药具">
            <div  slot="left" @click="goBack">
                <mt-button icon="back"></mt-button>
            </div>
        </mt-header>

        <div class="content-list"  v-if="!noDataShow">
            <div class="visit_head">
                <input id="userName" type="text"  v-model="username"  placeholder="请输入用户姓名"/>
            </div>
             <div
                     class="list-data"
                     v-infinite-scroll="loadMore"
                     :infinite-scroll-disabled="loading"
                     infinite-scroll-distance="10"
             >
            <div class="content-item ui-flex justify-center center"
                 v-for="(item,index) in detailInfo"
                 :key="item.id"
            >
                <div style="width: 100%">
                    <label :for="index">
                        <div class="allflex">
                        <div class="check-btn">
                         <input type="radio" :id="index" :value="JSON.stringify(item)" v-model="checkedMedical">
                        </div>
                        <div class="cell" style="width: 85px;">
                            <img :src="item.imgUrl"/>
                        </div>
                        <div class="tradeInfo" style="flex-grow: 1">
                            <div class="tradeName">{{item.medicineName}}</div>
                            <div style="margin-top: 5px;">
                                <label style="float: left;margin-bottom: 0px">数量：{{item.unit}}</label>
                                <label style="float: right;margin-right: 15px;margin-bottom: 0px">规格：{{item.specs}}</label>
                                <div style="clear: both"></div>
                            </div>
                            <div style="margin-top: 5px">有效期至：{{item.expireDate}}</div>
                            <div style="margin-top: 5px">生产厂家：{{item.factoryName}}</div>
                        </div>
                        </div>
                    </label>
                    <div style="clear: both"></div>
                </div>

            </div>
             </div>
        </div>
        <div class="sub-badReaction" v-if="!noDataShow">
            <mt-button type="primary" @click="receiveContraceptives">确认领取</mt-button>
        </div>
        <div v-if="noDataShow">
            <div class="success-img">
                <img src="../assets/img/noHave.png"/>
                <div class="tips">
                    当前网点缺货，请前往其他网点
                </div>
            </div>
            <div class="backHome">
                <mt-button type="primary" @click="backHome">返回首页</mt-button>
            </div>
        </div>


    </div>
</template>

<script>
    import {addMedicalRecord, getStockInfo} from "../utils/api";
    import {callMobile} from "../utils/common";
    import { Toast } from 'mint-ui';
    import {receiveWay} from "../utils/dictionaries";
    import { Indicator } from 'mint-ui';

    export default {
        name: "choiceContraceptives",
        data(){
            return{
                username: '',
                routerDetail:{},
                loading: false,
                checkedMedical:'',
                detailInfo: [],
                loadText:'加载中...',
                noDataShow: false,
                param: {
                    pageIndex: 0,
                    pageSize: 10
                }
            }
        },
        methods:{
            getStockListInfo(callBack) {
                this.routerDetail = this.$route.query
                let par = {
                    relationId: this.routerDetail.id,
                    ...this.param
                }
                getStockInfo(par).then(({data = {}}) => {
                    const {dataList = []} = data.data
                    this.detailInfo = this.detailInfo.concat(dataList)
                    if (this.detailInfo.length == 0) {
                        this.noDataShow = true
                    } else {
                        this.noDataShow = false
                    }
                    if (data.data && data.data.length < this.param.pageSize) {
                        this.loadText = '暂无更多数据'
                    } else {
                        this.loading = false
                    }
                    callBack && callBack()
                }).finally(() => {
                    this.loading = false
                })
            },
            loadMore() {
                this.loading = true
                this.param.pageIndex += 1
                this.getStockListInfo()
            },
            backHome(){
                callMobile("goIndex", {});
                },
            goBack() {
              window.history.go(-1)
            },
            receiveContraceptives(){
                if(this.checkedMedical == '') {
                    return  Toast({
                        message: '请先选择药具！',
                        duration: 2000
                    });
                } else {
                    Indicator.open();
                    let pars = JSON.parse(this.checkedMedical)
                    let info = JSON.parse(window.sessionStorage.getItem('mobileTokenIno'))
                    const {phone = '', userId =''} = info
                    const {id, expireDate, produceDate, ...other } = pars
                    let par = {
                        residentName: this.username,
                        residentId: userId,
                        telephone: phone,
                        networkId: this.routerDetail.id,
                        number: 1,
                        receiveWay: receiveWay[0].id,
                        ...other
                    }
                    addMedicalRecord(par).then(({data}) => {
                        Indicator.close();
                        if (data.code == 'SUCCESS') {
                            this.$router.push("/receiveSuccess");
                        } else {
                            Toast({
                                message: '系统异常，请联系客服！',
                                duration: 2000
                            });
                        }
                    })
                }
            }
        },
        beforeDestroy() {
            this.detailInfo = []
        }
    }
</script>

<style scoped lang="less">
/*    .visit_head span {
        position:absolute;
        left:0;
        margin-top: 20px;
        height: 35px;
    }*/
    .visit_head {
        :-moz-placeholder {
            text-align: center;
        }

        ::-moz-placeholder {
            text-align: center;
        }

        ::-webkit-input-placeholder {
            text-align: center;
        }

        :-ms-input-placeholder {
            text-align: center;
        }
    }
  .visit_head input[type=text] {
        text-align:center;
        height: 35px;
        margin-top: 10px;
        border: none;
        outline: none;
        width: 100%;
        padding-left: 5px;
        border-bottom: 1px solid #F0F0F0;
        color: #6E6166;
        outline: none;

    }
    .allflex {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 103px;
    }
    .tips{
        color: #747971;
        font-size: 14px;
        padding: 10px 30px 20px;
    }
    .success-img{
        text-align: center;
        padding-top: 100px;
    }
    .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);
    }

    .backHome {
        position: fixed;
        z-index: 2;
        left: calc(50% - 155px);
    }

    .backHome .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);
    }
    .choiceContraceptives{
        width: 100%;
        height: 100%;
    }
    .content-list{
        width: 100%;
        height: calc(100% - 108px);
    }
    .content-item{
        padding-top: 10px;
        border-top: 1px solid #F5F6F8;
        border-bottom: 5px solid #F5F6F8;
        height: 150px;
    }
    .content-item img{
        width: 85px;
        max-height: 100px;
        float: left;
        display: inline-block;
        vertical-align: middle;
    }
    .tradeInfo{
        float: left;
        width:calc(100vw - 130px);
        padding-left: 10px;
    }
    .tradeName{
        font-size: 14px;
    }
    .ui-flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
        box-sizing: border-box
    }

    .ui-flex.justify-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
    .ui-flex.center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
    .check-btn{
        float: right;
        width: 40px;
        height: 100%;
    }
    .check-btn input{
        margin-top: 60px;
        margin-left: 10px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        font-size: 14px;
        position: relative;
    }

    .check-btn input[type=radio]:after {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 0;
        content: " ";
        background-color: #fff;
        color: #fff;
        display: inline-block;
        visibility: visible;
        border: 1px solid #999F97;
        padding: 0px 3px;
        border-radius: 50%;
    }

    .check-btn input[type=radio]:checked:before {
        text-align: center;
        content: "✓";
        display: block;
        position: relative;
        background-color: #00CA9D;
        width: 20px;
        height: 20px;
        top: 0px;
        left: 0px;
        color: #fff;
        font-weight: 400;
        border-radius: 50%;
        z-index: 1;
    }
    .list-data{
        /*height: calc(100% - 40px);*/
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
</style>
