<template>
    <div class="choiceContraceptives">
        <mt-header title="选择药具">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="content-list"  v-if="dataList && dataList.length>0">
            <div class="content-item ui-flex justify-center center">
                <div class="cell">
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1926305167,3823812322&fm=26&gp=0.jpg"/>
                </div>
                <div class="tradeInfo">
                    <div class="tradeName">天然乳胶避孕套超薄装天然乳胶避孕套超薄装</div>
                    <div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：86</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格：10只/盒</label><div style="clear: both"></div></div>
                    <div>有效期至：2023-11-22</div>
                    <div>生产厂家：程程药业有限公司</div>
                </div>
                <div class="check-btn">
                    <input type="radio" id="1" value="1" >
                </div>
                <div style="clear: both"></div>
            </div>
            <div class="content-item ui-flex justify-center center">
                <div class="cell">
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1926305167,3823812322&fm=26&gp=0.jpg"/>
                </div>
                <div class="tradeInfo">
                    <div class="tradeName">天然乳胶避孕套超薄装天然乳胶避孕套超薄装</div>
                    <div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：86</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格：10只/盒</label><div style="clear: both"></div></div>
                    <div>有效期至：2023-11-22</div>
                    <div>生产厂家：程程药业有限公司</div>
                </div>
                <div class="check-btn">
                    <input type="radio" id="2" value="2"  >
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div class="sub-badReaction" v-if="dataList && dataList.length>0">
            <mt-button type="primary" @click="receiveContraceptives">确认领取</mt-button>
        </div>
        <div v-if="dataList && dataList.length===0">
            <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>
    export default {
        name: "choiceContraceptives",
        data(){
            return{
                dataList:[]
            }
        },
        methods:{
            backHome(){
                this.$router.push("/");
            },
            receiveContraceptives(){
                this.$router.push("/receiveSuccess");
            }
        }
    }
</script>

<style scoped>
    .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(100% - 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;
    }
</style>