<template>
  <view class="ciy-page">
    <!-- 页面标题 -->
    <view class="ciy-title mk bg2">
      <view class="title">新增实验室成员</view>
      <button class="btn def sm" @click="goBack">返回</button>
    </view>

    <!-- 表单容器 -->
    <view class="main bg4 flex1 overflow-auto px4 py3">
      <form class="ciy-form-group">
        <!-- 1. 姓名（必填） -->
        <view class="ciy-form">
          <label class="imp char4">姓名</label>
          <input 
            type="text" 
            v-model="form.name" 
            placeholder="请输入成员姓名"
            class="ciy-edit px2 py1 bg1 rounded"
            required
          />
        </view>

        <!-- 2. 头像上传 -->
        <view class="ciy-form">
          <label class="char4">头像</label>
          <view class="flex flex-center">
            <image 
              :src="form.icon || '/lab/default-avatar.png'" 
              mode="aspectFill" 
              class="w-12 h-12 rounded-full mr3"
            ></image>
            <button class="btn def sm" @click="chooseAvatar">选择图片</button>
          </view>
        </view>

        <!-- 3. 头衔 -->
        <view class="ciy-form">
          <label class="char4">头衔</label>
          <picker 
            mode="selector" 
            :range="titleOptions"
            :range-key="'label'"
            v-model="form.usertitle"
            class="px2 py1 bg1 rounded w-full"
          >
            <view class="txt-left px2 py1">{{ getTitleText(form.usertitle) }}</view>
          </picker>
        </view>

        <!-- 4. 成员状态（必填） -->
        <view class="ciy-form">
          <label class="imp char4">状态</label>
          <picker 
            mode="selector" 
            :range="statusOptions"
            :range-key="'label'"
            v-model="form.role"
            class="px2 py1 bg1 rounded w-full"
            required
          >
            <view class="txt-left px2 py1">{{ statusMap[form.role] }}</view>
          </picker>
        </view>

        <!-- 5. 学历 -->
        <view class="ciy-form">
          <label class="char4">学历</label>
          <picker 
            mode="selector" 
            :range="educationOptions"
            :range-key="'label'"
            v-model="form.education"
            class="px2 py1 bg1 rounded w-full"
          >
            <view class="txt-left px2 py1">{{ educationMap[form.education] }}</view>
          </picker>
        </view>

        <!-- 6. 编号 -->
        <view class="ciy-form">
          <label class="char4">编号</label>
          <input 
            type="text" 
            v-model="form.sn" 
            placeholder="如 LAB-2024-001"
            class="ciy-edit px2 py1 bg1 rounded"
          />
        </view>

        <!-- 7. 性别 -->
        <view class="ciy-form">
          <label class="char4">性别</label>
          <picker 
            mode="selector" 
            :range="sexOptions"
            :range-key="'label'"
            v-model="form.sex"
            class="px2 py1 bg1 rounded w-full"
          >
            <view class="txt-left px2 py1">{{ sexMap[form.sex] }}</view>
          </picker>
        </view>

        <!-- 8. 加入日期 -->
        <view class="ciy-form">
          <label class="char4">加入日期</label>
          <picker 
            mode="date" 
            v-model="form.addtimesText"
            start="2000-01-01"
            end="2100-12-31"
            class="px2 py1 bg1 rounded w-full"
          >
            <view class="txt-left px2 py1">{{ form.addtimesText || '请选择日期' }}</view>
          </picker>
        </view>

        <!-- 9. 手机号 -->
        <view class="ciy-form">
          <label class="char4">手机号</label>
          <input 
            type="number" 
            v-model="form.mobile" 
            placeholder="请输入11位手机号"
            class="ciy-edit px2 py1 bg1 rounded"
            maxlength="11"
          />
        </view>

        <!-- 10. 邮箱 -->
        <view class="ciy-form">
          <label class="char4">邮箱</label>
          <input 
            type="email" 
            v-model="form.email" 
            placeholder="请输入邮箱地址"
            class="ciy-edit px2 py1 bg1 rounded"
          />
        </view>

        <!-- 11. 密码（默认初始密码） -->
        <view class="ciy-form">
          <label class="char4">初始密码</label>
          <input 
            type="password" 
            v-model="form.password" 
            placeholder="默认：123456"
            class="ciy-edit px2 py1 bg1 rounded"
            :value="form.password || '123456'"
          />
        </view>
      </form>

      <!-- 表单提交按钮 -->
      <view class="ciy-form-bottom mt4">
        <button 
          class="btn man lgg long" 
          @click="submitForm"
          :disabled="isSubmitting"
        >
          {{ isSubmitting ? '提交中...' : '提交成员信息' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSubmitting: false, // 提交状态锁
      form: {
        name: '',          // 姓名（必填）
        icon: '',          // 头像
        usertitle: 0,      // 头衔（默认无）
        role: 30,          // 成员状态（默认在册成员）
        education: 50,     // 学历（默认本科）
        sn: '',            // 编号
        sex: 90,           // 性别（默认其他）
        addtimesText: '',  // 加入日期（文本格式）
        addtimes: 0,       // 加入日期（时间戳，提交用）
        mobile: '',        // 手机号
        email: '',         // 邮箱
        password: '123456' // 初始密码
      },

      // 下拉选择项：与lab_user.sql字段对应
      titleOptions: [
        { value: 0, label: '无头衔' },
        { value: 10, label: '主任' },
        { value: 20, label: '副主任' },
        { value: 30, label: '顾问' },
        { value: 40, label: '名誉主任' },
        { value: 50, label: '教授' },
        { value: 60, label: '副教授' },
        { value: 70, label: '讲师' },
        { value: 80, label: '研究员' }
      ],
      statusOptions: [
        { value: 10, label: '负责人' },
        { value: 20, label: '科研秘书' },
        { value: 30, label: '在册成员' },
        { value: 40, label: '历史成员' },
        { value: 50, label: '外部成员' }
      ],
      educationOptions: [
        { value: 50, label: '本科' },
        { value: 60, label: '硕士' },
        { value: 70, label: '博士' }
      ],
      sexOptions: [
        { value: 10, label: '男' },
        { value: 20, label: '女' },
        { value: 90, label: '其他' }
      ],

      // 映射表：用于文本显示
      statusMap: { 10: '负责人', 20: '科研秘书', 30: '在册成员', 40: '历史成员', 50: '外部成员' },
      educationMap: { 50: '本科', 60: '硕士', 70: '博士' },
      sexMap: { 10: '男', 20: '女', 90: '其他' },
      titleMap: { 0: '无头衔', 10: '主任', 20: '副主任', 30: '顾问', 40: '名誉主任', 50: '教授', 60: '副教授', 70: '讲师', 80: '研究员' }
    };
  },
  watch: {
    // 监听日期选择，转换为时间戳
    'form.addtimesText'(val) {
      if (val) {
        this.form.addtimes = new Date(val).getTime();
      }
    }
  },
  methods: {
    // 返回列表页
    goBack() {
      uni.navigateBack({ delta: 1 });
    },

    // 选择头像（调用相册/相机）
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          // 此处可添加图片上传逻辑，暂用临时路径
          this.form.icon = tempFilePath;
        }
      });
    },

    // 转换头衔文本
    getTitleText(usertitle) {
      return this.titleMap[usertitle] || '无头衔';
    },

    // 表单提交（后续对接后端接口）
    async submitForm() {
      // 1. 必填项校验
      if (!this.form.name) {
        return uni.showToast({ title: '请输入成员姓名', icon: 'none' });
      }
      if (!this.form.addtimes) {
        return uni.showToast({ title: '请选择加入日期', icon: 'none' });
      }

      // 2. 锁定提交状态
      this.isSubmitting = true;

      try {
        // 3. 模拟提交（后续替换为后端接口请求）
        console.log('提交的成员信息：', this.form);
        
        // 4. 提交成功提示
        uni.showToast({ title: '新增成员成功', icon: 'success' });
        
        // 5. 延迟返回列表页
        setTimeout(() => {
          this.goBack();
        }, 1500);
      } catch (err) {
        uni.showToast({ title: '提交失败，请重试', icon: 'none' });
        console.error('新增成员失败：', err);
      } finally {
        // 6. 解锁提交状态
        this.isSubmitting = false;
      }
    }
  }
};
</script>

<style scoped>
/* 补充样式：适配表单布局 */
.ciy-edit {
  width: 100%;
  height: 2rem;
  border: 1px solid var(--bg6);
  border-radius: 0.3rem;
}
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
</style>