<!--发布作业-->
<template>
  <view class="main_section">
    <view class="formData">
      <view>
        <fui-input required label="班级" borderTop placeholder="请选择班级" v-model="formData.class_name" @click="show_class=true"></fui-input>
        <fui-picker layer="1" :linkage="true" :options="options_class_arr" :show="show_class" @change="changeClass" @cancel="show_class=false"></fui-picker>
      </view>

      <view>
        <fui-input required label="课程" borderTop placeholder="请选择课程" v-model="formData.course_name" @click="show_course=true"></fui-input>
        <fui-picker
            layer="1"
            :linkage="true"
            :options="options_course_arr" :show="show_course" @change="changeCourse" @cancel="show_course=false"></fui-picker>
      </view>

      <view>
        <fui-textarea required flexStart label="作业" placeholder="请输入内容" v-model="formData.homework"></fui-textarea>
      </view>
    </view>

<!--    底部导航-->
    <AQTabber/>
  </view>
</template>

<script>
// import user from '@/api/user.js';
import AQTabber from "@/components/AQ/AQTabber.vue"

export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      show_class:false,
      show_course:false,


      options_class_arr:[
        { value: 1, text: '班级1' },
        { value: 2, text: '班级2' },
        { value: 3, text: '班级3' }
      ],
      options_course_arr:[
        { value: 1, text: '课程1' },
        { value: 2, text: '课程2' },
        { value: 3, text: '课程3' }
      ],

      formData:{
        class_name:'',//班级(下拉)
        class_id:'',//班级(下拉)
        course_name:'',//课程(下拉)
        course_id:'',//课程(下拉)
        homework:'',//作业(文本域)
      }
    }
  },
  onLoad() {

  },
  methods: {
    //监听选择器-班级
    changeClass(e) {
      console.log('选择器-班级', e);
      this.formData.class_id = e.value; // 更新 class_id
      this.formData.class_name = e.text; // 更新 class_name
      this.show_class = false; // 关闭选择器
    },
    //监听选择器-课程
    changeCourse(e) {
      console.log('选择器-课程', e);
      this.formData.course_id = e.value; // 更新 course_id
      this.formData.course_name = e.text; // 更新 course_name
      this.show_course = false; // 关闭选择器
    },
  }
}
</script>

<style lang="less" scoped>

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  .formData{
    display: flex;
    flex-direction: column;
    gap: 40rpx;
  }



}


</style>