<script setup name="consultationNotes">
import {elementAddBody} from "@/utils/public";
import {useDraggable} from '@vueuse/core'

const emits = defineEmits(['paddingData'])

const divRef = ref(null)
const dragRef = ref(null)

const dialog = ref(false)
const minimizeRef = ref(null)


const {x, y, style} = useDraggable(dragRef, {
    initialValue: {x: 50, y: 120},
})

const content = ref('')

const openOrClose = (val) => {
    dialog.value = val
}

const isMinimize = ref(false)
const zoomInAndOut = (val) => {
    isMinimize.value = val
}

const paddingData = () => {
    emits('paddingData', content.value)
    content.value = ''
}

onMounted(() => {
    elementAddBody(divRef.value)
    elementAddBody(minimizeRef.value)
})

</script>

<template>
    <el-button @click="openOrClose(true)">笔记</el-button>

    <div ref="divRef" class="note_main" :style="style" v-show="!isMinimize && dialog">
        <header ref="dragRef" class="note_drag">
            会诊笔记
            <div class="note_icon">
                <el-button icon="Minus" text @click="zoomInAndOut(true)"/>
                <el-button icon="Close" text @click="openOrClose(false)"/>
            </div>
        </header>

        <main class="note_body">
            <el-input resize="none"
                      :autosize="{ minRows: 10, maxRows: 20}"
                      type="textarea" v-model="content"/>
        </main>
        <footer class="note_footer">
            <el-button text style="margin-right: 5px" @click="paddingData">填充</el-button>
        </footer>
    </div>

    <div v-show="isMinimize" ref="minimizeRef" class="minimize_body" @click="zoomInAndOut(false)">
        会诊笔记
    </div>

</template>

<style lang="scss">
.minimize_body {
  line-height: 10px;
  width: max-content;
  position: fixed;
  bottom: 5px;
  left: 20px;
  z-index: 99999999999999;
  background-color: #9db8d4;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 10px;
  font-size: 12px;
  cursor: pointer;
}

.note_main {
  position: fixed;
  height: 450px;
  width: 417px;
  background-color: rgb(241, 229, 201);
  z-index: 99999999999999;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;

  flex-flow: column;
  display: flex;

  .note_drag {
    position: relative;
    width: 100%;
    height: 20px;
    cursor: all-scroll;
    text-align: center;
    padding: 10px 0;

    .note_icon {
      position: absolute;
      width: max-content;
      padding: 5px;
      top: 0;
      right: 5px;
      cursor: default;
    }
  }

  .note_body {
    width: 100%;
    flex: 1;

    textarea {
      width: 100%;
      background-color: rgb(241, 229, 201);
    }
  }

  .note_footer {
    display: flex;
    padding: 5px 0;
    justify-content: end;
  }

}
</style>
