<script setup>
	import {
		NModal,
		NInputGroup,
		NSelect,
		NInput,
		NRadioGroup,
		NRadio,
		NForm,
		NFormItem,
		NButton,
		NSpace,
		NSpin,
	} from "naive-ui";
	import { ref } from "vue";
	import { useEditorInstance } from "@lib/core/extension/utils/common";

	const showModal = ref(false);

	const href = ref("");
	const text = ref("");
	const target = ref("_blank");
	const isInsert = ref(false)
  const packageType = ref(null)
  const loading = ref(false)
  const packageOptions = [
    { label: '标准本地版', value: 'standard' },
    { label: '公安本地版', value: 'ga' }
  ]

  const props = defineProps({
    handleUpload: {
      type: Function,
      required: false,
    },
  });

	const emit = defineEmits(["ok"]);

	const editor = useEditorInstance()

	function open() {
		showModal.value = true;
		target.value = "_blank";
		href.value = "";
		text.value = "";
    packageType.value = null;
		const selection = editor.value.state.selection
		isInsert.value = selection.from === selection.to
	}

  function triggerUpload() {
    if (!packageType.value) {
      window.$message?.warning('请选择类型')
      return
    }
    const input = document.createElement('input')
    input.type = 'file'
    input.onchange = async (e) => {
      const file = e.target.files[0]
      if (!file) return

      loading.value = true
      try {
        if (props.handleUpload) {
          const res = await props.handleUpload(file, packageType.value)
          if (res) {
            href.value = res
						text.value = file.name
          }
        }
      } catch (error) {
        console.error(error)
        window.$message?.error('上传失败')
      } finally {
        loading.value = false
      }
    }
    input.click()
  }

	function onOk() {
		showModal.value = false;
		emit("ok", text.value, href.value, target.value);
	}

	function onCancel() {
		showModal.value = false;
	}

	defineExpose({ open });
</script>

<template>
  <n-modal v-model:show="showModal" preset="card" style="width: 450px" :mask-closable="!loading" :close-on-esc="!loading" :closable="!loading">
    <template #header>
      <div>插入超链接</div>
    </template>
    <n-spin :show="loading">
      <div>
        <n-form label-placement="left" label-width="auto">
          <n-form-item label="文字" v-if="isInsert">
            <n-input-group>
              <n-input v-model:value="text" />
            </n-input-group>
          </n-form-item>
					<n-form-item label="类型">
            <n-select v-model:value="packageType" :options="packageOptions" placeholder="请选择类型" clearable />
          </n-form-item>
          <n-form-item label="链接地址">
            <n-input-group>
              <n-input style="margin-right: 10px;" v-model:value="href"/>
              <n-button type="primary" @click="triggerUpload" :loading="loading">上传安装包</n-button>
            </n-input-group>
          </n-form-item>
          <n-form-item label="打开方式">
            <n-radio-group v-model:value="target">
              <n-space>
                <n-radio value="_self"> 当前窗口 </n-radio>
                <n-radio value="_blank"> 新窗口 </n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
        </n-form>
      </div>
      <template #description>
        正在上传中...
      </template>
    </n-spin>
    <template #footer>
      <n-space justify="end">
        <n-button @click="onCancel" :disabled="loading"> 取消 </n-button>
        <n-button type="info" @click="onOk" :disabled="loading"> 确定 </n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<style scoped></style>
