<template>
    <view class="content">
        <view class="exhibition">
             <rich-text :nodes="detailsImg"></rich-text>
        </view>
        <view class="exhibition-receive">
			<view class="exhibition-receive-btn exhibition-receive-btn-50" @click="popClick">
				记录三高
			</view>
			<view class="exhibition-receive-btn exhibition-receive-btn-50">
				活动分享
			</view>
        </view>
        
        <view class="popBack" v-if="popShow"></view>
        <view class="popCont" v-if="popShow">
            <view class="popCont-title">
                <image @click="popClick" class="popCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
                <view class="popCont-title-text">
                    领取试用装
                </view>
            </view>
            <form @submit="siteform" class="While site-form">
            	<view class="site-input">
            		<label>收货人</label>
            		<input placeholder="请输入收货人姓名" name="name"></input>
            	</view>
            	<view class="site-input">
            		<label>手机号码</label>
            		<input placeholder="请输入手机号码" name="mobile" type="number"></input>
            	</view>
            	<view class="site-input">
                    <label>所在省份</label>
                    <picker @change="areasChange" :value="area.areaIndex" :range="area.areasArr" :range-key="'name'">
                        <view class="picker" v-if="area.areasArr[area.areaIndex]">
                            {{ area.areasArr[area.areaIndex].name }}
                        </view>
                    	<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
                    </picker>
                </view>
                <view class="site-input">
                    <label>所在城市</label>
                    <picker @change="cityDrop" :value="city.cityIndex" :range="city.cityArr" :range-key="'name'" class="conneColor">
                        <view class="picker" v-if="city.cityArr[city.cityIndex]">
                            {{ city.cityArr[city.cityIndex].name }}
                        </view>
                		<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
                    </picker>
                </view>
                <view class="site-input">
                    <label>所在区域</label>
                    <picker @change="regiDrop" :value="regi.regiIndex" :range="regi.regiArr" :range-key="'name'" class="conneColor">
                        <view class="picker" v-if="regi.regiArr[regi.regiIndex]">
                            {{ regi.regiArr[regi.regiIndex].name }}
                        </view>
                		<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
                    </picker>
                </view>
            	<view class="site-input">
            		<label>收货地址</label>
            		<input placeholder="请输入详细地址" name="address"></input>
            	</view>
                <view class="site-btn">
                	<button form-type="submit" :disabled="disabled" size="mini">提交申请</button>
                </view>
            </form>
        </view>
        
        <!-- 创建名片前提条件 -->
        <view class="authBack" v-if="authState"></view>
        <view class="authPop" v-if="authState">
            <image @tap="authTap" class="authPop-cloes" src="/static/icons/uricacidClose.png"></image>
            <image class="authPop-img" src="/static/imgs/authPop_img.png" mode="aspectFill"></image>
            <view class="authPop-cont">
                请先添加个人档案，成功后可领取产品
            </view>
            <view class="authBtn" @tap="authUrl">去添加</view>
        </view>
    </view>
</template>

<script>
    import { goods, Receive, create } from '@/apis/interfaces/mall'
    export default {
    	data() {
    		return {
                popShow     : false,  //弹出层
                detailsData : '',     //商品数据信息
                disabled    : false ,    // 提交按钮状态
                detailsImg  : '',
                canSample   : '',
                authState   : false,
                // 省份选择
                area: {
                    areasArr   : [],
                    areaId     : '',
                    areaIndex  : 0,
                },
                        
                // 市级选择
                city: {
                    cityArr    : [],
                    cityId     : 0,
                    cityIndex  : 0,
                },
                        
                // 区域选择
                regi: {
                    regiArr    : [],
                    regiId     : 0,
                    regiIndex  : 0,
                }
    		};
    	},
        onShow() {
            // 获取商品详情数据
            this.detailsInfo();
        },
        methods: {
            // 商品详情数据
            detailsInfo() {
            	goods(2).then(res => {
					
					console.log(res)
					
                    this.detailsData = res
                    this.detailsImg = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                    this.canSample = res.canSample
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 去登陆
            popLogin() {
                this.$Router.push({ name: 'Login' });
            },
            
            // 领取产品弹出
            popClick() {
                if(!this.detailsData.hasCase) {
                    this.authState = !this.authState
                    return
                }
                this.popShow = !this.popShow
                // 获取省市区列表
                if(this.popShow == true)this.createInfo();
            },
            
            // 去认证
            authUrl() {
                this.$Router.push({ name: 'Attestation', params: { editState: false } });
                this.authState = !this.authState
            },
            
            // 关闭认证提示弹出层
            authTap() {
                this.authState = !this.authState
            },
            
            // 省市区列表
            createInfo() {
                create().then(res => {
                    let areas         =  res,
                        areaIndex     =  this.area.areaIndex
                    this.area.areaId  = areas[areaIndex].id
                    this.area.areasArr= areas
                    this.citylist(areas[areaIndex].id)
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            },
            
            // 所在省份-下拉
            areasChange(e) {
                let area     = this.area.areasArr,
                    index    = e.detail.value,
                    atcode   = area[index].id
                if (index != this.area.areaIndex) {
                    this.area.areaIndex  = index
                    this.area.areaId     = atcode
                    // 获取市级列表
                    this.citylist(atcode)
                }
            },
            
            // 市级列表
            citylist(cityId) {
                create({
                    parent_id: cityId
                }).then(res=>{
                    let cityArr = res
                    this.city.cityId    = cityArr[0].id
                    this.city.cityArr   = cityArr
                    this.city.cityIndex = 0
                    this.regilist(cityArr[0].id)
                })
            },
            
            // 市级下拉筛选
            cityDrop(e) {
                let city     = this.city.cityList,
                    index    = e.detail.value,
                    citycode = city[index].id
                if (index != this.area.areaIndex) {
                    this.city.cityIndex = index
                    this.city.cityId    = citycode
                    
                    // 获取市级列表
                    this.regilist(citycode)
                }
            },
            
            // 区列表
            regilist(areaId) {
                create({
                    parent_id: areaId
                }).then(res=>{
                    this.regi.regiArr   = res
                    this.regi.regiId    = res[0].id
                    this.regi.regiIndex = 0
                })
            },
            
            // 区下拉筛选
            regiDrop(e) {
                let newIndex = e.detail.value
                this.regi.regiIndex  = newIndex
                this.regi.regiId     = this.regi.regiArr[newIndex].id
            },
            
            // 表单提交
            siteform(val) {
                let newVal = val.detail.value
                Receive({
                    name: newVal.name,
                    mobile: newVal.mobile,
                    province_id: this.area.areaId,
                    city_id: this.city.cityId,
                    district_id: this.regi.regiId,
                    address: newVal.address
                }).then(res => {
                    uni.showToast({
                    	title: res,
                    	icon: "none"
                    })
                    this.disabled = true
                    this.popShow = false
                    this.canSample = false
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon: "none"
                	})
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
    }
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
    }
    
    .site-form {
        display: block;
    }
    
    .site-input {
        padding: 0 0 0 200rpx;
        position: relative;
        line-height: 90rpx;
        min-height: 90rpx;
        border-bottom: 2rpx solid #f2f2f2;
        label {
            position: absolute;
            left: 30rpx;
            top: 0;
        }
        input {
            height: 90rpx;
        }
        .site-input-arrow {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            right: 0;
            top: 30rpx;
        }
    }
    
    .exhibition {
        border-bottom: 120rpx solid transparent;
        .exhibition-img {
            width: 100vw;
        }
    }
    
    .exhibition-receive {
        position: fixed;
		display: flex;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120rpx;
        background-color: #FFFFFF;
        padding: 17rpx 20rpx;
        box-sizing: border-box;
        z-index: 9;
        .exhibition-receive-btn {
            background-color: $mian-color;
            color: #FFFFFF;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            border-radius: 10rpx;
            &.active {
                background-color: #d5d5d5;
                color: #a9a9a9;
            }
        }
		.exhibition-receive-btn-50{
			width: 50%;
			margin: 0 10px;
		}
    }
    
    .site-btn button[size="mini"] {
        width: 100%;
        background: #6e79ec;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        color: white;
        padding: 0;
        margin-top: 60rpx;
    }
    
    // 弹出
    .popBack {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: .4);
        left: 0;
        top: 0;
        z-index: 99;
    }
    
    .popCont {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        background-color: #FFFFFF;
        z-index: 100;
        height: 70vh;
        overflow-y: scroll;
        border-radius: 30rpx 30rpx 0 0;
        padding: 30rpx;
        box-sizing: border-box;
        .popCont-title {
            border-bottom: 2rpx solid #F2F2F2;
            padding-bottom: 30rpx;
            display: flex;
            line-height: 54rpx;
            position: relative;
            .popCont-title-close {
                width: 40rpx;
                height: 40rpx;
                margin-top: 7rpx;
            }
            .popCont-title-text {
                width: 100%;
                text-align: center;
            }
        }
     }/* 认证弹出 */
    .authBack {
        background: rgba(0, 0, 0, .35);
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 9;
    }
    
    .authPop {
        background-color: #ffffff;
        position: fixed;
        left: 50%;
        top: 50%;
        width: 400rpx;
        height: 500rpx;
        margin-left: -200rpx;
        margin-top: -250rpx;
        z-index: 10;
        border-radius: 10rpx;
        text-align: center;
        padding: 40rpx 0;
        box-sizing: border-box;
    }
    
    .authPop-img {
        width: 200rpx;
        height: 200rpx;
    }
    
    .authPop-cont {
        padding: 0 40rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        line-height: 44rpx;
        color: #999;
        margin-bottom: 40rpx;
    }
    
    .authBtn {
        background: #6d79ec;
        margin: 0 40rpx;
        color: white;
        font-size: 30rpx;
        line-height: 74rpx;
        border-radius: 6rpx;
        width: calc(100% - 80rpx);
        text-align: center;
    }
    
    .authPop-cloes {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 11;
        width: 36rpx;
        height: 36rpx;
    }
</style>
