<template>
  <el-dialog :model-value="visible" :width="width" title="用药提示" @close="close()">
    <el-scrollbar v-if="visible" wrap-class="el-dialog-body-full-scroll">
      <div class="px-15px py-12px">
        <div class="text-14px">
          以下药品用药条件与就诊人信息不符，请重新调整药品
        </div>
        <div v-for="med in drugs" :key="med._id" class="mt-10px p-12px rounded bg-gray-100">
          <div class="mb-10px">
            <span class="mr-5px text-16px text-dark-500"> {{ med.drugName }}</span>
            <span class="text-14px text-gray-500"> {{ med.specification }}</span>
          </div>
          <div class="text-15px text-red-500">{{ med.errMsg }}</div>
        </div>
      </div>
    </el-scrollbar>
    <template #footer>
      <div text-center>
        <el-button plain class="w-100px" type="primary" @click="close()">知道了</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import dayjs from 'dayjs'

const emits = defineEmits(['close'])
const props = defineProps({
  width: {
    type: Number,
    default: 640
  },
  drugs: {
    type: Array,
    default: () => []
  },
  visible: {
    type: Boolean,
    default: false
  }
})

function close() {
  emits('close')
}
</script>
<style lang="scss" scoped></style>
