<script setup lang="ts">
import { CloseBold, Document } from '@element-plus/icons-vue'

import { usePaperStore } from '..'
import PaperQuestions from './paper-questions/index.vue'

defineOptions({ name: 'EditPaperQuestions' })

const props = defineProps<{
  modelValue: boolean
}>()

const emits = defineEmits(['update:modelValue', 'refresh'])
const paperStore = usePaperStore()
const { savePaper } = paperStore
const { paper, questions } = storeToRefs(paperStore)

const show = computed({
  get() {
    return props.modelValue
  },
  async set(newVal) {
    emits('update:modelValue', newVal)
  },
})

const activeTab = ref('0')

watch(show, (visible) => {
  if (visible) {
    activeTab.value = '0'
  }
})

const firstTitle = computed(() => `已有题目(${questions.value?.length || 0})`)
</script>

<template>
  <div class="edit-paper-questions">
    <mj-modal
      v-model="show"
      :options="{
        title: `【${paper.name}】题目`,
        width: '100%',
        height: '100%',
        resize: false,
        draggable: false,
      }"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane :label="firstTitle" name="0">
          <PaperQuestions />
        </el-tab-pane>
      </el-tabs>
      <div class="head-right">
        <el-button
          type="primary"
          :icon="Document"
          @click="
            savePaper(() => {
              emits('refresh')
              show = false
            })
          "
        >
          保存
        </el-button>
        <el-button :icon="CloseBold" @click="show = false">关闭</el-button>
      </div>
    </mj-modal>
  </div>
</template>

<style lang="scss" scoped>
.edit-paper-questions {
  :deep(.vxe-modal--box) {
    border-radius: 0;

    .vxe-modal--body-default {
      padding: 0 !important;
      background-color: #f1f1f1;
    }

    .vxe-modal--header {
      display: none;
    }
  }

  :deep(.el-tabs) {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .el-tabs__header {
      height: 60px;
      padding-left: 24px;
      margin-bottom: 0;

      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
      }

      .el-tabs__nav-scroll {
        display: flex;
        align-items: center;
        height: 60px;
      }
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tab-pane {
      height: 100%;
      padding: 16px;
      background-color: #f1f1f1;
    }
  }

  .head-right {
    position: absolute;
    top: 0;
    right: 16px;
    display: flex;
    align-items: center;
    height: 60px;
  }
}
</style>
