<template>
  <div class="step1-container" @click="getFormData">
    <el-form ref="fromRef" :model="from" :rules="rules" label-width="200px"
      style="display: block; width: 96%; max-height: 72vh" :inline="true" label-suffix="：">
      <el-row>
        <el-col :span="11">
          <el-form-item label="是否选择业务类型" style="width: 100%">
            <el-select class="pxdx_box" v-model="from.sf" @change="changeSf">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="试卷总时长" style="width: 100%">
            <el-input v-model="from.examTime" type="number" clearable>
              <template #append>分钟</template></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="试卷总分" style="width: 100%">
            <el-input v-model="from.examScore" readonly disabled>
              <template #append>分</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="判断题每题分" style="width: 100%">
            <el-input-number v-model="from.trueOrFalseQuestions" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="11">
          <el-form-item label="单选题每题分" style="width: 100%">
            <el-input-number v-model="from.singleChoice" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="多选题每题分" style="width: 100%">
            <el-input-number v-model="from.multipleChoice" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider />

      <el-form-item v-if="from.sf == 1" label="试题类型" style="width: calc(100% - 32px)">
        <el-checkbox-group v-model="typeCheckedList" @change="changeTypeCheckedList">
          <el-checkbox class="type-check-item" v-for="item in typeList" :key="item.type" :label="item.title"
            :value="item.type" />
        </el-checkbox-group>
      </el-form-item>

      <!-- 判断题,单选题，多选题 数量 -->
      <section class="type-list">
        <div v-show="!!it.checked" class="type-item" :class="{ 'not-yewu': from.sf != 1 }" v-for="(it, i) in itemList"
          :key="it.type">
          <!-- <template v-if="!!it.checked"> -->
          <input type="hidden" name="type" :value="from.dtoList[i].type" />
          <el-form-item label-width="13em" :label="(it.title ? '【' + it.title + '】' : it.title) + '判断题数量'"
            style="width: 96%; margin-right: 0">
            <el-input-number v-model="from.dtoList[i].pd" :min="0" :precision="0" style="width: 100%"
              @blur="examNumBlur($event, from.dtoList[i], 'pd')"
              @keydown="examNumKeydown($event, from.dtoList[i], 'pd')"></el-input-number>
          </el-form-item>
          <el-form-item label-width="13em" :label="(it.title ? '【' + it.title + '】' : it.title) + '单选题数量'"
            style="width: 96%; margin-right: 0">
            <el-input-number v-model="from.dtoList[i].danx" :min="0" :precision="0" style="width: 100%"
              @blur="examNumBlur($event, from.dtoList[i], 'danx')"
              @keydown="examNumKeydown($event, from.dtoList[i], 'danx')"></el-input-number>
          </el-form-item>
          <el-form-item label-width="13em" :label="(it.title ? '【' + it.title + '】' : it.title) + '多选题数量'"
            style="width: 96%; margin-right: 0">
            <el-input-number v-model="from.dtoList[i].duox" :min="0" :precision="0" style="width: 100%"
              @blur="examNumBlur($event, from.dtoList[i], 'duox')"
              @keydown="examNumKeydown($event, from.dtoList[i], 'duox')"></el-input-number>
          </el-form-item>

        </div>
      </section>
    </el-form>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  watch,
  reactive,
  getCurrentInstance,
  defineExpose,
} from "vue";
import { ElMessage } from 'element-plus'
import Big from "@/utils/big.js"

const { proxy } = getCurrentInstance();
const { D_BZ_SF, D_BZ_KTKYWLX } = proxy.$dict("D_BZ_SF", "D_BZ_KTKYWLX");

const fromRef = ref();
/**表单数据 */
const from = ref({
  sf: "2", // 设置为随机生成
  examTime: "60",
  // trueOrFalseQuestions: 0,
  // singleChoice: 0,
  // multipleChoice: 0,
  dtoList: [{ type: '' }],
});
/**题目列表 是选择业务类型时使用  */
const itemList = ref([
  {
    title: "",
    type: "",
    checked: true
  },
]);
/**表单校验 */
const rules = reactive({});
const typeCheckedList = ref([])
/**业务类型列表 */
const typeList = ref([]);
/** 根据类型获取标题的对象 key:类型 value:标题 */
const titleByTypeObj = ref({})
// typeList.value.forEach(item => {
//   titleByTypeObj.value[item.type] = item.title
// })
/** 切换是否选择业务类型 */
const changeSf = () => {
  if (from.value.sf == "2") {
    itemList.value = [{ title: "", type: "", checked: true },];
    from.value.dtoList = [{ type: "", },];
  } else {
    itemList.value = typeList.value;
    let dtoList = itemList.value.map((item) => {
      return { type: item.type, };
    });
    from.value.dtoList = dtoList;
  }
};
/** 获取试卷总分 */
const getExamScore = () => {

  let score = 0
  let arr = Array.isArray(from.value.dtoList) ? from.value.dtoList : []
  // 先简单判断下,避免出错
  let { trueOrFalseQuestions, singleChoice, multipleChoice } = from.value
  trueOrFalseQuestions = !trueOrFalseQuestions ? 0 : trueOrFalseQuestions
  singleChoice = !singleChoice ? 0 : singleChoice
  multipleChoice = !multipleChoice ? 0 : multipleChoice
  // 如果区分类型，则只计算选中的类型
  if (from.value.sf == 1) {
    arr = arr.filter(item => typeCheckedList.value.includes(titleByTypeObj.value[item.type]))
  }
  // 遍历题目
  arr.forEach(item => {
    const pd = !item.pd ? 0 : item.pd
    const danx = !item.danx ? 0 : item.danx
    const duox = !item.duox ? 0 : item.duox

    // score += pd * trueOrFalseQuestions + danx * singleChoice + duox * multipleChoice
    score = new Big(score).plus(new Big(pd).times(trueOrFalseQuestions)).plus(new Big(danx).times(singleChoice)).plus(new Big(duox).times(multipleChoice))
  })
  return new Big(score).round(2)
}
watch([() => from.value.trueOrFalseQuestions, () => from.value.singleChoice, () => from.value.multipleChoice, () => from.value.dtoList], (newVal) => {
  from.value.examScore = getExamScore()
}, { deep: true })

watch(D_BZ_KTKYWLX, (val) => {
  if (val && val.length > 0 && typeList.value.length == 0) {
    typeList.value = val.map(item => {
      return { title: item.label, type: item.value }
    })
    typeList.value.forEach(item => {
      titleByTypeObj.value[item.type] = item.title
    })
  }
}, { immediate: true })

const changeTypeCheckedList = () => {

  itemList.value = itemList.value.map(item => {
    item.checked = typeCheckedList.value.includes(titleByTypeObj.value[item.type])
    return item
  })
}

/** 获取表单数据 */
const getFormData = () => {
  if ((from.value.trueOrFalseQuestions || from.value.trueOrFalseQuestions == 0) || (from.value.singleChoice || from.value.singleChoice == 0) || (from.value.multipleChoice || from.value.multipleChoice == 0)) {
    from.value.isScore = '1'
    // from.value.examScore = getExamScore()
  } else {
    // from.value.examScore = getExamScore()
    from.value.isScore = '2'
  }
  let data = { ...from.value }
  if (data.sf == 1) {
    // 只要选中的类型
    data.dtoList = data.dtoList.filter(item => typeCheckedList.value.includes(titleByTypeObj.value[item.type]))
  }
  data.dtoList = data.dtoList.map(item => {
    return {
      ...item,
      pd: !item.pd ? 0 : item.pd,
      danx: !item.danx ? 0 : item.danx,
      duox: !item.duox ? 0 : item.duox,
    }
  })
  return data
}
const examNumBlur = (e, row, key) => {
  row[key] = e.target.value ? parseInt(e.target.value) : 0;
}
const examNumKeydown = (e, row, key) => {
  // 如果按下的是“.”键 则阻止默认行为
  if (e.keyCode == 110) {
    e.preventDefault()
  }
}
/** 校验数据 */
const check = () => {
  /** 是否有效数据 */
  let flag = false;
  from.value.dtoList.forEach(item => {

    // item.pd = !item.pd ? 0 : item.pd
    // item.danx = !item.danx ? 0 : item.danx
    // item.duox = !item.duox ? 0 : item.duox
    if (item.pd > 0 || item.danx > 0 || item.duox > 0) {
      flag = true
    }
  })

  if (!flag) ElMessage.warning('没有配置考题')
  return flag

};
defineExpose({
  check,
  getFormData
});
</script>

<style scoped lang="scss">
.step1-container {
  display: flex;
  justify-content: center;
  height: 100%;
  padding-top: 50px;
}

.type-check-item {
  color: #000;
}

.type-list {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  width: 96%;
}

.type-item {
  // flex-wrap: wrap;
  width: calc(50% - 20px);
  padding: 10px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 7px 7px 18px 0px #dcdcdc24;

  &.not-yewu {
    width: 100%;
    border: none;
  }
}
</style>
