<!--发布作业-->
<template>
  <view class="main_section">
    <view class="formData">
      <view class="radio_input">
        <fui-form-item label="作业类型" asterisk>
          <fui-radio-group name="radio" v-model="formData.type" @change="changeType">
            <view class="fui-list__item">
              <fui-label>
                <view class="fui-align__center">
                  <fui-radio value="1" checked></fui-radio>
                  <text class="fui-text">班级作业</text>
                </view>
              </fui-label>
              <fui-label :margin="['0','0','0','40rpx']">
                <view class="fui-align__center">
                  <fui-radio value="2"></fui-radio>
                  <text class="fui-text">学员作业</text>
                </view>
              </fui-label>
            </view>
          </fui-radio-group>
        </fui-form-item>

      </view>

      <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 class="submet_btn">提交</view>
    </view>

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

<script>
import memberApi from '@/api/member.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:{
        type:'1',//作业类型(单选)
        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; // 关闭选择器
    },

    //监听选择器-作业类型
    changeType(e) {
      console.log('选择器-作业类型', e);
      this.formData.type = e.value; // 更新 type
    },

    //发布作业
  }
}
</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;
    .radio_input{
      .fui-form__item-wrap{
        border-radius: 8rpx !important;
      }
      .fui-list__item{
        display: flex;
        align-items: center;
      }
    }
    .submet_btn{
      margin: 0 auto;
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #29d3b4;
      border-radius: 8rpx;

      width: 648rpx;
      height: 88rpx;
      color: rgba(255,255,255,1);
      font-size: 32rpx;
    }
  }



}


</style>