<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue?: number | string | ''
    disabled?: boolean
    title?: string
    emptyText?: string
  }>(),
  {
    modelValue: '',
    disabled: false,
    title: '难度：',
    emptyText: '暂无',
  },
)
const emit = defineEmits(['update:modelValue'])

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

const dia = reactive<anyObj>({
  show: false,
  data: 0,
})
function toEdit() {
  if (props.disabled) return
  dia.show = true
  dia.data = props.modelValue
}

const difficultyLabelMap: Record<string, number> = {
  容易: 1,
  较易: 2,
  一般: 3,
  较难: 4,
  困难: 5,
}

function normalizeToStars(val: number | string | ''): number {
  if (val === '' || val === null || val === undefined) return 0
  if (typeof val === 'string') return difficultyLabelMap[val] || 0
  if (val >= 17 && val <= 21) return val - 16
  if (val >= 11 && val <= 15) return val - 10
  if (val >= 1 && val <= 5) return val
  return 0
}

const starCount = computed(() => normalizeToStars(props.modelValue))
const starLevels = [1, 2, 3, 4, 5]

const selectList = [
  { label: '智能', value: '' },
  { label: '容易', value: '容易' },
  { label: '较易', value: '较易' },
  { label: '一般', value: '一般' },
  { label: '较难', value: '较难' },
  { label: '困难', value: '困难' },
]
function handleEdit() {
  emit('update:modelValue', dia.data)
  dia.show = false
}
</script>
<template>
  <div>
    <div class="difficulty-start" @click="toEdit">
      <div class="text">{{ title }}</div>
      <div class="starts">
        <template v-if="!disabled || modelValue">
          <div v-for="i in starLevels" :key="i" class="start">
            <Icon
              :name="
                modelValue
                  ? starCount >= i
                    ? 'difficulty_start_active'
                    : 'difficulty_start_info'
                  : `difficulty_start_intelligence`
              "
              size="48"
            >
            </Icon>
          </div>
        </template>
        <span v-else class="text"> {{ emptyText }} </span>
      </div>
      <Icon v-if="!disabled" name="edit" width="40" class="pointer"></Icon>
    </div>
    <mj-dialog v-if="!disabled" v-model="dia.show" :ok="handleEdit">
      <div class="dia-main">
        <div class="dia-main-title">请选择题目的难度</div>
        <div class="dia-main-select">
          <Select v-model="dia.data" :selectList="selectList"></Select>
        </div>
      </div>
    </mj-dialog>
  </div>
</template>
<style scoped lang="scss">
.difficulty-start {
  // width: 488px;
  height: 5.33vh;
  padding: 0 32px;
  border-radius: 5vh;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  line-height: 1.5;
  .text {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.95);
    font-family: OPPOSans;
    font-size: 2.33vh;
  }
  .starts {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 20px 0 2px;
    .start {
      margin: 0 4px;
      width: 48px;
      height: 4vh;
    }
  }
  .x-icon {
    flex-shrink: 0;
  }
}
.dia-main {
  line-height: 1.5;
  text-align: center;
  margin-bottom: 1.67vh;
  &-title {
    color: $font-color;
    font-family: $font-special;
    font-size: 2.67vh;
    margin: 1.67vh 0 3.33vh;
  }
  &-select {
    :deep(.select-box) {
      margin: 0 auto;
      width: 504px;
      height: 6.67vh;
      flex-shrink: 0;
      color: #fff;
      text-shadow: 0 0.17vh 0.17vh #4c749e;
      font-family: $font-special;
      font-size: 2.67vh;
      .content {
        width: 100%;
        height: 6.67vh;
        border-radius: 6.67vh;
        background: #b9d1ea;
        box-shadow: 0 0 0.5vh 0 #4c749e inset;
        padding: 0 32px 0 40px;
        .icon {
          background: v-bind(bg) !important;
          width: 40px;
          height: 3.33vh;
        }
      }
      .selectList {
        width: 100%;
        background: #b9d1ea;
        box-shadow: 0 0 0.5vh 0 #4c749e inset;
        max-height: 33.33vh;
        .selectList-box {
          width: 100%;
          max-height: 33.33vh;
          padding: 0.67vh 32px 0.67vh 40px;
          .select-item {
            color: #fff !important;
            height: 4vh;
            padding: 0;
            height: 4.83vh;
            align-items: center;
          }
        }
      }
      .mask {
        display: none;
      }
    }
  }
}
</style>
