<script setup lang="ts">
import Option from '@/page/login/components/Option.vue'
import { XMessage } from '@/hooks'
import userApi from '@/api/system/user'
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
  }>(),
  {
    modelValue: false,
  },
)
const emits = defineEmits(['update:modelValue', 'ok'])

const OSS_URL = import.meta.env.VITE_OSS_URL
const bg = `url(${OSS_URL}/urm/subject_target_dia_bg.svg) 100%/contain no-repeat`

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

const { userInfo } = storeToRefs(userStore())

const target = ref(String(userInfo.value.learnTargetType) || '')
const targetList = [
  {
    id: '1838853559586193410',
    pid: '1838853415922892801',
    code: '0',
    value: '日常考试',
    remark: '日常考试',
  },
  {
    id: '1838853559590387713',
    pid: '1838853415922892801',
    code: '1',
    value: '小升初',
    remark: '小升初',
  },
  {
    id: '1838853559590387714',
    pid: '1838853415922892801',
    code: '2',
    value: '中考',
    remark: '中考',
  },
  {
    id: '1838853559590387715',
    pid: '1838853415922892801',
    code: '3',
    value: '高考',
    remark: '高考',
  },
]

function onChange(val: string, data: anyObj) {
  target.value = data.code
}

async function onClick() {
  if (!target.value) return XMessage.error('请选择学习目标')
  await userApi.updateUserLearn({
    learnTargetType: target.value,
  })
  userInfo.value.learnTargetType = Number(target.value)
  show.value = false
  emits('ok', target.value)
}
</script>

<template>
  <el-dialog
    v-model="show"
    class="subject-dia"
    :show-close="false"
    destroy-on-close
    align-center
    v-bind="$attrs"
  >
    <board-bg class="body">
      <div class="content">
        <div class="tips">
          <LineFont text="请选择当前学习目标" size="48" />
        </div>
        <div class="list">
          <Option
            v-for="item in targetList"
            :key="item.id"
            :selected="target === item.code"
            :data="item"
            @change="onChange"
            >{{ item.value }}</Option
          >
        </div>
      </div>
      <div class="footer">
        <mj-button type="warn" width="386" height="108" size="48" @click="onClick">确认</mj-button>
      </div>
    </board-bg>
  </el-dialog>
</template>

<style lang="scss">
.subject-dia {
  width: 103.33vh;
  height: 61.67vh;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    height: 100%;
    padding: 0;
    position: relative;

    .body {
      width: 100%;
      height: 100%;
      .content {
        .tips {
          width: 100%;
          height: auto;
          padding: 5.33vh 0 $space-4;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: $font-special;
          font-size: $font-size-7;
          color: $font-tag-color;
        }
        .list {
          display: flex;
          justify-content: space-between;
          column-gap: 3.33vh;
          // padding: 0 78px;

          .option {
            width: 20vh;
            height: 28vh;
          }
        }
      }
      .footer {
        position: absolute;
        bottom: 2.33vh;
        left: 50%;
        transform: translateX(-50%);
        .x-button {
          margin-right: $space-4;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
