<template>
  <a-modal v-model:visible="visible" title="提示">
    <div class="content-box">
      <ExclamationCircleOutlined />
      <div>
        当前表单数据为已启用状态，是修改数据为草稿状态（可能会影响已发布功能）还是新增一条为草稿状态的数据？
      </div>
    </div>
    <template #footer>
      <a-button @click="handleChange('cancel')">取消</a-button>
      <a-button type="primary" @click="handleChange('add')">新增草稿数据</a-button>
      <a-button type="primary" @click="handleChange('edit')">修改表单状态</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

  const visible = ref<boolean>(true);
  const emit = defineEmits(['changeDraft']);
  const handleChange = (type = '') => {
    emit('changeDraft', type);
  };
</script>
<style lang="less" scoped>
  .content-box {
    display: flex;
    font-size: 16px;
    margin: 30px 20px;

    .anticon {
      color: #faad14;
      font-size: 24px;
      margin-right: 16px;
    }
  }
</style>
