<template>
  <a-modal
    v-model:visible="visible"
    title="修改BIM"
    width="480px"
    :after-close="onCancel"
    @ok="saveHandler"
  >
    <template #footer>
      <a-button class="action-bottom" size="middle" @click="visible = false">
        取消
      </a-button>
      <a-button
        class="action-bottom"
        type="primary"
        size="middle"
        @click="saveHandler"
      >
        保存
      </a-button>
    </template>

    <a-form name="basic" label-align="left" autocomplete="off">
      <UploadBim v-model:data="bim" :update="true" />
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
import { message } from 'ant-design-vue'
import UploadBim from './upload-bim.vue'

import type { Bim } from '@/store'

export type SaveData = Pick<Bim, 'bimName'> & { bimPath: string }

defineOptions<{ name: 'update-bim-scene' }>()

const props = defineProps<{
  bim: SaveData
  onSave: (data: SaveData) => void
  onCancel: () => void
}>()

const bim = ref({ name: props.bim.bimName, file: props.bim.bimPath })
const visible = ref(true)

const saveHandler = async () => {
  if (!bim.value.name) {
    return message.error('请输入场景名称')
  } else {
    await props.onSave({
      bimName: bim.value.name,
      bimPath: props.bim.bimPath
    })
  }
  visible.value = false
}
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    margin-bottom: 0;
    color: #646566;
    font-size: 14px;
  }
}
</style>
