<template>
   <el-form :inline="true"   :model="modalForm" class="demo-form-inline" ref="ruleFormRef" style="margin-top: 30px;">
    <el-row :gutter="20">
          <el-col :span="23">
            <el-form-item :label="'题目'+(qIndex+1)" >
            
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-icon  color="red" size="20px" style="cursor: pointer;" @click="delQusetion"><Delete /></el-icon>
          </el-col>
        </el-row>
    <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="题目类型：" prop="question_type">
              <el-select  :disabled="modalForm.created_at" style="width:350px" v-model="modalForm.question_type" placeholder="请选择问题类型"  @change="changeType">
                        <el-option label="单选"  :value="1" />
                        <el-option label="多选" :value="2" />
                        <el-option label="问答"  :value="3" />
                        <el-option label="判断" :value="4" />
                    </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="题目名称：" prop="question_name">
              <el-input :disabled="modalForm.created_at" v-model="modalForm.question_name" style="width: 350px" placeholder="请输入题目名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" > 
            <el-form-item
                  label="答对下一步:"
                  prop="with_amount"
                  style="font-size: 14px"
                >
                  <el-switch
                  :disabled="modalForm.created_at"
                    v-model="modalForm.is_right_next"
                    :active-value="1"
                    :inactive-value="2"
                  />
                </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8" > 
            <el-form-item
                  label="答错提示:"
                  prop="with_amount"
                  style="font-size: 14px"
                >
                  <el-input
                    v-model="modalForm.error_tips"
                    :disabled="modalForm.created_at"
                    type="textarea"
                    :autosize="{ minRows: 4 }"
                    style="width: 800px"
                  />
                </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="正确答案：" prop="question_answer">
              <el-input :disabled="modalForm.created_at" v-model.trim="modalForm.question_answer" style="width: 350px" placeholder="请输入正确答案" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" v-for="(item,index) in modalForm.case_item_question_option" :key="item.option_id" v-if="modalForm.question_type==1 || modalForm.question_type==2">
          <el-col :span="20">
            <el-form-item :label="'选项'+alphabet[index]+'：'" >
                <el-input :disabled="modalForm.created_at" v-model="item.option_value" style="width: 350px" placeholder="请输入选项内容" />
            </el-form-item>
            <el-icon v-if="index==0" size="18" style="margin-top: -8px;cursor: pointer;" @click="addSelect"><CirclePlus /></el-icon>
            <el-icon v-else size="18"  color="red" style="margin-top: -8px;cursor: pointer;" @click="delSelect(index)"><Delete /></el-icon>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" v-for="(item,index) in modalForm.case_item_question_option" :key="item.option_id" v-if="modalForm.question_type==4">
          <el-col :span="20">
            <el-form-item :label="'选项'+alphabet[index]+'：'" >
                <el-input v-model="item.option_value" disabled style="width: 350px" placeholder="请输入选项内容" />
            </el-form-item>
           
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="8" >
            
          </el-col>

        </el-row> -->
        <el-divider />
      </el-form>
</template>

<script setup>
 import { ref,reactive } from "vue";
 import { ElMessage } from 'element-plus'
 const props=defineProps({
    modalForm:{
        type:Object,
        default:()=>{}
    },
    qIndex:{
        type:Number,
        default:0
    }
 });
 const emits=defineEmits(['handleAddSelect','handleDelQusetion','handleChangeType','handleDelSelect'])

 const alphabet = ref(['A','B','C','D','E','F','G','H','I','J','K','L','M']);
 const submit = async(form) => {
  await form.validate((valid, fields) => {
    if (valid) {
    
    } else {
      console.log('error submit!', fields)
    }
 
  });
}
const addSelect=()=>{
  if(props.modalForm.created_at){
    ElMessage.warning('禁止该操作');
    return false;
  }else{
    emits('handleAddSelect',props.qIndex)
  }
   
}
const changeType=(val)=>{
  emits('handleChangeType',{
    qIndex:props.qIndex,
    typeVal:val
  })
}
const delSelect=(index)=>{
  if(props.modalForm.created_at){
    ElMessage.warning('禁止该操作');
    return false;
  }else{
    emits('handleDelSelect',{
    qIndex:props.qIndex,
    delIndex:index
  })
}
 
}

const delQusetion=(index)=>{
  emits('handleDelQusetion',{
    qIndex:props.qIndex,
    delIndex:props.qIndex
  })
}
</script>

<style lang='scss' scoped>
.row{
    display: flex;
    justify-content: center;
}
</style>
