<template>
    <nav-bar :navbar-data="navbarData"></nav-bar>
    <view class="myopia-container" :style="{marginTop: height +'px', height: 'calc(100vh - '+ height +'px)'}">
        <view class="myopia-header" :style="'background: url('+ imgHost +'/images/icon/myopia-header-bg.png);'">
            <text class="header-t">近视防控</text>
            <text class="header-desc">检查项目：视力、屈光、身高、体重、血压等；</text>
        </view>
        <view class="myopia-content">
            <view class="scan" @tap="onScaning">
                <image :src="imgHost + '/images/icon/myopia-scan.png'"></image>
                <text>点击扫描</text>
            </view>

            <view class="myopia-form">
                <view class="form-item">
                    <view class="label">
                        <text class="require">*</text>
                        <text>姓名</text>
                    </view>
                    <view class="form-item-input">
                        <input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size: 28rpx;" data-type="name" @input="inputChange" />
                    </view>
                </view>
                <view class="form-item">
                    <view class="label">
                        <text class="require">*</text>
                        <text>查询码</text>
                    </view>
                    <view class="form-item-input">
                        <input type="text" placeholder="请输入身份证号/查询码" placeholder-style="color:#999;font-size: 28rpx;" data-type="code" @input="inputChange" />
                    </view>
                </view>
                <view class="form-item form-btn-item">
                    <button class="form-btn" @tap="submit">确认查询</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import navBar from '@/components/navBar/index'
const app = getApp();
export default {
    components: {
        'nav-bar': navBar
    },
    data() {
        return {
            height: app.globalData.height,
            windowHost: httpConfig && httpConfig.ipDeault,
            imgHost: httpConfig && httpConfig.imgHost,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "近视防控"
            },
            name: '',
            code: ''
        }
    },
    onLoad() {
      // 支付宝独立处理
      // #ifdef MP-ALIPAY
      uni.hideBackHome(); // 隐藏
      Util.resetGlobalDataParams(app,['alipayQuery'])
      // #endif
    },
    methods: {
        onScaning() {
            const self = this
            uni.scanCode({
                onlyFromCamera: true,
                success(res) {
                  console.log(res)
                    if (res.result) {
                        console.log(self.getQueryString(res.result))
                        self.toPage(self.getQueryString(res.result))
                    }
                }
            })
        },
        getQueryString(url) {
            // let params = url.split('?')[1]
            //     params = params.split('=')[1]
            // if (params != null) return params;
            // return null;

            let params = url.split('?')[1]
            let paramsData = params.split('&')[0]
            let paramsExtra = params.split('&')[1]
            let paramsNOStr = paramsData.split('=')[1]
            let paramsNOObj = JSON.parse(paramsNOStr)
            console.log(Object.prototype.toString.call(paramsNOObj)) //变量类型查看
            let _paramsNO = paramsNOObj.no
            if (_paramsNO != null) return _paramsNO;
            return null;
        },
        inputChange(e) {
            const type = e.currentTarget.dataset.type
            if (type == 'name') {
                this.name = e.detail.value
            }
            if (type == 'code') {
                this.code = e.detail.value
            }
        },
        checkInput() {
            const { name, code } = this
            if (!name) {
                Util.showToast('请输入姓名', 'error')
                return false
            }
            if (!code) {
                Util.showToast('请输入查询码', 'error')
                return false
            }
            return true
        },
        submit() {
            const { code } = this
            if (this.checkInput()) {
                this.toPage(code)
            }
        },
        toPage(no) {
            uni.navigateTo({
                url: '/pages/index/pages/myopiaPreventionControl/desc/myopiaPreventionControlDesc?no=' + no
            })
        },
    }
}
</script>

<style>
.placholder {
  color: #cccccc;
}
.myopia-container {
  display: flex;
  flex-direction: column;
}

.myopia-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 279rpx;
  padding: 0 26rpx;
}

.header-t {
  font-size: 48rpx;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 32rpx;
  margin-bottom: 20rpx;
}

.header-desc {
  font-size: 24rpx;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 32rpx;
}

.myopia-content {
  flex: 1;
  background: #FFFFFF;
  padding-top: 80rpx;
  border-radius: 30rpx 30rpx 30rpx 0px;
  margin-top: -25rpx;
}

.myopia-content .scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 151rpx;
  height: 151rpx;
  margin: 0 auto;
  background: #199ADF;
  box-shadow: 0px 1rpx 18rpx 0px rgba(20, 129, 197, 0.34);
  border-radius: 50%;
}

.myopia-content .scan image {
  width: 55rpx;
  height: 52rpx;
}

.myopia-content .scan text {
  font-size: 22rpx;
  font-weight: 400;
  color: #FFFFFF;
  margin-top: 16rpx;
}

.myopia-form {
  display: flex;
  flex-direction: column;
}

.myopia-form .form-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 24rpx;
  margin-bottom: 40rpx;
}

.myopia-form .form-item .label {
  margin-bottom: 30rpx;
}

.myopia-form .form-item .label .require {
  color: #ED1818;
  padding-right: 10rpx;
}

.myopia-form .form-item .form-item-input {
  background-color: #F7F7F7;
  border-radius: 8rpx;
  height: 80rpx;
}

.myopia-form .form-item .form-item-input input {
  box-sizing: border-box;
  width: 100%;
  height: 80rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  border-radius: 8rpx;
  background-color: #F7F7F7;
}

.myopia-form .form-item.form-btn-item {
  box-sizing: border-box;
  position: absolute;
  bottom: 40rpx;
  width: 100%;
}

.form-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #007FCC;
  border-radius: 8rpx;
  color: #FFFFFF;
  font-size: 30rpx;
}
.form-btn:active {
  background: #0164a1;
}
</style>