<template>
  <a-modal v-model:visible="visible" :footer="false" :modal-style="modalStyle">
    <template #title>
      <div class="flex items-center">
        <span class="text-lg">关联表格数据</span>
      </div>
    </template>
    <div class="body">
      <a-button
        @click="handleRelationData"
        type="primary"
        status="success"
        class="relation-exist-data"
      >
        <template #icon>
          <icon-relation />
        </template>
        关联已有数据
      </a-button>
      <a-button @click="handleCreateNewData" type="primary" class="create-new-data">
        <template #icon>
          <icon-plus></icon-plus>
        </template>
        创建新的数据
      </a-button>
    </div>
  </a-modal>
</template>
<script setup>
let visible = defineModel('visible')
let modalStyle = ref({
  width: '30%'
})
let emits = defineEmits(['relationData', 'createNewData'])
//按钮点击事件

let handleRelationData = () => {
  console.log('点击了关联已有数据按钮')
  emits('relationData')
  visible.value = false
}
let handleCreateNewData = () => {
  console.log('点击了创建新的数据按钮')
  emits('createNewData')
  visible.value = false
}
</script>
<style scoped lang="scss">
.body {
  display: grid;
  //   background-color: red;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 10px;
  ::v-deep(.arco-btn) {
    padding: 30px 0;
    border-radius: 8px;
    font-size: 20px !important;
  }
}
</style>
