dbsd_kczx/src/views/kc/wjxWjxxTmlb/TikuList.vue

<template>
  <div>
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :lg="24">
            <a-button type="primary" @click="importOpen = true">导入试题</a-button>
            <a-button type="primary" @click="addOpen = true" style="margin-left: 20px">手动添加</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="jeecg-basic-table-form-container">
      <a-form @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :lg="6">
            <a-form-item label="问题标题">
              <j-input placeholder="请输入问题标题" v-model:value="queryParam.wjTitle"></j-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item label="题目类型">
              <a-select placeholder="请选择题目类型" ref="select" v-model:value="queryParam.wjType">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="3">单选题</a-select-option>
                <a-select-option value="4">多选题</a-select-option>
                <a-select-option value="5">填空题</a-select-option>
                <a-select-option value="8">文件题</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item label="是否公有">
              <JDictSelectTag placeholder="请选择" v-model:value="queryParam.wjSytype" dictCode="yn" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="6">
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
              </a-col>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--插槽:table标题-->
      <!-- <template #tableTitle>
      </template> -->
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>

      <template #wjTitleaction="{ record }">
        <div v-html="record.wjTitle"></div>
      </template>

      <!--字段回显插槽-->
      <template #htmlSlot="{ text }">
        <div v-html="text"></div>
      </template>
      <template #fileSlot="{ text }">
        <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small"
          @click="downloadFile(text)">下载</a-button>
      </template>
    </BasicTable>

    <a-modal title="Excel导入指导" :width="800" :visible="importOpen" :maskClosable="false"
      :okButtonProps="{ class: { 'jee-hidden': true } }" @cancel="importOpen = false" cancelText="关闭">
      <div style="padding: 20px; background-color: rgb(225, 243, 237); border-radius: 5px; margin: 20px">
        <p>Excel导入指导</p>
        <p>1.下载题目导入模板文件。</p>
        <p>2.按要求格式填写题目信息。</p>
        <p>3.在模板内录入信息后，上传文件导入题目。</p>
        <p>4.点击导入题目，选择已完成录入的文件，平台将会验证数据的正确性。</p>
        <p>5.若发现错误，会给予提示，重新修正后再次上传:若无错误，即将数据导入到平台中。</p>
        <p><a @click="downloadByUrl({ url: '/downPath/stdrmb.xls', target: '_self', fileName: '试题导入模板.xls' })">
            <Icon icon="ant-design:download-outlined" :size="20" />导入模板下载
          </a></p>
      </div>
      <div style="text-align: center; margin-top: 20px; margin-bottom: 20px">
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="importXls">导入试题</j-upload-button>
      </div>
    </a-modal>

    <a-modal title="手动添加" :style="{ width: computedWidth }" :visible="addOpen" :maskClosable="false" @cancel="addOpen = false"
      cancelText="关闭" @ok="handleOk">
      <div class="sdtj-div">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :lg="4" style="padding: 10px">
            <a-card title="可选题型" style="height: 360px; border: 1px solid #e8e8e8">
              <p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(3)">单选题</a-button>
              </p>
              <p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(4)">多选题</a-button>
              </p>
              <p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(5)">填空题</a-button>
              </p>
              <p><a-button type="primary" preIcon="ant-design:check-square-outlined" @click="addTigan(8)">文件题</a-button>
              </p>
              <p><a-button type="primary" preIcon="ant-design:check-square-outlined"
                  @click="addTigan(502)">简答题</a-button></p>
              <p><a-button type="primary" preIcon="ant-design:check-square-outlined"
                  @click="addTigan(305)">判断题</a-button></p>
            </a-card>
          </a-col>
          <a-col :xs="24" :lg="20" style="overflow-y: scroll; min-height: 100px">
            <draggable :handle="isSmallScreen ? '.drag-handle' : null" @end="end" v-model="tiganData" item-key="id">
              <template #item="{ index, element: item }">
                <div>
                  <!-- 单选题 -->
                  <div style="width: 100%" v-if="(item.wjType == 3 || item.wjType == '3') && item.wjSubtype == null">
                    <a-card>
                      <template #title>
                        <div>
                          <a-row>
                            <a-col :span="11">
                              <span>{{ index + 1 }}、<span style="color: #c2bfbf">[单选题]</span></span>
                            </a-col>
                            <a-col :span="13" style="text-align: right;">
                              <a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
                                <a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
                                  v-if="item.wjSfqh == '0'" :disabled="editDisabled">
                                  <a-select-option :value="item" v-for="(item) in scoreData">{{item}}</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: 5px"
                                  @click="handleDelTigan(item, index)" v-if="!editDisabled" />
                              </a-tooltip>
                              <Icon
                                v-if="isSmallScreen && !editDisabled"
                                icon="pixelarticons:chevrons-vertical"
                                class="drag-handle"
                                style="cursor: move; font-size: 20px; margin-right: 10px;"
                              />
                            </a-col>
                          </a-row>
                        </div>
                        <JEditor2  placeholder="请填写文件题题干" v-model:value="item.wjTitle" :bordered="false"
                          :style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
                          v-if="!editDisabled" />
                        <div v-else v-html="item.wjTitle"></div>

                        <div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
                          <j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
                            :disabled="editDisabled" />
                        </div>
                      </template>
                      <a-row v-if="isShow">
                        <a-col :span="24" style="color: darkgrey; font-size: 13px"> 注：选中即为正确答案 </a-col>
                      </a-row>
                      <a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default"
                        :disabled="!isShow">
                        <div style="width: 100%" v-for="(tmxx, index) in item.wjxWjxxTmxxList" :key="index">
                          <a-radio :value="tmxx.itemIndex + ``" style="width: 100%">
                            <a-input placeholder="请填写选项" v-model:value="tmxx.itemTitle" :style="{ width: '30rem' }"
                              :bordered="false" :disabled="editDisabled" />
                            <span style="color: #ecb646" v-if="item.itemSelected == tmxx.itemIndex">(正确答案)</span>
                            <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)" v-if="!editDisabled" />
                            </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)" v-if="!editDisabled" />
                            </a-tooltip>
                          </a-radio>
                        </div>
                      </a-radio-group>
                    </a-card>
                  </div>
                  <!-- 多选题 -->
                  <div style="width: 100%" v-else-if="item.wjType == 4 || item.wjType == '4'">
                    <a-card>
                      <template #title>

                        <div>
                          <a-row>
                            <a-col :span="11">
                              <span>{{ index + 1 }}、<span style="color: #c2bfbf">[多选题]</span></span>
                            </a-col>
                            <a-col :span="13" style="text-align: right;">
                              <a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
                                <a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
                                  v-if="item.wjSfqh == '0'" :disabled="editDisabled">
                                  <a-select-option :value="item" v-for="(item) in scoreData">{{item}}</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: 5px"
                                  @click="handleDelTigan(item, index)" v-if="!editDisabled" />
                              </a-tooltip>
                              <Icon
                                v-if="isSmallScreen && !editDisabled"
                                icon="pixelarticons:chevrons-vertical"
                                class="drag-handle"
                                style="cursor: move; font-size: 20px; margin-right: 10px;"
                              />
                            </a-col>
                          </a-row>
                        </div>
                        <JEditor2 placeholder="请填写多选题题干" v-model:value="item.wjTitle" :bordered="false"
                          :style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
                          v-if="!editDisabled" />
                        <div v-else v-html="item.wjTitle"></div>

                        <div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
                          <j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
                            :disabled="editDisabled" />
                        </div>
                      </template>
                      <a-row v-if="isShow">
                        <a-col :span="24" style="color: darkgrey; font-size: 13px"> 注：选中即为正确答案 </a-col>
                      </a-row>
                      <a-checkbox-group v-model:value="item.itemSelected" style="width: 100%" :disabled="!isShow"
                        @change="handleChecked">
                        <a-row>
                          <a-col :span="24" v-for="(tmxx, index) in item.wjxWjxxTmxxList" :key="index">
                            <!-- -{{item.itemSelected}}-{{tmxx.itemIndex}} -->
                            <a-checkbox :value="tmxx.itemIndex"><a-input placeholder="请填写选项"
                                v-model:value="tmxx.itemTitle" :bordered="false" :style="{ width: '30rem' }"
                                :disabled="editDisabled" /></a-checkbox>
                            <span style="color: #ecb646" v-if="cheGrp(item.itemSelected, tmxx.itemIndex)">(正确答案)</span>
                            <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)" v-if="!editDisabled" />
                            </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)" v-if="!editDisabled" />
                            </a-tooltip>
                          </a-col>
                        </a-row>
                      </a-checkbox-group>
                    </a-card>
                  </div>
                  <!-- 填空题 -->
                  <div style="width: 100%"
                    v-else-if="(item.wjType == 5 || item.wjType == '5') && item.wjSubtype == null">
                    <a-card>
                      <template #title>
                        <div>
                          <a-row>
                            <a-col :span="11">
                              <span>{{ index + 1 }}、<span style="color: #c2bfbf">[填空题]</span></span>
                            </a-col>
                            <a-col :span="13" style="text-align: right;">
                              <a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
                                <a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
                                  v-if="item.wjSfqh == '0'" :disabled="editDisabled">

                                  <a-select-option :value="item" v-for="(item) in scoreData">{{item}}</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: 5px"
                                  @click="handleDelTigan(item, index)" v-if="!editDisabled" />
                              </a-tooltip>
                              <Icon
                                v-if="isSmallScreen && !editDisabled"
                                icon="pixelarticons:chevrons-vertical"
                                class="drag-handle"
                                style="cursor: move; font-size: 20px; margin-right: 10px;"
                              />
                            </a-col>
                          </a-row>
                        </div>
                        <JEditor2 placeholder="请填写填空题题干" v-model:value="item.wjTitle" :bordered="false"
                          :style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
                          v-if="!editDisabled" />
                        <div v-else v-html="item.wjTitle"></div>

                        <div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
                          <j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
                            :disabled="editDisabled" />
                        </div>
                      </template>
                      <a-row>
                        <a-col :span="24">
                          <a-textarea placeholder="请填写答案" v-model:value="item.wjAnswer" :bordered="false"
                            style="width: 100%" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled" />
                        </a-col>
                      </a-row>
                    </a-card>
                  </div>
                  <!-- 文件上传 -->
                  <div style="width: 100%" v-else-if="item.wjType == 8 || item.wjType == '8'">
                    <a-card>
                      <template #title>
                        <div>
                          <a-row>
                            <a-col :span="11">
                              <span>{{ index + 1 }}、<span style="color: #c2bfbf">[文件题]</span></span>
                            </a-col>
                            <a-col :span="13" style="text-align: right;">
                              <a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
                                <a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
                                  v-if="item.wjSfqh == '0'" :disabled="editDisabled">

                                  <a-select-option :value="item" v-for="(item) in scoreData">{{item}}</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: 5px"
                                  @click="handleDelTigan(item, index)" v-if="!editDisabled" />
                              </a-tooltip>
                              <Icon
                                v-if="isSmallScreen && !editDisabled"
                                icon="pixelarticons:chevrons-vertical"
                                class="drag-handle"
                                style="cursor: move; font-size: 20px; margin-right: 10px;"
                              />
                            </a-col>
                          </a-row>
                        </div>
                        <JEditor2 placeholder="请填写文件题题干" v-model:value="item.wjTitle" :bordered="false"
                          :style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
                          v-if="!editDisabled" />
                        <div v-else v-html="item.wjTitle"></div>

                        <div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
                          <j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
                            :disabled="editDisabled" />
                        </div>
                      </template>
                    </a-card>
                  </div>
                  <!-- 判断题 -->
                  <div style="width: 100%"
                    v-else-if="(item.wjType == 3 || item.wjType == '3') && (item.wjSubtype == 305 || item.wjSubtype == '305')">
                    <a-card>
                      <template #title>
                        <div>
                          <a-row>
                            <a-col :span="11">
                              <span>{{ index + 1 }}、<span style="color: #c2bfbf">[判断题]</span></span>
                            </a-col>
                            <a-col :span="13" style="text-align: right;">
                              <a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
                                <a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
                                  v-if="item.wjSfqh == '0'" :disabled="editDisabled">
                                  <a-select-option :value="item" v-for="(item) in scoreData">{{item}}</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: 5px"
                                  @click="handleDelTigan(item, index)" v-if="!editDisabled" />
                              </a-tooltip>
                              <Icon
                                v-if="isSmallScreen && !editDisabled"
                                icon="pixelarticons:chevrons-vertical"
                                class="drag-handle"
                                style="cursor: move; font-size: 20px; margin-right: 10px;"
                              />
                            </a-col>
                          </a-row>
                        </div>
                        <JEditor2 placeholder="请填写文件题题干" v-model:value="item.wjTitle" :bordered="false"
                          :style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
                          v-if="!editDisabled" />
                        <div v-else v-html="item.wjTitle"></div>

                        <div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
                          <j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
                            :disabled="editDisabled" />
                        </div>
                      </template>
                      <a-row v-if="isShow">
                        <a-col :span="24" style="color: darkgrey; font-size: 13px"> 注：选中即为正确答案 </a-col>
                      </a-row>
                      <a-radio-group v-model:value="item.itemSelected" style="width: 100%" size="default"
                        :disabled="!isShow">
                        <div style="width: 100%" v-for="(tmxx, index) in item.wjxWjxxTmxxList" :key="index">
                          <a-radio :value="tmxx.itemIndex + ``" style="width: 100%">
                            <a-input placeholder="请填写选项" v-model:value="tmxx.itemTitle" :style="{ width: '30rem' }"
                              :bordered="false" :disabled="editDisabled" />
                            <span style="color: #ecb646" v-if="item.itemSelected == tmxx.itemIndex">(正确答案)</span>
                            <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)" v-if="!editDisabled" />
                            </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)" v-if="!editDisabled" />
                            </a-tooltip>
                          </a-radio>
                        </div>
                      </a-radio-group>
                    </a-card>
                  </div>
                  <!-- 简答题 -->
                  <div style="width: 100%"
                    v-else-if="(item.wjType == 5 || item.wjType == '5') && (item.wjSubtype == 5 || item.wjSubtype == '5')">
                    <a-card>
                      <template #title>
                        <div>
                          <a-row>
                            <a-col :span="11">
                              <span>{{ index + 1 }}、<span style="color: #c2bfbf">[简答题]</span></span>
                            </a-col>
                            <a-col :span="13" style="text-align: right;">
                              <a-tooltip placement="topLeft" title="题目分数" v-if="isShow">
                                <a-select style="width: 120px" v-model:value="item.wjScore" placeholder="请选择分数"
                                  v-if="item.wjSfqh == '0'" :disabled="editDisabled">
                                  <a-select-option :value="item" v-for="(item) in scoreData">{{item}}</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: 5px"
                                  @click="handleDelTigan(item, index)" v-if="!editDisabled" />
                              </a-tooltip>
                              <Icon
                                v-if="isSmallScreen && !editDisabled"
                                icon="pixelarticons:chevrons-vertical"
                                class="drag-handle"
                                style="cursor: move; font-size: 20px; margin-right: 10px;"
                              />
                            </a-col>
                          </a-row>
                        </div>
                        <JEditor2 placeholder="请填写简答题题干" v-model:value="item.wjTitle" :bordered="false"
                          :style="{ width: '30rem' }" :auto-size="{ minRows: 1, maxRows: 5 }" :disabled="editDisabled"
                          v-if="!editDisabled" />
                        <div v-else v-html="item.wjTitle"></div>

                        <div style="text-align: right;color: #c2bfbf" v-if="isShow">是否加入题库：
                          <j-dict-select-tag type='radio' v-model:value="item.sftjtk" dictCode="yn" placeholder="是否加入题库"
                            :disabled="editDisabled" />
                        </div>
                      </template>
                    </a-card>
                  </div>


                  <div v-else> 无对应类型 </div>
                </div>
              </template>
            </draggable>

            <!-- 题干信息 -->
            <div style="width: 100%" v-for="(item, index) in tiganData" :key="index"> </div>
          </a-col>
        </a-row>
      </div>
    </a-modal>


    <!-- 表单区域 -->
    <WjxWjxxTmlbModal @register="registerModal" @success="handleSuccess"></WjxWjxxTmlbModal>

  </div>
</template>

<script lang="ts" name="wjxWjxxTmlb-siyou" setup>
import { ref, reactive, watch, computed, unref, onMounted, onUnmounted } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { useModal } from '/@/components/Modal';
import { defHttp } from '/@/utils/http/axios';
import WjxWjxxTmlbModal from './components/WjxWjxxTmlbModal.vue';
import { columns, searchFormSchema } from './WjxWjxxTmlb.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl, distinctList } from './WjxWjxxTmlb.api';
import { downloadFile } from '/@/utils/common/renderUtils';
import { JInput, JDictSelectTag } from '/@/components/Form';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import { useGlobSetting } from '/@/hooks/setting';
import { downloadByUrl } from '/@/utils/file/download';
import draggable from 'vuedraggable';
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
import JEditor2 from '/@/components/Form/src/jeecg/components/JEditor2.vue';

//用户相关
const userStore = useUserStore();
const checkedKeys = ref<Array<string | number>>([]);
const importOpen = ref<boolean>(false);
const addOpen = ref<boolean>(false);
const glob = useGlobSetting();
// 定义一个响应式的宽度
const width = ref('80%');

const tiganData = ref<any>([]);
const isShow = ref<boolean>(true);
const mainId = ref<string>('');
const wjLeixing = ref<string>('6');
  const editDisabled = ref<boolean>(false);
// const wjLeixing = ref<string>('');
//注册model
const [registerModal, { openModal }] = useModal();
const { createConfirm, createMessage, createWarningModal } = useMessage();
const scoreData = [
  1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,60,70,80,90,100
]
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    //  title: '题目信息',
    api: distinctList,
    columns,
    canResize: false,
    useSearchForm: false,
    actionColumn: {
      width: 320,
    },
    beforeFetch: (params) => {
      (params.column = 'id'), (params.order = 'desc'); //新生成的默认不带排序
      return Object.assign(params, queryParam.value);
    },
  },
  exportConfig: {
    name: '题目信息',
    url: getExportUrl,
  },
  importConfig: {
    url: getImportUrl,
    success: handleSuccess,
  },
});

const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

const props = defineProps({
  wjLeixing: { type: String },
});
//监听条件变化
watch(
  () => props.wjLeixing,
  async (newRow, oldRow) => {
    console.log(`🚀 ~ watch ~ newRow, oldRow:`, newRow, oldRow);
    queryParam.value.wjLeixing = newRow;
  },
  { deep: true }
);

function handleOk() {
  const data = tiganData.value;
  console.log('🧝‍♀️', data);
  defHttp.post({ url: '/wjxWjxxTmlb/wjxWjxxTmlb/addNew', params: {addList:data} }).then((res) => {
    console.log('👞', res);
    addOpen.value = false;
    searchQuery();
  });
}

function handleChecked(record) {
  record = record + '';
}
/**
 * 拖动结束事件
 * @param evt
 */
function end(evt) {
  for (var i = 0; i < tiganData.value.length; i++) {
    tiganData.value[i].wjIndex = i + 1;
  }
}

function cheGrp(a, b) {
  var retChe = false;
  if (a) {
    for (var i = 0; i < a.length; i++) {
      if (a[i] == b) {
        retChe = true;
        break;
      }
    }
  }

  return retChe;
}
//添加选项
function handleAddTmxx(record, index, list) {
  var itemIndex = 0;
  for (var i = 0; i < list.length; i++) {
    var lssx = list[i].itemIndex;
    if (itemIndex < parseInt(lssx)) {
      itemIndex = lssx;
    }
  }

  list.push({ itemTitle: null, itemIndex: parseInt(itemIndex) + 1 });
}

//删除选项
function handleRemTmxx(record, index, list) {
  if (list.length <= 2) {
    createMessage.error('至少保留两个选项');
  } else {
    list.splice(index, 1);
  }
}
//计算输入框宽度
function handinpwei(value) {
  if (!value) {
    return '20rem';
  } else {
    if (String(value).length * 1.1 < 20) {
      return '20rem';
    } else if (String(value).length * 1.1 > 60) {
      return '60rem';
    } else {
      return String(value).length * 1.1 + 'rem';
    }
  }
}
//切换题目分数类型
function handleQiehuan(record, type) {
  console.log(`🚀 ~ handleQiehuan ~ type:`, type);
  console.log(`🚀 ~ handleQiehuan ~ record:`, record);
  record.wjSfqh = type;
}
//删除题目
function handleDelTigan(record, index) {
  tiganData.value.splice(index, 1);
  for (var i = 0; i < tiganData.value.length; i++) {
    tiganData.value[i].wjIndex = i + 1;
  }
}

//添加单选题
function addTigan(type) {
  var list = tiganData.value;
  //单选题
  if (type == 3) {
    var chk = '';
    if (isShow.value) {
      chk = '1';
    }
    let params = {
      wjType: parseInt(type),
      wjIndex: list.length + 1,
      mainId: mainId,
      wjTitle: null,
      wjScore: null,
      wjLeixing,
      itemSelected: chk,
      wjSfqh: '0',
      sftjtk: '1',
      wjxWjxxTmxxList: [
        { itemTitle: null, itemIndex: '1' },
        { itemTitle: null, itemIndex: '2' },
      ],
    };
    console.log('💇‍♀️', params);
    list.push(params);
    console.log('👩‍🔬', list);
    tiganData.value = [...list];
    //多选题
  } else if (type == 4) {
    let chk = '';
    if (isShow.value) {
      chk = '1,2';
    }
    let params = {
      wjType: parseInt(type),
      wjIndex: list.length + 1,
      mainId: mainId,
      wjTitle: null,
      wjScore: null,
      wjLeixing,
      itemSelected: chk,
      wjSfqh: '0',
      sftjtk: '1',
      wjxWjxxTmxxList: [
        { itemTitle: null, itemIndex: '1' },
        { itemTitle: null, itemIndex: '2' },
      ],
    };
    list.push(params);
    tiganData.value = [...list];
    //填空题
  } else if (type == 5) {
    let params = {
      wjType: parseInt(type),
      wjSubtype: null,
      wjIndex: list.length + 1,
      mainId: mainId,
      wjTitle: null,
      wjScore: null,
      wjLeixing,
      wjAnswer: null,
      wjSfqh: '0',
      sftjtk: '1',
    };
    list.push(params);
    tiganData.value = [...list];
    //文件题
  } else if (type == 8) {
    var chk = '';
    if (isShow.value) {
      chk = '1';
    }
    let params = {
      wjType: parseInt(type),
      wjIndex: list.length + 1,
      mainId: mainId,
      wjTitle: null,
      wjScore: null,
      wjLeixing,
      wjSfqh: '0',
      sftjtk: '1',
    };
    list.push(params);
    tiganData.value = [...list];
    //判断题
  }else if (type == 305) {
    var chk = '';
    if (isShow.value) {
      chk = '1';
    }
    let params = {
      wjType: 3,
      wjSubtype: 305,
      wjIndex: list.length + 1,
      mainId: mainId,
      wjTitle: null,
      wjScore: null,
      wjLeixing,
      itemSelected: chk,
      wjSfqh: '0',
      sftjtk: '1',
      wjxWjxxTmxxList: [
        { itemTitle: '对', itemIndex: '1' },
        { itemTitle: '错', itemIndex: '2' },
      ],
    };
    list.push(params);
    tiganData.value = [...list];
  } else if (type == 502) {
    let params = {
      wjType: 5,
      wjSubtype: 5,
      wjIndex: list.length + 1,
      mainId: mainId,
      wjTitle: null,
      wjScore: null,
      wjLeixing,
      wjAnswer: null,
      wjSfqh: '0',
      sftjtk: '1',
    };
    list.push(params);
    tiganData.value = [...list];
    //文件题
  } 
}
/**
 * 导入xls
 * @param data 导入的数据
 * @param url
 */
async function importXls(data, url) {
  // url = '/wjxWjxxTmlb/wjxWjxxTmlb/importTmlbExcel?mainId=1234';
  url = '/wjxWjxxTmlb/wjxWjxxTmlb/importTmlbExcel';
  const isReturn = (fileInfo) => {
    try {
      if (fileInfo.code === 201) {
        let {
          message,
          result: { msg, fileUrl, fileName },
        } = fileInfo;
        let href = glob.uploadUrl + fileUrl;
        createWarningModal({
          title: message,
          centered: false,
          content: `<div>
              <span>${msg}</span><br/>
              <span>具体详情请<a href = ${href} download = ${fileName}> 点击下载 </a> </span>
            </div>`,
        });
        //update-begin---author:wangshuai ---date:20221121  for：[VUEN-2827]导入无权限，提示图标错误------------
      } else if (fileInfo.code === 500 || fileInfo.code === 510) {
        createMessage.error(fileInfo.message || `${data.file.name} 导入失败`);
        //update-end---author:wangshuai ---date:20221121  for：[VUEN-2827]导入无权限，提示图标错误------------
      } else {
        createWarningModal({
          centered: false,
          content: `<div>
              <span>${fileInfo.message}</span><br/>
            </div>`,
        });
      }
    } catch (error) {
      console.log('导入的数据异常', error);
    } finally {
    }
  };
  await defHttp.uploadFile({ url }, { file: data.file }, { success: isReturn });
}

/**
 * 编辑事件
 */
function handleEdit(record: Recordable, wjSytype) {
  defHttp.post({ url: '/wjxWjxxTmlb/wjxWjxxTmlb/editSwgysy', params: { id: record.id, wjSytype } }).then((res) => {
    reload();
  });
}
/**
 * 详情
 */
 function handleDetail(record: Recordable) {
  // 添加自定义类名
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: false,
    className: 'custom-modal-detail', // 添加自定义类名
  });
}
/**
 * 详情
 */
function handleEdit2(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}
/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}

/**
 * 删除事件
 */
  async function handleDelete(record) {
  await deleteOne({ id: record.id }, handleSuccess);
}
/**
 * 移出题库
 */
function handleYctk(record){
console.log("🚀 ~ handleYctk ~ record:", record)
  defHttp.post({url:'/wjxWjxxTmlb/wjxWjxxTmlb/yctk',params:{wjTitle:record.wjTitle,createBy:record.createBy}}).then(res=>{
    console.log('res--->',res);
    reload();
  })
}

/**
 * 操作栏
 */
function getTableAction(record) {
    return [
      {
        label: '设为私有',
        onClick: handleEdit.bind(null, record, '0'),
        ifShow:record.wjSytype == '1'
      },
      {
        label: '设为公有',
        onClick: handleEdit.bind(null, record, '1'),
        ifShow:record.wjSytype == '0'
      },
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
      {
        label: '删除',
        onClick: handleDelete.bind(null, record),
        ifShow: (record.mainId == '' || record.mainId == null),
      },
      {
        label: '移出题库',
        onClick: handleYctk.bind(null, record),
      },
      {
        label: '修改',
        onClick: handleEdit2.bind(null, record),
        ifShow: (record.mainId == '' || record.mainId == null),
      },
      {
        label: '已使用不能修改',
        ifShow: (record.mainId != '' && record.mainId != null),
        disabled: true,
      },
    ];
  // if (record.wjSytype == '0') {
  //   return [
  //     {
  //       label: '设为公有',
  //       onClick: handleEdit.bind(null, record, '1'),
  //     },
  //     {
  //       label: '详情',
  //       onClick: handleDetail.bind(null, record),
  //       ifShow: (record.mainId == '' || record.mainId == null),
  //     },
  //     {
  //       label: '详情',
  //       onClick: handleDetail.bind(null, record),
  //       ifShow: (record.mainId == '' || record.mainId == null),
  //     },
  //   ];
  // } else {
  //   return [
  //     {
  //       label: '设为私有',
  //       onClick: handleEdit.bind(null, record, '0'),
  //     },
  //     {
  //       label: '详情',
  //       onClick: handleDetail.bind(null, record),
  //     },
  //   ];
  // }
}

/* ----------------------以下为原生查询需要添加的-------------------------- */
const queryParam = ref<any>({});
const toggleSearchStatus = ref<boolean>(false);
const labelCol = reactive({
  xs: { span: 24 },
  sm: { span: 7 },
});
const wrapperCol = reactive({
  xs: { span: 24 },
  sm: { span: 16 },
});

/**
 * 查询
 */
function searchQuery() {
  reload();
}
/**
 * 重置
 */
function searchReset() {
  queryParam.value = {};
  selectedRowKeys.value = [];
  //刷新数据
  reload();
}

// 计算属性来决定实际使用的宽度
const computedWidth = computed(() => {
  return isSmallScreen.value ? '90%' : width.value;
});

// 响应式地检查是否是小屏幕
const isSmallScreen = ref(false);

// 更新 isSmallScreen 的函数
const updateScreenWidth = () => {
  isSmallScreen.value = window.innerWidth < 600; // 你可以调整这个断点
};


onUnmounted(() => {
  window.removeEventListener('resize', updateScreenWidth);
});

onMounted(() => {
  // 监听窗口大小变化
  window.addEventListener('resize', updateScreenWidth);
  // 初始化时也调用一次
  updateScreenWidth();

  // wjLeixing.value = "1";
  // console.log(`🚀 ~ onMounted ~ wjLeixing:`, wjLeixing)
  // queryParam.value.wjLeixing = wjLeixing;
  queryParam.value.createBy = userStore.getUserInfo.username;
  queryParam.value.sftjtk = "1";
  reload();
});
</script>
<style lang="less" scoped>
@media (max-width: 768px) {
  .sdtj-div {
    padding: 0;
    margin: 0;
  }
}

@media (min-width: 769px) {
  .sdtj-div {
    padding: 20px;
    margin: 20px;
  }
}

.jeecg-basic-table-form-container {
  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
  .query-group-cust {
    width: calc(50% - 15px);
    min-width: 100px !important;
  }
  .query-group-split-cust {
    width: 30px;
    display: inline-block;
    text-align: center;
  }
}
  /deep/.ant-card-head-title {
    padding:0px;
  }

.custom-modal-detail .ant-card-head-title {
  white-space: normal !important; /* 覆盖原有的 white-space: nowrap */
}


</style>