<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="bg-white rounded w-345 border-box" :style="elderVarStyle">
      <view class="popup-header flex items-center justify-between px-15 py-12">
        <view class="popup-title">用药提示</view>
        <uni-icons type="closeempty" :size="elderMode ? 32 : 24" color="#999" @click="close"></uni-icons>
      </view>
      <scroll-view scroll-y="true" class="popup-content-scroll">
        <view :style="elderVarStyle" class="text-base text-gray px-15 py-12">以下药品用药条件与就诊人信息不符，请确认:</view>
        <view :style="elderVarStyle" class="px-15 py-12">
          <view v-for="med in inappropriateDrugs" :key="med._id" class="mb-10 p-10 bg-gray rounded">
            <view class="mb-10">
              <text class="mr-5 text-base text-dark">{{ med.name }}</text>
              <text class="text-base text-gray">{{ med.specification }}</text>
            </view>
            <view class="text-base text-danger">{{ med.errMsg }}</view>
          </view>
        </view>
      </scroll-view>
      <view class="footer-buttons">
        <footer-buttons cancelText="重新选药" confirmText="确认并提交" @cancel="close" @confirm="confirm" />
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
import { storeToRefs } from "pinia";
import orderStore from '@/store/order';
import FooterButtons from '@/components/footer-buttons.vue';
const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  elderVarStyle: {
    type: String,
    default: ""
  },
  elderMode: {
    type: Boolean,
    default: false
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const { inappropriateDrugs } = storeToRefs(orderStore());
const popup = ref()

function close() {
  emits('close')
}

function confirm() {
  close()
  setTimeout(() => {
    emits('confirm')
  }, 500)
}

watch(() => props.visible, n => {
  if (n) {
    popup.value && popup.value.open()
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.w-345 {
  width: 690rpx;
}

.popup-header {
  border-bottom: 1px solid #eee;
}

.popup-title {
  font-size: var(--text-base);
  font-weight: bold;
  color: #333;
}

.popup-content-scroll {
  max-height: 55vh;
}

.text-base {
  font-size: var(--text-base);
  line-height: 1.5;
}
</style>