<!--授课统计-详情-->
<template>
	<view class="main_box">

		<view class="main_section">
			<view class="section">
				<view class="item">
          <image @click="previewImage(editHeadimg)" class="pic" :src="editHeadimg"></image>
          <view class="btn">
            <AQUplodeImage
                :uploadUrl=uploadUrl
                :extraData="{ input_name: 'headimg', formData:{} }"
                @uplodeImageRes="uplodeImageRes"
            >
              修改头像
            </AQUplodeImage>
          </view>
				</view>
			</view>

			<view class="section">
				<view class="item">
					<view class="title">
						学员姓名 <text class="required">*</text>
					</view>
					<view class="input">
						<input v-model="formData.name" placeholder="请输入姓名" />
					</view>
				</view>

				<view class="item">
					<view class="title">
						账号 <text class="required"></text>
					</view>
					<view class="input">
						<input disabled placeholder="暂无" v-model="formData.memberHasOne.mobile" />
					</view>
				</view>

<!--				<view class="item">-->
<!--					<view class="title">-->
<!--						住址 <text class="required"></text>-->
<!--					</view>-->
<!--					<view class="input">-->
<!--						<input placeholder="暂无" v-model="formData.address" />-->
<!--					</view>-->
<!--				</view>-->

				<view class="item">
					<view class="title">
						课程 <text class="required"></text>
					</view>
					<view class="input">
						<input disabled placeholder="暂无" :value="formData.classes_list" />
					</view>
				</view>
			</view>

			<view class="section">
				<view class="item">
					<view class="title">
						性别 <text class="required">*</text>
					</view>
					<view class="input">
						<input placeholder="请选择性别" v-model="formData.gender_name" @click="picker_show_sex=true" />
						<fui-picker layer="1" :linkage="true" :options="options_sex_arr" :show="picker_show_sex"
							@change="changePickerSex" @cancel="cancelPickerSex"></fui-picker>
					</view>
				</view>

				<view class="item">
					<view class="title">
						年龄 <text class="required">*</text>
					</view>
					<view class="input">
            <input type="number" v-model.number="formData.age" :min="3" :max="18" placeholder="请输入年龄" @input="handleAgeInput" />          </view>
				</view>
			</view>

			<view class="section">
<!--				<view class="item">-->
<!--					<view class="title">-->
<!--						邮箱 <text class="required">*</text>-->
<!--					</view>-->
<!--					<view class="input">-->
<!--						<input v-model="formData.email" placeholder="请输入邮箱" />-->
<!--					</view>-->
<!--				</view>-->

				<view class="item">
					<view class="title">
						手机 <text class="required">*</text>
					</view>
					<view class="input">
						<input v-model="formData.phone_number" placeholder="请输入手机" />
					</view>
				</view>
			</view>


			<view class="submet_btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js';
	import member from '@/api/member.js';
	import {
		Api_url
	} from "@/common/config.js";
	import AQTabber from "@/components/AQ/AQTabber"
  import AQUplodeImage from '@/components/AQ/AQUplodeImage';//单图上传组件


	export default {
		components: {
			AQTabber,
      AQUplodeImage,
		},
		data() {
			return {
				member_info: {},


				//上传图片APi路径
				uploadUrl: `${Api_url}/memberUploadImage`,

				//性别选择器 相关
				picker_show_sex: false,
				sex_name: '请选择',
        options_sex_arr: [
          // {
          //   value: 1,
          //   text: '男'
          // },
        ],

				//生日选择器相关
				minDate: '',
				maxDate: '',
				picker_show_birthday: false,
				upload_type: 1,
				uploadHeadimg: '',
				editHeadimg: '',

        //表单
        formData: {
          headimg:'',//头像
          name:'',//姓名
          course_arr:[],//课程
          gender:'',//性别: male-男性, female-女性, other-其他
          gender_name:'',//性别: male-男性, female-女性, other-其他
          age:'',//年龄
          phone_number:'',//手机号
        },
			}
		},
		onLoad() {},
		onShow() {
			this.init()
		},
		methods: {

			async init() {
			  await this.memberInfo()
			  await this.getSexDict()
				this.getBirthday()
			},

			//获取学员信息
			async memberInfo() {
				let res = await apiRoute.xy_memberInfo({})
        if(res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        this.formData = res.data

        this.formData.headimg = res.data.memberHasOne ? res.data.memberHasOne.headimg  : $util.img('/uniapp_src/static/images/common/yong_hu.png')
        this.editHeadimg = this.formData.headimg

        console.log('xq',this.formData)
			},

      //获取性别字典
      async getSexDict() {
        let res = await apiRoute.common_Dictionary({key:'zy_sex'})
        if(res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        let dictionary =  res.data.dictionary
        let arr = []
        dictionary.forEach((v,k)=>{
          arr.push({
            text: v.name,
            value: v.value,
          })
        })
        this.options_sex_arr = arr
      },

			//性别选择相关
			changePickerSex(e) {
				console.log('监听选择', e)
				this.formData.gender_name = e.text
				this.formData.gender = e.value
				this.cancelPickerSex()
			},
      cancelPickerSex(){
			  this.picker_show_sex = false
      },

			//生日选择相关
			//获取当前年月日+获取30年前的日期
			getBirthday() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let year_30 = year - 30;
				let month_30 = month;
				let day_30 = day;
				if (month_30 == 2 && day_30 > 28) {
					month_30 = 3;
					day_30 = 1;
				}
				if (month_30 == 4 && day_30 > 30) {
					month_30 = 5;
					day_30 = 1;
				}
				if (month_30 == 6 && day_30 > 30) {
					month_30 = 7;
					day_30 = 1;
				}
				if (month_30 == 9 && day_30 > 30) {
					month_30 = 10;
					day_30 = 1;
				}
				if (month_30 == 11 && day_30 > 30) {
					month_30 = 12;
					day_30 = 1;
				}
				if (month_30 > 12) {
					month_30 = month_30 - 12;
					year_30 = year_30 + 1;
				}
				let minDate = year_30 + "-" + month_30 + "-" + day_30
				let maxDate = year + "-" + month + "-" + day
				this.minDate = minDate
				this.maxDate = maxDate
			},

			//监听生日选择
			changePickerBirthday(e) {
				console.log('监听生日选择', e)
				this.formData.birthday = e.result
				this.picker_show_birthday = false
			},

      //监听-年龄修改
      handleAgeInput(e) {
        let age = e.detail.value;
        if (age < 3) {
          uni.showToast({
            title: '年龄不能小于3岁',
            icon: 'none'
          });
          this.formData.age = 3;
        } else if (age > 18) {
          uni.showToast({
            title: '年龄不能大于18岁',
            icon: 'none'
          });
          this.formData.age = 18;
        } else {
          this.formData.age = age;
        }
      },


      //文件上传回调
      uplodeImageRes(resData,extraData){
        console.log('上传成功回调',resData,extraData)
        //判断是不是上传相册图片
        if (extraData.input_name == 'headimg') {
          console.log('收到的图片地址:', resData.url);
          this.editHeadimg = resData.url;
        }
      },

      //图片预览
      previewImage(url){
        uni.previewImage({
          current: url, // 当前图片地址
          urls: [url]   // 所有图片列表（可以是多个）
        });
      },

			//提交信息
			async submit() {
        if (this.editHeadimg) {
          this.formData.headimg = this.editHeadimg
        }
        let params = {
          ...this.formData
        }

				let res = await apiRoute.xy_memberEdit(params)
        if(res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        uni.showToast({
          title: res.msg,
          icon: 'success'
        })
			},



		}
	}
</script>

<style lang="less" scoped>
	.main_box {
		background: #292929;
	}

	//自定义导航栏
	.navbar_section {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #29d3b4;

		.title {
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #315d55;
		}
	}

	.main_section {
		min-height: 100vh;
		background: #292929 100%;
		padding: 0 0rpx;
		padding-top: 32rpx;
		padding-bottom: 150rpx;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.section {
			background-color: #434544;

			.item {
				padding: 20rpx 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.pic {
					width: 82rpx;
					height: 82rpx;
					border-radius: 50%;
				}

				.btn {}

				.title {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #D7D7D7;

					.required {
						margin-left: 10rpx;
						color: red;
					}
				}

				.input {
					input {
						text-align: right;
					}
				}
			}
		}

		.submet_btn {
			margin: 0 auto;
			margin-top: 40rpx;
			border: 2px solid #25a18b;
			color: #25a18b;
			width: 80%;
			height: 80rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}



	}
</style>