<template>
  <div class="main">
    <div v-for="item in tempList()" class="main__item" @click="clickList(item)">
      <div v-if="item === '无'" class="empty">
        无
      </div>
      <div v-else style="height:100%;  ">
        <div v-for="it in 4" class="describe">
          <div class="written_words">
            {{ orderedListFunc(item, it - 1) }}
          </div>
          <div class="horizontal_line"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name='EmrUnorderedList'>
const props = defineProps({
  listType: {
    type: String,
    default: 'orderly' | 'disorder'
  }
})

const emit = defineEmits(['clickList'])

let list = {
  orderly: ["无", "${1}.", "${1}、", "${1})", "(${1})", "${一}、", "(${一})", "${A}."],
  disorder: ["无", "${●}", "${➢}", "${✓}", "${○}", "${✧}"]
}

let capitalChinese = ['一', '二', '三', '四']

const orderedListFunc = (val, index) => {
  let start = val.indexOf('$')
  let end = val.indexOf('}')
  let tempVal = val.substring(start, end + 1)
  let str = tempVal.substring(2, 3)

  if (props.listType === 'orderly') {
    if (str === '一') {
      return val.replace(tempVal, capitalChinese[index])
    } else if (str === 'A') {
      return val.replace(tempVal, String.fromCharCode(str.charCodeAt(0) + index))
    }
    return val.replace(tempVal, index + 1)
  }
  return str
}

let tempList = () => {
  return list[props.listType]
}

const clickList = (val) => {
  if (val === '无') {
    emit('clickList', null)
  } else {
    emit('clickList', val)
  }
}


</script>

<style scoped lang="scss">
.main {
  border-radius: 5px;
  width: 262px;
  background-color: white;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 5px;

  .empty {
    line-height: 84px;
    text-align: center;
  }

  .main__item {
    width: calc((100% - 40px) / 3);
    border: 1px solid #e0e0e0;
    margin: 5px;
    height: 84px;
    user-select: none;
    cursor: pointer;

    :hover {
      box-shadow: var(--el-box-shadow);
    }
  }

  .describe {
    height: calc(84px / 4);
    display: flex;
    align-items: center;
    justify-content: center;

    .written_words {
      font-size: 14px;
    }
  }

  .horizontal_line {
    width: 40%;
    margin-left: 5px;
    background: #e1e3e5;
    height: 2px
  }
}

</style>
