pbl-teacher-table/src/components/pages/workPage/components/setChoiceQuestion.vue

<template>
  <div class="setChoiceQuestion">
    <div class="testItem" v-for="(item, index) in jsonData.testJson" :key="item.id">
      <div class="ti_header">
        <span>{{ lang.ssTopic }}{{ index + 1 }} <span v-if="item.answer.length==0 || item.checkList.some(opt=>!opt)">{{lang.ssNoSettingAnswer}}</span></span>
        <div class="ti_h_edit">
          <span @click="copyTest(item.id)">
            <!-- <svg viewBox="0 0 1024 1024" version="1.1" p-id="4608" width="200" height="200">
              <path
                d="M731.68184 676.057473 731.68184 183.323259c0-30.233582-24.512277-54.745858-54.747905-54.745858L184.216093 128.577401c-30.233582 0-54.746882 24.512277-54.746882 54.745858l0 492.734214c0 30.207999 24.5133 54.746882 54.746882 54.746882l492.717841 0C707.16854 730.804355 731.68184 706.265472 731.68184 676.057473zM622.1891 676.057473 238.962975 676.057473c-30.233582 0-54.746882-24.538883-54.746882-54.745858L184.216093 238.07014c0-30.233582 24.5133-54.746882 54.746882-54.746882l383.226125 0c30.233582 0 54.744835 24.512277 54.744835 54.746882l0 383.242498C676.933935 651.51859 652.421658 676.057473 622.1891 676.057473zM841.17458 292.817022l-54.745858 0 0 54.746882c30.232558 0 54.745858 24.5133 54.745858 54.759161l0 383.228171c0 30.206976-24.5133 54.745858-54.745858 54.745858L403.201573 840.297095c-30.233582 0-54.746882-24.538883-54.746882-54.745858l-54.746882 0 0 54.745858c0 30.207999 24.5133 54.747905 54.746882 54.747905l492.719888 0c30.234605 0 54.747905-24.539906 54.747905-54.747905L895.922485 347.563904C895.922485 317.329299 871.408161 292.817022 841.17458 292.817022z"
                p-id="4609"></path>
            </svg> -->
            <svg fill="#000" viewBox="0 0 1024 1024" width="200" height="200"><path d="M753.312 698.848 753.312 383.6736c0-62.048-50.3104-112.3264-112.288-112.3264L395.3024 271.3472 324.288 271.3472l-53.7344 0-29.536 0c-62.048 0-112.288 50.272-112.288 112.3264l0 400.0512c0 61.9776 50.24 112.2752 112.288 112.2752l400.0128 0c62.048 0 112.288-50.2976 112.288-112.2752l0-31.0656 0.8768 0 0-54.0352C753.888 698.624 753.6768 698.7776 753.312 698.848zM660.6016 681.728l0 42.5984c0 0.864-0.2368 1.792-0.2368 2.6688-1.4272 42.3552-36.064 76.3008-78.7328 76.3008L300.3392 803.296c-43.5968 0-78.9056-35.3664-78.9056-78.9696L221.4336 442.9888c0-42.2336 33.2608-76.4928 75.0144-78.5984 1.2928-0.064 2.5984-0.3712 3.8912-0.3712l41.4272 0L581.632 364.0192c43.6608 0 78.9696 35.4048 78.9696 78.9696L660.6016 681.728zM895.1232 555.5008 895.1232 240.3264c0-62.048-50.3104-112.3264-112.288-112.3264L537.1136 128 466.0992 128l-53.7344 0-29.536 0c-62.048 0-112.288 50.272-112.288 112.3264l0 4.4736 115.0784 0c13.4912-13.8112 32.0256-22.72 52.6464-23.7568 1.2864-0.064 2.592-0.3712 3.8848-0.3712l41.4272 0 239.8656 0c43.6608 0 78.9696 35.4048 78.9696 78.9696l0 238.7328 0 42.5984c0 0.864-0.2368 1.792-0.2368 2.6688-0.8768 25.9136-14.208 48.6336-34.176 62.4l0 106.6048 14.8352 0c62.048 0 112.288-50.2976 112.288-112.2752l0-31.0656L896 609.3056l0-54.0352C895.6992 555.2768 895.488 555.424 895.1232 555.5008z"></path></svg>
          </span>

          <!-- 上 -->
          <span :class="{'disabled': index === 0}" @click="changeIndex(item, index, 'up')">
            <svg viewBox="0 0 1024 1024" width="200" height="200" fill="#6B7280">
              <path
                d="M959.804421 511.603981l-84.009346 84.023672L576.143391 293.406446l0 665.582911L448.20351 958.989357 448.20351 293.406446 147.619594 595.628676l-84.024695-84.023672L512.213359 63.546292 959.804421 511.603981z">
              </path>
            </svg>
          </span>
          <!-- 下 -->
          <span :class="{'disabled': index === jsonData.testJson.length - 1}" @click="changeIndex(item, index, 'down')">
            <svg style="transform: rotate(180deg);" viewBox="0 0 1024 1024" width="200" height="200" fill="#6B7280">
              <path
                d="M959.804421 511.603981l-84.009346 84.023672L576.143391 293.406446l0 665.582911L448.20351 958.989357 448.20351 293.406446 147.619594 595.628676l-84.024695-84.023672L512.213359 63.546292 959.804421 511.603981z">
              </path>
            </svg>

          </span>

          <span @click="deleteTest(item.id)" v-show="jsonData.testJson.length > 1">
            <!-- <svg viewBox="0 0 1024 1024" version="1.1" p-id="12415" width="200" height="200">
              <path
                d="M902.4 282.1H117.7c-13.4 0-23.5-10.1-23.5-23.5v-3.4c0-13.4 10.1-23.5 23.5-23.5h788.1c13.4 0 23.5 10.1 23.5 23.5v3.4c0 13.4-10.1 23.5-26.9 23.5zM634.1 151.3H386c-13.4 0-26.8-10.1-23.5-23.5v-6.7c0-13.4 10.1-23.5 23.5-23.5h248.2c13.4 0 23.5 10.1 23.5 23.5v3.4c3.3 13.3-10.1 26.8-23.6 26.8z m228.1 238.1c0-13.4-10.1-26.8-26.8-26.8-16.8 0-26.8 10.1-26.8 26.8L775 798.5v13.4c0 23.5-10.1 43.6-30.2 53.7-13.4 6.7-30.2 10.1-50.3 10.1H332.3c-33.5 3.4-60.4 0-70.4-33.5-3.4-6.7-6.7-16.8-6.7-26.8l-10.1-104-36.9-322c0-13.4-10.1-23.5-23.5-23.5s-26.8 10.1-26.8 23.5l47 462.8c0 40.2 40.2 73.8 80.5 73.8h459.5c40.2 0 80.5-33.5 80.5-73.8l36.8-462.8c0 3.3 0 0 0 0z m0 0"
                p-id="12416"></path>
            </svg> -->
            <svg fill="#000" style="width: 1.2rem;height: 1.2rem;"  viewBox="0 0 1024 1024"  width="200" height="200"><path d="M921.6 371.2v537.6c0 56.32-43.52 102.4-99.84 102.4H202.24c-53.76 0-99.84-46.08-99.84-102.4v-537.6c0-28.16 23.04-51.2 51.2-51.2s51.2 23.04 51.2 51.2l-2.56 486.4c0 28.16 23.04 51.2 48.64 51.2h522.24c28.16 0 46.08-23.04 46.08-51.2v-486.4c0-28.16 23.04-51.2 51.2-51.2s51.2 23.04 51.2 51.2z m51.2-204.8H51.2c-28.16 0-51.2 23.04-51.2 51.2s23.04 51.2 51.2 51.2h921.6c28.16 0 51.2-23.04 51.2-51.2s-23.04-51.2-51.2-51.2z m-665.6-51.2h409.6c28.16 0 51.2-23.04 51.2-51.2s-23.04-51.2-51.2-51.2H307.2c-28.16 0-51.2 23.04-51.2 51.2s23.04 51.2 51.2 51.2z m128 640v-384c0-28.16-23.04-51.2-51.2-51.2s-51.2 23.04-51.2 51.2v384c0 28.16 23.04 51.2 51.2 51.2s51.2-23.04 51.2-51.2z m256 0v-384c0-28.16-23.04-51.2-51.2-51.2s-51.2 23.04-51.2 51.2v384c0 28.16 23.04 51.2 51.2 51.2s51.2-23.04 51.2-51.2z" fill="#000"></path></svg>
            <!-- <svg fill="#000" style="width: 1.2rem;height: 1.2rem;"  viewBox="0 0 1024 1024" width="200" height="200"><path d="M835.226046 328.70941a44.817364 44.817364 0 0 0-45.10981 44.524918v513.681565a48.107383 48.107383 0 0 1-48.546052 47.814937H282.356704a48.107383 48.107383 0 0 1-48.546051-47.814937V373.234328c0-24.565472-20.178781-44.524918-45.109811-44.524918s-45.182922 19.959446-45.182921 44.524918v513.681565c0 75.377981 62.144795 136.645438 138.69256 136.645438h459.140369c76.547765 0 138.69256-61.267457 138.69256-136.645438V373.234328a44.598029 44.598029 0 0 0-44.817364-44.524918z m-165.597601 447.881194v-403.57561a44.817364 44.817364 0 0 0-45.182922-44.451807 44.744252 44.744252 0 0 0-44.963587 44.451807v403.57561c0 24.565472 20.251892 44.451806 45.182922 44.451806a44.598029 44.598029 0 0 0 44.963587-44.451806z m-225.183493 0v-403.57561a44.817364 44.817364 0 0 0-45.10981-44.451807 44.817364 44.817364 0 0 0-45.182922 44.451807v403.57561c0 24.565472 20.251892 44.451806 45.182922 44.451806 24.857918 0 45.10981-19.886334 45.10981-44.451806z m534.152792-592.13023h-148.635728v-51.178066C829.962016 59.732115 769.352563 0 694.705698 0H329.001856C254.428102 0 193.818649 59.732115 193.818649 133.282308v51.178066H45.10981c-24.93103 0-45.10981 19.959446-45.10981 44.524918s20.178781 44.451806 45.10981 44.451806h933.341711c24.93103 0 45.10981-19.886334 45.10981-44.451806s-20.032557-44.524918-44.963587-44.524918z m-238.709125 0H284.111381v-51.178066c0-24.565472 20.178781-44.451806 45.10981-44.451807h365.484507c24.93103 0 45.182922 19.886334 45.182921 44.451807v51.178066z"></path></svg> -->
            <!-- <svg fill="#000" viewBox="0 0 1024 1024" width="200" height="200"><path d="M380 455a8 8 0 0 1 8-8h64a8 8 0 0 1 8 8v240a8 8 0 0 1-8 8h-64a8 8 0 0 1-8-8V455zM644 455a8 8 0 0 0-8-8h-64a8 8 0 0 0-8 8v240a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8V455z" fill="#323338" p-id="12402"></path><path d="M321 212V96c0-17.673 14.327-32 32-32h320c17.673 0 32 14.327 32 32v116h183a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8h-55v635c0 17.673-14.327 32-32 32H225c-17.673 0-32-14.327-32-32V292h-58a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8h186z m80-68v68h224v-68H401zM273 292v587h480V292H273z" ></path></svg> -->
          </span>
        </div>
      </div>

      <div class="ti_title">
        <el-input class="ti_t_input" type="textarea" v-model="item.teststitle" :rows="3" :autosize="{ minRows: 3, maxRows: 6 }" resize="none" :placeholder="lang.ssEnterTextTitle" @input="setTestTitle(item.id)"></el-input>
        <div class="uploadImage" @click="uploadImage(item.id)">
          <svg viewBox="0 0 1024 1024" version="1.1" p-id="15953" width="200" height="200">
            <path
              d="M368 480c-62.4 0-112-49.6-112-112s49.6-112 112-112 112 49.6 112 112-49.6 112-112 112z m0-160c-27.2 0-48 20.8-48 48s20.8 48 48 48 48-20.8 48-48-20.8-48-48-48z m464 608H192c-52.8 0-96-43.2-96-96V192c0-52.8 43.2-96 96-96h640c52.8 0 96 43.2 96 96v640c0 52.8-43.2 96-96 96zM192 160c-17.6 0-32 14.4-32 32v640c0 17.6 14.4 32 32 32h640c17.6 0 32-14.4 32-32V192c0-17.6-14.4-32-32-32H192z m259.2 556.8c-25.6 0-51.2-11.2-70.4-30.4l-38.4-40c-12.8-12.8-33.6-12.8-46.4 0l-49.6 52.8c-12.8 12.8-32 12.8-44.8 1.6s-12.8-32-1.6-44.8l49.6-52.8c17.6-19.2 43.2-30.4 68.8-30.4s51.2 11.2 70.4 30.4l38.4 40c12.8 12.8 33.6 12.8 46.4 0l160-168c17.6-19.2 43.2-30.4 70.4-30.4s51.2 11.2 70.4 30.4L920 628.8c12.8 12.8 11.2 33.6-1.6 44.8-12.8 12.8-33.6 11.2-44.8-1.6L728 518.4c-12.8-12.8-33.6-12.8-46.4 0L521.6 688c-19.2 17.6-44.8 28.8-70.4 28.8z"
              fill="#333333" p-id="15954"></path>
          </svg>
        </div>
      </div>
      <!-- 图片 -->
      <div class="imageList">
        <div v-for="(image, imageIndex) in item.timuList" :key="item.id + '_' + imageIndex">
          <el-image style="width: 100px; height: 100px" :src="image.url" :preview-src-list="[image.url]"
            fit="cover"></el-image>
          <svg @click="delImage(item.id, imageIndex)" t="1774237005199" viewBox="0 0 1024 1024" width="200"
            height="200">
            <path
              d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM305.956571 370.395429L447.488 512 305.956571 653.604571a45.568 45.568 0 1 0 64.438858 64.438858L512 576.512l141.604571 141.531429a45.568 45.568 0 0 0 64.438858-64.438858L576.512 512l141.531429-141.604571a45.568 45.568 0 1 0-64.438858-64.438858L512 447.488 370.395429 305.956571a45.568 45.568 0 0 0-64.438858 64.438858z"
              fill="#FF2525" p-id="4716"></path>
          </svg>
        </div>
      </div>

      <!-- 选择题 -->
      <div class="checkList">
        <div class="checkItem" v-for="(check, checkIndex) in item.checkList" :key="checkIndex"
            draggable="true"
            @dragstart="dragStart($event, item, checkIndex)"
            @dragover.prevent="dragOver($event, item, checkIndex)"
            @drop="drop($event, item, checkIndex)"
            @dragend="dragEnd">
          <div class="drag" draggable="true" @dragstart="dragStart($event, item, checkIndex)">
            <svg viewBox="0 0 1024 1024" width="200" height="200">
              <path
                d="M867.995 459.647h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353z"
                p-id="9455"></path>
              <path
                d="M867.995 763.291h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353z"
                p-id="9456"></path>
              <path
                d="M156.005 260.709h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353z">
              </path>
            </svg>
          </div>
          <div class="check" :class="{ 'checked': item.answer.includes(checkIndex) }"
            @click="checkClick(item.id, checkIndex)">
            <svg v-if="item.answer.includes(checkIndex)" t="1773996159000" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5894" width="200" height="200">
              <path
                d="M404.352 685.354667L789.632 213.333333 853.333333 267.52 409.941333 810.666667 170.666667 566.4l58.581333-59.818667z"
                p-id="5895"></path>
            </svg>
          </div>
          <el-input v-model="item.checkList[checkIndex]" :placeholder="lang.ssEnterOption"
            @input="setTestJson()"></el-input>
          <div class="btn">

            <div @click="addCheck(item.id, checkIndex)">
              <svg style="width: 1.1rem; height: 1.1rem;" viewBox="0 0 1024 1024" width="200" height="200">
                <path
                  d="M47.653 439.326c-24.501 0-44.368 19.881-44.368 44.4v56.548c0 24.492 19.862 44.4 44.368 44.4h928.694c24.501 0 44.368-19.881 44.368-44.4v-56.548c0-24.497-19.862-44.4-44.368-44.4H47.653z"
                  p-id="11474"></path>
                <path
                  d="M586.326 47.653c0-24.501-19.881-44.368-44.4-44.368h-56.548c-24.492 0-44.4 19.862-44.4 44.368v928.694c0 24.501 19.881 44.368 44.4 44.368h56.548c24.497 0 44.4-19.862 44.4-44.368V47.653z">
                </path>
              </svg>
            </div>

            <div @click="delCheck(item.id, checkIndex)" v-if="item.checkList.length > 2">
              <svg viewBox="0 0 1024 1024" width="200" height="200">
                <path
                  d="M632.117978 513.833356l361.805812 361.735298a85.462608 85.462608 0 1 1-121.001515 120.789974L511.116463 634.552816 146.913186 998.756094a86.026718 86.026718 0 0 1-121.706652-121.706652L389.480325 512.775651 27.674513 150.969839A85.392095 85.392095 0 0 1 148.393973 30.250379L510.199785 392.056191l366.671258-366.671258a86.026718 86.026718 0 0 1 121.706652 121.706652z">
                </path>
              </svg>
            </div>
          </div>
        </div>
        <div class="addCheck" @click="addCheck(item.id)">
          <svg viewBox="0 0 1024 1024" version="1.1" p-id="2732" width="200" height="200">
            <path
              d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
              p-id="2733"></path>
          </svg>
          <span>{{ lang.ssOption }}</span>
        </div>
      </div>

      <!-- 解释说明 -->
      <div class="explanation">
        <div class="e_header">
          <span>{{ lang.ssExplanationTip }}</span>
          <div v-show="false">
            <svg t="1774233113566" viewBox="0 0 1027 1024" width="200" height="200">
              <path
                d="M511.979521 544.586217a54.525819 54.525819 0 0 1-23.359066-5.247791L31.038758 321.427143a54.397824 54.397824 0 0 1 0-98.236071L488.620455 5.279789c14.719411-7.039718 31.99872-7.039718 46.718131 0l457.581697 217.911283a54.397824 54.397824 0 0 1 0 98.236071l-457.581697 217.911283A54.525819 54.525819 0 0 1 511.979521 544.586217zM180.984761 272.341106L511.979521 429.966801l331.058757-157.625695L511.979521 114.587417 180.984761 272.341106z m354.417823 746.402144l457.517699-217.911283a54.397824 54.397824 0 1 0-46.718131-98.236071L511.979521 909.371625l-434.158634-206.775729a54.397824 54.397824 0 0 0-46.718131 98.236071l457.581697 217.911283a54.525819 54.525819 0 0 0 46.718131 0z m0-239.73441l457.517699-217.847286a54.397824 54.397824 0 1 0-46.718131-98.300068L511.979521 669.573217l-434.158634-206.711731a54.397824 54.397824 0 0 0-46.718131 98.300068l457.581697 217.847286a54.525819 54.525819 0 0 0 46.718131 0z"
                p-id="9073"></path>
            </svg>
            <span>{{ lang.ssAIGenerate }}</span>
          </div>
        </div>
        <el-input type="textarea" rows="3" style="font-size: 1.2rem;" resize="none" v-model="item.explanation"
          :placeholder="lang.ssEnterExplanation" @input="setTestJson()"></el-input>
      </div>
    </div>


    <!-- 添加题目 -->
    <div class="addTest" @click="addTest()">
      <svg viewBox="0 0 1024 1024" version="1.1" p-id="2732" width="200" height="200">
        <path
          d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
          p-id="2733"></path>
      </svg>
      <span>{{ lang.ssTopic }}</span>
    </div>

  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import { uploadOneFile } from '@/components/tools/uploadFile'
export default {
  emits: ['setTestJson', 'save'],
  props: {
    workData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      jsonData: {},
      dragItem: null,
      delJson:null,
    }
  },
  watch: {
    workData: {
      handler(newVal, oldVal) {
        if (newVal.type == 45) {
          if (JSON.stringify(newVal.json) != JSON.stringify(this.jsonData)) {
            let editJson = JSON.parse(JSON.stringify(newVal.json))
            editJson.testJson.forEach(item => {
              if(typeof item.answer == 'string' || typeof item.answer == 'number'){
                item.answer = [item.answer];
              }
            })
            this.jsonData = editJson;
            if(this.jsonData.testJson.length == 0){
              this.addTest();
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 更新题目
    setTestJson() {
      // console.log(this.jsonData)
      this.jsonData.testCount = this.jsonData.testJson.length;
      this.$emit('setTestJson', this.jsonData);
    },
    // 添加题目
    addTest() {
      this.jsonData.testJson.push({
        id: uuidv4(),
        type: "2",
        teststitle: "",
        checkList: ['', '', ''],
        timuList: [],
        answer: [],
        userAnswer: [],
        explanation: '',
      });
      this.setTestJson();
    },
    //修改标题
    setTestTitle(id, target) {
      // let title = target.innerText;
      // let test = this.jsonData.testJson.find(item => item.id == id);
      // if (test) {
      //   test.teststitle = title;
      // }
      this.setTestJson();
    },
    // 点击复选框
    checkClick(id, index) {
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        if (test.answer.includes(index)) {
          test.answer.splice(test.answer.indexOf(index), 1);
        } else {
          test.answer.push(index);
        }
      }
      this.setTestJson();
    },
    // 删除题目
    deleteTest(id) {
      this.delJson = JSON.stringify(this.jsonData.testJson);
      let index = this.jsonData.testJson.findIndex(item => item.id == id);
      this.jsonData.testJson.splice(index, 1);
      this.setTestJson();
    },
    // 添加选项
    addCheck(id, checkIndex = null) {
      let index = this.jsonData.testJson.findIndex(item => item.id == id);
      let test = this.jsonData.testJson[index];
      if (!checkIndex) {
        checkIndex = test.checkList.length;
      }else{
        checkIndex = checkIndex + 1;
      }
      test.checkList.splice(checkIndex, 0, '');
      this.setTestJson();
    },
    // 删除选项
    delCheck(id, index) {
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        if (test.checkList.length == 1) {
          this.$message.error("至少保留一个选项");
          return;
        }
        test.checkList.splice(index, 1);
      }
      this.setTestJson();
    },
    // 上传图片
    uploadImage(id) {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.click();
      input.onchange = (e) => {
        if (e.target.files[0]) {
          uploadOneFile(e.target.files[0]).then(res => {
            res.src = res.url
            this.jsonData.testJson.find(item => item.id == id).timuList = [res];
            this.setTestJson();
          })
        }
      }
    },
    // 复制题目
    copyTest(id) {
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        test = JSON.parse(JSON.stringify(test));
        test.id = uuidv4();
        this.jsonData.testJson.push(test);
        this.setTestJson();
      }
    },
    // 删除图片
    delImage(id, index) {
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        test.timuList.splice(index, 1);
      }
      this.setTestJson();
    },
    // 移动题目
    changeIndex(item, index, direction) {
      let test = this.jsonData.testJson.find(i => i.id == item.id);
      if (test) {
        if (direction == 'up') {
          if (index == 0) {
            //this.$message.info("已到顶部");
            return;
          }
          this.jsonData.testJson.splice(index, 1);
          this.jsonData.testJson.splice(index - 1, 0, JSON.parse(JSON.stringify(test)));
        } else if (direction == 'down') {
          if (index == this.jsonData.testJson.length - 1) {
            //this.$message.info("已到底部");
            return;
          }
          this.jsonData.testJson.splice(index, 1);
          this.jsonData.testJson.splice(index + 1, 0, JSON.parse(JSON.stringify(test)));
        }
        this.setTestJson();
      }
    },
    // 拖拽相关方法
    dragStart(e, item, checkIndex) {
      if (!e.target.closest('.drag')) {
        e.preventDefault();
        return;
      }
      console.log('e',e)
      this.dragItem = { item, checkIndex };
      const checkItem = e.target.closest('.checkItem');
      if (checkItem) checkItem.classList.add('dragging');
      e.dataTransfer.effectAllowed = 'move';
    },
    dragOver(e, item, checkIndex) {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';

      document.querySelectorAll('.checkItem').forEach(el => {
        el.style.borderTop = '';
        el.style.borderBottom = '';
      });

      const checkItems = e.target.closest('.checkItem');
      if (checkItems && this.dragItem && this.dragItem.checkIndex !== checkIndex) {
        if (this.dragItem.checkIndex < checkIndex) {
          checkItems.style.borderBottom = '2px solid #ffa502';
        } else {
          checkItems.style.borderTop = '2px solid #ffa502';
        }
      }
    },
    drop(e, targetItem, targetCheckIndex) {
      e.preventDefault();
      document.querySelectorAll('.checkItem').forEach(el => {
        el.style.borderTop = '';
        el.style.borderBottom = '';
        el.classList.remove('dragging');
      });
      if (!this.dragItem) return;

      const { item: sourceItem, checkIndex: sourceCheckIndex } = this.dragItem;

      if (sourceItem.id !== targetItem.id) return;
      if (sourceCheckIndex === targetCheckIndex) return;

      const test = this.jsonData.testJson.find(i => i.id === sourceItem.id);
      if (test) {
        let newAnswerIndex;

        if (sourceCheckIndex < targetCheckIndex) {
          newAnswerIndex = targetCheckIndex - 1;
        } else {
          newAnswerIndex = targetCheckIndex;
        }

        const item = test.checkList[sourceCheckIndex];
        test.checkList.splice(sourceCheckIndex, 1);
        test.checkList.splice(targetCheckIndex, 0, item);

        if (test.answer.includes(sourceCheckIndex)) {
          const answerIndex = test.answer.indexOf(sourceCheckIndex);
          test.answer.splice(answerIndex, 1);
          test.answer.push(newAnswerIndex);
          test.answer.sort((a, b) => a - b);
        } else {
          test.answer = test.answer.map(idx => {
            if (sourceCheckIndex < targetCheckIndex) {
              return idx > sourceCheckIndex && idx <= targetCheckIndex ? idx - 1 : idx;
            } else {
              return idx >= targetCheckIndex && idx < sourceCheckIndex ? idx + 1 : idx;
            }
          });
        }

        this.setTestJson();
      }
      this.dragItem = null;
    },
    dragEnd(e) {
      const checkItem = e.target.closest('.checkItem');
      if (checkItem) checkItem.classList.remove('dragging');
      document.querySelectorAll('.checkItem').forEach(el => {
        el.style.borderTop = '';
        el.style.borderBottom = '';
      });
      this.dragItem = null;
    },
    // ctrl+z 撤销删除
    undoDelete() {
      if (this.delJson) {
        this.jsonData.testJson = JSON.parse(this.delJson);
        this.setTestJson();
        this.delJson = null;
      }
    },
  },
  mounted() {
    window.addEventListener('keydown', (e)=>{
      if (e.ctrlKey && e.key === 'z') {
        this.undoDelete();
      }
    });
  },
}
</script>

<style scoped>
.setChoiceQuestion {
  width: 100%;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 4rem;
  box-sizing: border-box;
  gap: 2rem;
}

.addTest {
  border-radius: 5px;
  border: 1px dashed #d1d5db;
  padding: .5rem 1rem;
  height: fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

.addTest>svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #6E7583;
}

.addTest>span {
  font-weight: bold;
  font-size: 1.4rem;
  color: #6b7280;
}

.testItem {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: column;
}

.ti_header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;


}

.ti_header>span {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ff9300;
}

.ti_header>span>span {
  font-size: 1.2rem;
  color: rgb(117, 117, 117);
  margin-left: .5rem;
}

.ti_h_edit {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ti_h_edit>span {
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F9FAFB;
  border-radius: 4px;
  cursor: pointer;
}

.ti_h_edit>span>svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: #6B7280;
}

.ti_h_edit>.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}



.ti_title {
  width: 100%;
  height: fit-content;
  padding-bottom: 2rem;
  min-height: 4rem;
  background: #FAFBFC;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  position: relative;
}

.ti_t_input {
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: none;
  font-size: 1.2rem;
  resize: none;
  /* max-height: 10rem; */
  overflow: auto;
  /* padding-right: 2rem; */
}

.ti_t_input /deep/ .el-textarea__inner {
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: none;
  font-size: 1.2rem;
  resize: none;
  /* max-height: 10rem; */
  overflow: auto;
}

.uploadImage {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: #fff;
  border-radius: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  padding: .5rem;
}

.uploadImage>svg {
  width: 1.4rem;
  height: 1.4rem;
}

.checkList {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* padding-left: 4rem; */
}

.checkItem {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: .5rem .7rem;
  transition: .2s;
}

.checkItem:hover {
  background: #F9FAFB;
}

.drag {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
  margin-right: 1rem;
  opacity: 0;
  transition: .2s;
}

.checkItem:hover > .drag {
  opacity: 1;
}

.checkItem[draggable="true"] {
  cursor: move;
}

.checkItem.dragging {
  opacity: 0.5;
  background: #FEF3C7;
}

.drag>svg {
  width: 100%;
  height: 100%;
  fill: #D1D5DC;
}


.check {
  width: 1.5rem;
  height: 1.5rem;
  border: solid 1px #D1D5DB;
  border-radius: .25rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checked {
  background: #FF9300;
}

.checked>svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: #fff;
}

.checkItem>.el-input {
  width: calc(100% - 10rem);
  font-size: 1.2rem;
}

.checkItem>.el-input /deep/ .el-input__inner:focus {
  border-color: #FF935A !important;
}

.addCheck {
  border-radius: 5px;
  border: 1px dashed #d1d5db;
  padding: .3rem .8rem;
  height: fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  margin-left: 2.2rem;
}

.addCheck>svg {
  width: .9rem;
  height: .9rem;
  fill: #6E7583;
}

.addCheck>span {
  font-weight: bold;
  font-size: 1.2rem;
  color: #6b7280;
}

.btn {
  display: flex;
  align-items: center;
  gap: 1em;
  opacity: 0;
  margin-left: 1rem;
}

.checkItem:hover>.btn {
  opacity: 1;
}



.btn>div {
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: #F9FAFB; */
  border-radius: .4px;
  cursor: pointer;
}

.btn>div>svg {
  width: 1rem;
  height: 1rem;
  fill: #9DA3AF;
}

.explanation {
  width: 100%;
  height: auto;
  padding: 1rem;
  background: #FAFBFC;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: .8rem;
}

.explanation /deep/ .el-textarea__inner:focus {
  border-color: #FF935A !important;
}

.e_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.e_header>span {
  color: #6b7280;
  font-size: 1.2rem;
  font-weight: 500;
}

.e_header>div {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #ff9300;
  color: #fff;
  padding: .3rem .8rem;
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: .5rem;
  cursor: pointer;
}

.e_header>div>svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: #fff;
}

.imageList {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.imageList>div {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
  border-radius: .5rem;
  position: relative;

}

.imageList>div:hover>svg {
  display: flex;
}

.imageList>div>svg {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  top: -.4rem;
  right: -.4rem;
  font-weight: 500;
  border-radius: .5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
</style>