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

const props = defineProps<{ visible: boolean; content: any }>()
const visible = useVModel(props, 'visible')
const data = ref<any[]>([])

watch(() => visible.value, () => { 
  if (!visible.value || !props.content) { return }
  const { thing1 , character_string13, time2, amount3, amount4} = props.content

  data.value = [
    {
      rate: character_string13.value,
      amount4: amount4.value,
      target: amount3.value,
      person: thing1.value,
      date: time2.value
    }
  ]
})
</script>

<template>
  <ElDialog width="800px" v-model="visible" title="推送内容" size="small">
    <ElTable size="small" border :data="data"> 
      <ElTableColumn label="被考核人" prop="person" min-width="100px" show-overflow-tooltip /> 
      <ElTableColumn label="利润完成比例" prop="rate" min-width="100px" show-overflow-tooltip /> 
      <ElTableColumn label="考核时间" prop="date" min-width="100px" show-overflow-tooltip /> 
      <ElTableColumn label="业绩目标" prop="target" min-width="100px" show-overflow-tooltip /> 
      <ElTableColumn label="业绩达成" prop="amount4" min-width="100px" show-overflow-tooltip /> 
    </ElTable>
  </ElDialog>
</template>
