<template>
  <a-spin :spinning="confirmLoading">

    <a-row style="height: calc(80vh);">
      <a-col :span="4" style="padding: 10px">
        <a-card title="可选题型" style="height: 450px;border: 1px solid #e8e8e8;">
          <p><a-button type="primary" preIcon="ant-design:check-circle-outlined" @click="addTigan(3)">单选</a-button></p>
          <p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(4)">多选</a-button></p>
        </a-card>
      </a-col>
      <a-col :span="20" style="overflow-y: scroll;height: calc(80vh);">
        <div style="text-align: center;width: 100%;font-weight: bold;font-size: 20px;padding: 20px;">
          {{ title }}</div>
        <!-- 题干信息 -->
        <div style="width:100%;" v-for="(item,index) in tiganData" :key="index">
          <!-- 单选题 -->
          <div style="width: 100%;" v-if="item.wjType==3">
            <a-card >
              <template #title>
                <span>{{index+1}}、</span><a-textarea placeholder="请填写单选题题干" v-model:value="item.wjTitle" style="width: 75%" auto-size/>
              </template>
              <template #extra>
                <a-tooltip placement="topRight" title="题目分数">
                  <a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数">
                    <a-select-option value="5">5</a-select-option>
                    <a-select-option value="4">4</a-select-option>
                    <a-select-option value="3">3</a-select-option>
                    <a-select-option value="2">2</a-select-option>
                    <a-select-option value="1">1</a-select-option>
                  </a-select>
                </a-tooltip >
                <a-tooltip placement="topRight" title="删除此题"><Icon icon="ant-design:delete-outlined" style="cursor: pointer;font-size: 20px;margin: 10px" @click="handleDelTigan(item,index)" /></a-tooltip >
              </template>
              <a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default">
                <div style="width: 100%" v-for="(tmxx,index) in item.wjxWjxxTmxxList">
                  <a-radio :value="tmxx.itemIndex+``"  style="width: 100%"><a-input placeholder="请填写标题" v-model:value="tmxx.itemTitle" :bordered="false" style="width:80%;"/>
                    <a-tooltip placement="topLeft" title="在下方添加新的选项"><Icon icon="ant-design:plus-circle-outlined" style="cursor: pointer;margin:5px;font-size:20px;color: #1890ff;" @click="handleAddTmxx(tmxx,index,item.wjxWjxxTmxxList)" /></a-tooltip >
                    <a-tooltip placement="topLeft" title="删除选项" ><Icon icon="ant-design:minus-circle-outlined" style="cursor: pointer;margin:5px;font-size:20px;color: #1890ff;" @click="handleRemTmxx(tmxx,index,item.wjxWjxxTmxxList)" /></a-tooltip >
                  </a-radio>
                </div>
              </a-radio-group>
            </a-card>
          </div>
          <!-- 多选题 -->
          <div style="width: 100%;" v-else-if="item.wjType==4">
            <a-card >
              <template #title>
                <span>{{index+1}}、</span><a-textarea placeholder="请填写多选题题干" v-model:value="item.wjTitle" style="width: 75%" auto-size/>
              </template>
              <template #extra>
                <a-tooltip placement="topRight" title="题目分数">
                  <a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数">
                    <a-select-option value="5">5</a-select-option>
                    <a-select-option value="4">4</a-select-option>
                    <a-select-option value="3">3</a-select-option>
                    <a-select-option value="2">2</a-select-option>
                    <a-select-option value="1">1</a-select-option>
                  </a-select>
                </a-tooltip >
                <a-tooltip placement="topRight" title="删除此题"><Icon icon="ant-design:delete-outlined" style="cursor: pointer;font-size: 20px;margin: 10px" @click="handleDelTigan(item,index)" /></a-tooltip >
              </template>
              <a-checkbox-group v-model:value="item.itemSelected"  style="width: 100%">
                <a-row>
                  <a-col :span="24" v-for="(tmxx,index) in item.wjxWjxxTmxxList">
                    <a-checkbox :value="tmxx.itemIndex"><a-input placeholder="请填写标题" v-model:value="tmxx.itemTitle" :bordered="false" style="width:80%;"/></a-checkbox>
                    <a-tooltip placement="topLeft" title="在下方添加新的选项"><Icon icon="ant-design:plus-circle-outlined" style="cursor: pointer;margin:5px;font-size:20px;color: #1890ff;" @click="handleAddTmxx(tmxx,index,item.wjxWjxxTmxxList)"/></a-tooltip >
                    <a-tooltip placement="topLeft" title="删除选项" ><Icon icon="ant-design:minus-circle-outlined" style="cursor: pointer;margin:5px;font-size:20px;color: #1890ff;" @click="handleRemTmxx(tmxx,index,item.wjxWjxxTmxxList)"/></a-tooltip >
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </a-card>
          </div>
          <div v-else>
            无对应类型
          </div>
        </div>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script lang="ts" name="wjxWjxx-add" setup>
import { ref, nextTick, defineExpose } from 'vue';
import { Icon } from '/@/components/Icon';
import { useMessage } from '/@/hooks/web/useMessage';
import { defHttp } from '/@/utils/http/axios';
import { queryWjxWjxxTmxxListByMainId, queryDataById, saveOrUpdate } from '/@/views/kc/wjxWjxxTmlb/WjxWjxxTmlb.api';
const title = ref<string>('');
const mainId = ref<string>('');
const confirmLoading = ref<boolean>(false);
const tiganData = ref<any>([]);
const tmxxPar = ref<any>({});
const { createMessage } = useMessage();

const emit = defineEmits(['register', 'success']);
//添加单选题
function addTigan(type){
  var list = tiganData.value;
  if(type==3){
    var params = {
      wjType:parseInt(type),
      wjIndex:list.length+1,
      mainId:mainId,
      wjTitle:null,
      wjScore:null,
      itemSelected:'1',
      wjxWjxxTmxxList:[{itemTitle:null,itemIndex:'1'},{itemTitle:null,itemIndex:'2'}],
    }
    list.push(params);
    tiganData.value = [...list];
  }else if(type==4){
    var params = {
      wjType:parseInt(type),
      wjIndex:list.length+1,
      mainId:mainId,
      wjTitle:null,
      wjScore:null,
      itemSelected:['1'],
      wjxWjxxTmxxList:[{itemTitle:null,itemIndex:'1'},{itemTitle:null,itemIndex:'2'}],
    }
    list.push(params);
    tiganData.value = [...list];

  }
}
//添加选项
function handleAddTmxx(record,index,list){
  list.push({itemTitle:null,itemIndex:list.length+1});
}
//删除题目
function handleDelTigan(record,index){
  tiganData.value.splice(index,1);
}
//删除选项
function handleRemTmxx(record,index,list){
  if(list.length<=2){
    createMessage.error('至少保留两个选项');
  }else{
    list.splice(index,1);
  }
}
function getType(value,type){
  console.log(`🚀 ~ getType ~ value,type:`, value,type)
    if(type=='3'){
      return parseInt(value);
    }else if(type=='4'){
      return value;
    }
}
//初始化
function edit(record){
  tiganData.value = [];
  title.value = record.title;
  mainId.value = record.id;
  defHttp.get({url:'/wjxWjxxTmlb/wjxWjxxTmlb/queryByMainId',params:{id:record.id}}).then(res =>{
    console.log(`🚀 ~ defHttp.get ~ res:`, res)
    var list = res;
    for(var i=0;i<list.length;i++){
      var par = list[i];
      if(par.wjType==4){
        var lssj = par.itemSelected.split(",");
        const numArray = lssj.map(str => parseInt(str));
        list[i].itemSelected = numArray;
      }
    }
    tiganData.value = res;
  })

}
//提交数据
async function submitForm(){
  const data = tiganData.value;
  console.log(`🚀 ~ submitForm ~ data:`, data)
  const values = Object.assign([], data);
  for(var i=0;i<values.length;i++){
    var param = values[i];
    values[i].itemSelected = param.itemSelected+"";
  }
  const isUpdate = false
  await saveOrUpdate(values, isUpdate);
  //关闭弹窗
  emit('ok');

}

  defineExpose({
    edit,
    submitForm,
  });
</script>

<style lang="less" scoped>

/deep/span.ant-radio + * {
    width: 100%;
}

/deep/.ant-checkbox-wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: tnum;
    display: inline-flex;
    align-items: baseline;
    line-height: unset;
    cursor: pointer;
    width: 80%;
}
/deep/.ant-checkbox + span {
    padding-right: 8px;
    padding-left: 8px;
    width: 100%;
}
</style>
