<template>
  <view class="content">
    <view class="top">
      <text class="top-tips-text">新增小孩信息</text>
    </view>
    <view class="item-view">
      <u-form :model="form">
        <u-form-item label-width="250" label="小孩名称" prop="name">
          <u-input placeholder="请填写您孩子的姓名" v-model="form.name" />
        </u-form-item>
        <u-form-item label-width="250" label="所在学校" prop="school">
          <u-input placeholder="请填写您孩子的学校" v-model="form.school" />
        </u-form-item>
        <u-form-item label-width="250" label="所在班级" prop="class">
          <u-select
            v-model="showClass"
            mode="mutil-column"
            :list="classList"
            @confirm="classConfirm"
          ></u-select>
          <u-input placeholder="请选择您孩子所在班级" :disabled="true" @click="showClass = true" v-model="classText" class="item-view-input"/>
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label-width="250" label="孩子性别" prop="sex">
          <u-select
            v-model="showSex"
            mode="single-column"
            :list="sexList"
            @confirm="sexConfirm"
          ></u-select>
          <u-input
            :disabled="true"
            placeholder="请选择您孩子的性别"
            v-model="sexText"
            @click="showSex = true"
			class="item-view-input"
          />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label-width="250" label="联系家长" prop="phone">
          <u-input placeholder="请填写您的电话号码" v-model="form.phone" />
        </u-form-item>
        <u-form-item label-width="250" label="回家方式" prop="goHomeType">
          <u-select
            v-model="showType"
            mode="single-column"
            :list="homeTypeList"
            @confirm="typeConfirm"
          ></u-select>
          <u-input
            placeholder="请选择孩子回家方式"
            :disabled="true"
            v-model="typeText"
            @click="showType = true"
			class="item-view-input"
          />
          <u-icon name="arrow-right"></u-icon>
        </u-form-item>
      </u-form>
    </view>
    <view>
      <u-button shape="circle" :custom-style="btnStyle">立即保存</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data: () => ({
    btnStyle: {
      background: 'linear-gradient(0deg, #0251FF 0%, #2794F6 100%)',
      width: '80%',
      color: '#fff',
    },
    form: {
      name: '',
      shool: '',
      class: '',
      sex: '',
      phone: '',
      goHomeType: 1,
    },
    sexList: [
      {
        value: 1,
        label: '男',
      },
      {
        value: 2,
        label: '女',
      },
    ],
    homeTypeList: [
      {
        value: 1,
        label: '家长接送',
      },
      {
        value: 2,
        label: '自行回家',
      },
    ],
    classList: [
      [
        {
          value: '1',
          label: '一年级',
        },
        {
          value: '2',
          label: '二年级',
        },
        {
          value: '3',
          label: '三年级',
        },
        {
          value: '4',
          label: '四年级',
        },
        {
          value: '5',
          label: '五年级',
        },
        {
          value: '6',
          label: '六年级',
        },
      ],
      [
        {
          value: '1',
          label: '一班',
        },
        {
          value: '2',
          label: '二班',
        },
      ],
    ],
    showSex: false,
    sexText: '',
    showType: false,
    typeText: '',
    showClass: false,
    classText: '',
  }),
  components: {},
  computed: {},
  methods: {
    sexConfirm(res) {
      this.form.sex = res[0].value
      if (res[0].value === 1) {
        this.sexText = '男'
      } else if (res[0].value === 2) {
        this.sexText = '女'
      }
    },
    typeConfirm(res) {
      this.form.goHomeType = res[0].value
      this.typeText = res[0].label
    },
    classConfirm(res) {
        this.classText = res[0].label + res[1].label
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
}
</script>

<style scoped>
.top {
  height: 320rpx;
  background: linear-gradient(0deg, #0251ff 0%, #2794f6 100%);
}
.top-tips-text {
  position: relative;
  top: 115rpx;
  left: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}
.item-view {
  position: relative;
  top: -100rpx;
  height: 780rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  background: #ffffff;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  box-shadow: 0rpx 0rpx 15rpx 1rpx #f0f0f0;
  border-radius: 6rpx;
  z-index: 100;
  padding-left: 30rpx;
  padding-right: 10rpx;
}
.item-view-input{
	/* 给input新增样式 */
	display: inline-block;
	width: 90%;
}
.item {
  margin: 30rpx;
}
.item-title-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}
</style>
