<template>
  <FloatingFrame v-model="errorMsg.dialog"
                 title="错误信息"
                 :x="77"
                 :y="494"
                 width="420px">
    <div class="box">
      <div v-if="errorMsg.type === YzErrTypeEnum.确认错误"
           v-for="(value, key) in  errorMsg.data "
           class="message"
           :class="props.currentKey == key ? 'current_selected' : '' "
           @click="clickToModify(key)">
        <div class="name">
          医嘱号: {{ key }}
          序号:{{ getYzIndex(key) + 1 }}
          {{ value?.data?.orderName }}
        </div>
        <div v-if="value?.error" class="error">
          <div>
            错误信息:
          </div>
          <div v-for="(item,index) in value?.error">
            {{ index + 1 }}、 {{ item }}
          </div>
        </div>

        <div v-if="value?.warning" class="warning">
          <div>
            警告信息:
          </div>
          <div v-for="(item,index) in value?.warning">
            {{ index + 1 }}、 {{ item }}
          </div>
        </div>
      </div>
      <div v-if="errorMsg.type === YzErrTypeEnum.删除错误">
        <div v-for="item in errorMsg.data"
             class="delete__box">
          <div>
            {{ item.actOrderNo }} 名称： {{ item.orderName }}
          </div>
          <div style="color: red">
            {{ item.errorMessage }}
          </div>
        </div>
      </div>
    </div>
  </FloatingFrame>
</template>

<script setup lang="ts">
import {
  errorMsg,
  getYzIndex,
  YzErrTypeEnum
} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import XEUtils from 'xe-utils'
import FloatingFrame from "@/components/cy/floating-frame/FloatingFrame.vue";

const props = defineProps({
  currentKey: [String, Number]
})

const emit = defineEmits<{
  (e: "clickError", orderNo: number): void
}>()


const clickToModify = (key: any) => {
  if (props.currentKey === key) return
  emit('clickError', XEUtils.toNumber(key))
}
</script>

<style scoped lang="scss">


.box {
  margin: 5px;
  padding: 4px;
  max-height: 300px;
  overflow: auto;

  .current_selected {
    border: 1px solid #0a84fd !important;

    .name {
      background-color: #0a84fd !important;
    }

  }

  .message {
    border: 1px dashed #000;
    padding: 5px;
    border-radius: 4px;
    margin: 5px 0;

    .name {
      padding: 5px;
      border-radius: 5px;
      background-color: #2c3e50;
      color: white;
    }

    .error {
      margin: 5px 0;
      padding: 4px;
      border-radius: 5px;
      background-color: #f89b9b;
    }

    .warning {
      margin: 5px 0;
      padding: 4px;
      border-radius: 5px;
      background-color: #f5e1b8;
    }

  }
}

.delete__box {
  border: 1px solid;
  border-radius: 5px;
  padding: 5px;
  font-size: 15px;
  margin: 1px;
  cursor: default;
}


</style>
