<script setup lang="ts">
import { ref, watch, nextTick } from "vue"
import { useVModel } from "@vueuse/core"


const emit = defineEmits(['confirm'])
const props = defineProps<{ visible: boolean, data: string, index: number }>()
const visible = useVModel(props, 'visible')
const remark = ref('')


function handleConfirm(){
  emit('confirm', remark.value, props.index)
  visible.value = false
}


watch(() => visible.value, () => {
  if(!visible.value) { return }
  nextTick(() => remark.value = props.data)
})
</script>

<template>
  <ElDialog title="修改备注" center v-model="visible" :close-on-click-modal="false"
  :close-on-press-escape="false">
    <ElInput type="textarea" v-model="remark" placeholder="备注" /> 
    <div class="w-full flex justify-end mt-[10px]">
      <ElButton @click="handleConfirm" type="primary">保存</ElButton>
    </div>
  </ElDialog>
</template>

