<script setup lang="ts">
import { getDict } from '@/hooks'
import doWorkApi from '@/api/subject/doWork'
import { dialog } from '@/components/mj/mj-dialog'

const props = defineProps<{
  show: boolean
  data: anyObj
}>()

const emit = defineEmits(['update:show'])

const feedBackEnum = getDict('t_feedback_type', true).enum

const feedbackTypes = ref<(string | number)[]>([])
function onClick(key: string | number) {
  const idx = feedbackTypes.value.indexOf(key)
  idx === -1 ? feedbackTypes.value.push(key) : feedbackTypes.value.splice(idx, 1)
}

const feedbackMsg = ref('')

async function submit() {
  await doWorkApi.submitTitleFeedback({
    ...props.data,
    type: feedbackTypes.value.join(','),
    description: feedbackMsg.value,
  })

  dialog.show({
    content: '错题反馈成功',
    hideCancel: true,
    hideClose: true,
    ok: () => {
      emit('update:show', false)
    },
  })
}

watch(
  () => props.show,
  nv => {
    if (nv) {
      feedbackMsg.value = ''
      feedbackTypes.value = []
    }
  },
)
</script>
<template>
  <div v-show="show" class="feedback">
    <div class="top" @click="emit('update:show', false)">
      <Icon name="left_arrow" size="80"></Icon>
    </div>
    <div class="main">
      <div class="main-box">
        <div class="main-top">
          <div class="title" data-content="错题反馈">错题反馈</div>
        </div>
        <div class="book-box">
          <div class="book">
            <div class="title">题目ID：{{ data.titleId }}</div>
            <div class="answer-box">
              <div class="answer-box-title">请选择错误类型</div>
              <div class="answer-box-main types">
                <div
                  v-for="(i, key) in feedBackEnum"
                  :key="key"
                  :class="['item', feedbackTypes.includes(key) ? 'active' : '']"
                  @click="onClick(key)"
                >
                  {{ i }}
                </div>
              </div>
            </div>
            <div class="answer-box">
              <div class="answer-box-title">说明</div>
              <div class="answer-box-main textarea_box">
                <el-input
                  v-model="feedbackMsg"
                  type="textarea"
                  :rows="7"
                  placeholder="请输入"
                ></el-input>
              </div>
            </div>
          </div>
          <mj-button width="368" height="108" size="48" @click="submit">提交</mj-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.feedback {
  position: fixed;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  @include main_bg;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  @include hidden_scroll;
  .top {
    padding: 2.67vh 64px 0;
    position: relative;
    z-index: 1;
    // margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main {
    box-sizing: border-box;
    padding: 0 64px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    &-top {
      margin-bottom: 1vh;
      .title {
        color: #fff;
        text-shadow: 0 0.17vh 0.17vh rgba(0, 0, 0, 0.25);
        font-family: $font-special;
        font-size: 4vh;
        font-style: normal;
        font-weight: 400;
        line-height: 6vh; /* 150% */
        text-align: center;
        @include font-stroke($font-color, 6px);
      }
    }
    &-box {
      position: relative;
      top: 3vh;
    }

    .book-box {
      position: relative;
      // height: 880px;
      height: 84.67vh;
      .error_feedback {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
      }
    }
    .book {
      box-sizing: border-box;
      position: relative;
      z-index: auto;
      // height: 880px;
      height: 100%;
      flex-shrink: 0;
      border-radius: 3.33vh;
      border: 0.67vh solid #fff;
      background: linear-gradient(179deg, #fdfdf9 0.69%, #dfebf7 99.53%);
      box-shadow: 0 0.33vh 0.67vh 0 rgba(0, 0, 0, 0.25);
      padding: 4vh;
      .title {
        color: $font-color;
        font-family: OPPOSans;
        font-size: 2.67vh;
      }
      .answer-box {
        margin-top: 2.67vh;
        &-title {
          padding: 0 20px 0 32px;
          position: relative;
          color: $font-color;
          font-family: $font-special;
          font-size: 2.67vh;
          border-radius: 0.33vh;
          margin-bottom: 2vh;
          &::before {
            content: '';
            width: 12px;
            height: 100%;
            flex-shrink: 0;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #669cfe;
            border-radius: 0 1vh 1vh 0;
          }
        }
        .types {
          display: flex;
          .item {
            padding: 0.67vh 24px;
            border-radius: 0.67vh;
            border: 0.08vh solid $font-color;
            background: #f5f5f5;
            box-shadow: 0 0.33vh 0 0 rgba(0, 0, 0, 0.25);
            margin-right: 24px;
            &.active {
              background: linear-gradient(180deg, #4de798 0%, #a2fb6e 100%);
            }
          }
        }
        .textarea_box {
          border-radius: 1.67vh;
          border: 0.33vh solid #bed5fe;
          background: #f7faf9;
          padding: 2vh;

          :deep(.el-textarea) {
            .el-textarea__inner {
              background-color: transparent;
              box-shadow: none;
              padding: 0;
              color: $font-color;
              font-family: OPPOSans;
              font-size: 2.33vh;
              &::placeholder {
                color: #999;
              }
            }
          }
        }
      }
    }
    .mj-button {
      position: absolute;
      bottom: 3vh;
      left: 50%;
      transform: translate(-50%);
    }
  }
}
</style>
