<template>
  <view class="selftTest">
    <view class="Tit">血脂</view>
    <view class="row">
      <view class="row_tit">总胆固醇</view>
      <view class="row_con">
        <input type="number" v-model="zdgc" @input="ipt1" data-datas="zdgc" placeholder="0.4-4" placeholder-style="color: #999999;font-size: 26rpx;" />mg/dL
      </view>
    </view>
    <view class="row">
      <view class="row_tit">高密度脂</view>
      <view class="row_con">
        <input type="number" v-model="gmdz" @input="ipt1" data-datas="gmdz" placeholder="2.9-6" placeholder-style="color: #999999;font-size: 26rpx;" />mmol/L
      </view>
    </view>
    <view class="row">
      <view class="row_tit">甘油三脂</view>
      <view class="row_con">
        <input type="number" v-model="gysz" @input="ipt1" data-datas="gysz" placeholder="1.04-2.59" placeholder-style="color: #999999;font-size: 26rpx;" />mg/L
      </view>
    </view>
    <view class="row">
      <view class="row_tit">低密度脂</view>
      <view class="row_con">
        <input type="number" v-model="dzdz" @input="ipt1" data-datas="dzdz" placeholder="0.51-1.7" placeholder-style="color: #999999;font-size: 26rpx;" />mmol/dL
      </view>
    </view>
    <view class="row">
      <view class="row_tit">冠心病指数</view>
      <view class="row_con">
        <input type="number" v-model="gxbzs" @input="ipt1" data-datas="gxbzs" placeholder="0.3-3.35" placeholder-style="color: #999999;font-size: 26rpx;" />
      </view>
    </view>
    <view class="row none">
      <view class="row_tit">动脉硬化</view>
      <view class="row_con">
        <input type="number" v-model="dmyh" @input="ipt1" data-datas="dmyh" placeholder="1.3-4.5" placeholder-style="color: #999999;font-size: 26rpx;" />
      </view>
    </view>
    <view class="gray"></view>
    <view class="Tit">常规项目</view>
    <view class="row">
      <view class="row_tit">体重</view>
      <view class="row_con">
        <input type="number" v-model="tz" @input="ipt1" data-datas="tz" placeholder="1-200" placeholder-style="color: #999999;font-size: 26rpx;" />Kg
      </view>
    </view>
    <view class="row">
      <view class="row_tit">心率</view>
      <view class="row_con">
        <input type="number" v-model="xl" @input="ipt1" data-datas="xl" placeholder="60-100" placeholder-style="color: #999999;font-size: 26rpx;" />次/分
      </view>
    </view>
    <view class="row none">
      <view class="row_tit">体温</view>
      <view class="row_con">
        <input type="number" v-model="tw" @input="ipt1" data-datas="tw" placeholder="35-37.5" placeholder-style="color: #999999;font-size: 26rpx;" />℃
      </view>
    </view>
    <view class="gray"></view>
    <view class="Tit">尿酸</view>
    <view class="row none">
      <view class="row_tit">尿酸</view>
      <view class="row_con">
        <input type="number" v-model="ns" @input="ipt1" data-datas="ns" placeholder="179-416" placeholder-style="color: #999999;font-size: 26rpx;" />μmol/L
      </view>
    </view>
    <view class="gray"></view>
    <view class="Tit">血压</view>
    <view class="row">
      <view class="row_tit">收缩压</view>
      <view class="row_con">
        <input type="number" v-model="ssy" @input="ipt1" data-datas="ssy" placeholder="1-200" placeholder-style="color: #999999;font-size: 26rpx;" />Kg
      </view>
    </view>
    <view class="row">
      <view class="row_tit">舒张压</view>
      <view class="row_con">
        <input type="number" v-model="szy" @input="ipt1" data-datas="szy" placeholder="60-100" placeholder-style="color: #999999;font-size: 26rpx;" />次/分
      </view>
    </view>
    <view class="row none">
      <view class="row_tit">脉搏</view>
      <view class="row_con">
        <input type="number" v-model="mb" @input="ipt1" data-datas="mb" placeholder="60-100" placeholder-style="color: #999999;font-size: 26rpx;" />次/分
      </view>
    </view>
    <view class="gray"></view>
    <view class="Tit">眼科</view>
    <view class="row">
      <view class="row_tit">左眼视力</view>
      <view class="row_con">
        <input type="number" v-model="zysl" @input="ipt1" data-datas="zysl" placeholder="1.0-4.0" placeholder-style="color: #999999;font-size: 26rpx;" />
      </view>
    </view>
    <view class="row none">
      <view class="row_tit">右眼视力</view>
      <view class="row_con">
        <input type="number" v-model="yysl" @input="ipt1" data-datas="yysl" placeholder="1.0-4.0" placeholder-style="color: #999999;font-size: 26rpx;" />
      </view>
    </view>
    <view class="btn" @tap="submit">
      提交
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      zdgc: '',
      gmdz: '',
      gysz: '',
      dzdz: '',
      gxbzs: '',
      dmyh: '',
      tz: '',
      xl: '',
      tw: '',
      ns: '',
      ssy: '',
      szy: '',
      mb: '',
      zysl: '',
      yysl: ''
    }
  },
  methods: {
    ipt1(e) {
      const key = e.currentTarget.dataset.datas;
      this[key] = e.detail.value;
    },
    submit() {
      // 提交逻辑
    }
  }
}
</script>

<style>
.selftTest {
    padding: 30rpx 20rpx;
    padding-top: 0;
}

.Tit {
    font-weight: bold;
    font-size: 32rpx;
    color: #222222;
    margin-bottom: 25rpx;
    margin-top: 30rpx;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #E6E6E6;
    box-sizing: border-box;
}

.row_tit {
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
}

.row_con {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
    justify-content: flex-end;
    flex: 1;
}

.row_con input {
    text-align: right;
    color: #222;
    flex: 1;
}

.none {
    border-bottom: none;
}

.btn {
    width: 650rpx;
    height: 80rpx;
    background: #FF512A;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    font-weight: 400;
    font-size: 36rpx;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 30rpx;
}
</style>