<template>
  <a-modal
    :open="visible"
    title="申请数据源"
    :width="modalWidth"
    :centered="true"
    :body-style="bodyStyle"
    @cancel="$emit('close')"
    @ok="$emit('confirm')"
  >
    <div class="apply-modal-content">
      <div class="data-name-section">
        <span class="label">申请数据源：</span>
        <span class="value">{{ taskName }} {{ taskId }}</span>
      </div>
      <div class="apply-form-section">
        <a-form-item label="申请理由" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
          <a-input
            placeholder="请说明申请该数据的用途"
            rows="4"
            type="textarea"
            v-model:value="applyReason"
            style="width: 100%;"
          />
        </a-form-item>
        <a-form-item label="申请期限" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
          <a-date-picker placeholder="选择申请截止日期" />
        </a-form-item>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref, defineProps, defineEmits } from 'vue';
import { Form, Input, DatePicker, Modal } from 'ant-design-vue';

interface Props {
  visible: boolean;
  taskName: string;
  taskId: string ;
}
const props = defineProps<Props>();
const emit = defineEmits(['close', 'confirm']);

const modalWidth = computed(() => window.innerWidth * 0.6);
const bodyStyle = computed(() => ({
  height: `${window.innerHeight * 0.6}px`,
  overflowY: 'auto'
}));

const applyReason = ref('');
</script>

<style scoped lang="scss">
.apply-modal-content .data-name-section { margin-bottom: 10px; }
.apply-modal-content .data-name-section .label { color: #666; font-weight: 500; margin-right: 8px; }
.apply-modal-content .data-name-section .value { color: #1890ff; font-weight: 500; }
.apply-modal-content .apply-form-section { margin-top: 20px; }
.apply-modal-content .apply-form-section .ant-form-item { margin-bottom: 16px; }
</style>