<template>
  <a-modal
    :width="900"
    v-model:visible="state.apiConfigDia"
    :title="title"
    :maskClosable="false"
    :bodyStyle="state.modalBodyStyle"
    destroyOnClose
    @cancel="handleClose"
  >
    <ApiFormConfig v-model:info="state.apiConfigInfo" />
    <template #footer>
      <div class="footer-container">
        <a-button type="primary" @mouseenter="state.isShowExample = true">{{
          t('返回出参格式')
        }}</a-button>
        <div>
          <a-button key="back" @click="handleClose">{{ t('取消') }}</a-button>
          <a-button key="submit" type="primary" @click="handleSubmit">{{ t('确定') }}</a-button>
        </div>
      </div>
    </template>
    <div class="editor-box" v-if="state.isShowExample">
      <CodeEditor :value="example" language="json" readonly style="font-size: 12px" />
      <span class="editor-close" @click="state.isShowExample = false"> x </span>
      <span class="editor-copy" @click="copy">{{ t('复制代码') }}</span>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, onMounted, computed } from 'vue';
  import ApiFormConfig from './ApiFormConfig.vue';
  import { CodeEditor } from '/@/components/CodeEditor';
  import useClipboard from 'vue-clipboard3';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();

  const props = defineProps({
    apiBtnConfig: {
      type: Object as PropType<any>,
    },
    apiFormDialog: { type: Boolean },
    title: { type: String },
    formItem: {
      type: Object as PropType<any>,
    },
  });
  const emit = defineEmits(['update:apiFormDialog', 'getBtnConfig']);

  const { toClipboard } = useClipboard();

  const state = reactive({
    apiConfigDia: props.apiFormDialog as boolean,
    isShowExample: false as boolean,
    modalBodyStyle: {
      padding: '15px 15px 10px 10px',
      minHeight: '400px',
    },
    apiConfigInfo: props.apiBtnConfig,
  });
  const infoExample = JSON.stringify({
    code: 0,
    msg: t('提示信息'),
    data: [
      {
        label: t('选项一'),
        value: 1,
      },
      {
        label: t('选项二'),
        value: 2,
      },
      {
        label: t('选项三'),
        value: 3,
      },
    ],
  });
  const example = computed(() => {
    return infoExample;
  });

  onMounted(() => {});

  const handleClose = () => {
    emit('update:apiFormDialog', false);
  };

  const handleSubmit = () => {
    emit('getBtnConfig', state.apiConfigInfo);
    emit('update:apiFormDialog', false);
  };

  const copy = async () => {
    try {
      await toClipboard(infoExample);
    } catch (e) {
      console.error(e);
    }
  };
</script>

<style lang="less" scoped>
  .footer-container {
    display: flex;
    justify-content: space-between;
  }

  .editor-box {
    width: 300px;
    position: absolute;
    height: 350px;
    left: 140px;
    bottom: 13px;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px 3px #ccc;

    .editor-close {
      position: absolute;
      top: -3px;
      right: 13px;
      font-size: 16px;
      cursor: pointer;
    }

    .editor-copy {
      position: absolute;
      bottom: 5px;
      right: 15px;
      cursor: pointer;
      z-index: 999;
      color: #5e95ff;
    }
  }
</style>
