<template>
  <div id="designer-host" class="h-full">
    <a-button class="button-item" @click.stop="back" type="primary">返回</a-button>
    <Designer
      ref="designRef"
      :language="'zh'"
      :onSave="onSave"
      :onSaveAs="onSaveAs"
      :onOpen="onOpen"
      :onCreate="onCreate"
      :onRender="onRender"
      :onOpenFileMenu="onOpenFileMenu"
    />
    <Viewer v-if="show" :content="viewContent" />
    <a-modal
      :visible="open"
      title="修改文件名"
      :maskClosable="false"
      :width="400"
      okText="确定"
      cancelText="取消"
      @ok="save"
      @cancel="closeSaveModel"
    >
      <div class="model-box">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
          autocomplete="off"
          @finish="save"
        >
          <a-form-item
            label="文件名"
            name="name"
            :rules="[{ required: true, message: '请输入文件名' }]"
          >
            <a-input v-model:value="formState.name" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script language="ts" setup>
  import { Designer } from '@grapecity/activereports-vue';
  import '@grapecity/activereports/styles/ar-js-ui.css';
  import '@grapecity/activereports/styles/ar-js-designer.css';
  import { ref, reactive, onMounted } from 'vue';
  import '@grapecity/activereports-localization/dist/designer/zh-locale';
  import Viewer from './../../viewer//components/Viewer.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { addProfessionalReport, updateProfessionalReport } from '/@/api/system/report';
  const { t } = useI18n();
  const { notification } = useMessage();
  const designRef = ref();
  const open = ref(false);
  const show = ref(false);
  const viewContent = ref('');
  const formState = reactive({
    name: '',
    info: {},
  });
  let props = defineProps({
    id: String,
    fileJsonStr: String,
  });
  let emits = defineEmits(['close']);
  onMounted(() => {
    if (props.id) {
      let reportObj = JSON.parse(props.fileJsonStr);
      formState.name = reportObj.displayName;
      formState.info = reportObj;
      designRef.value.setReport(reportObj);
    }
  });
  const getJson = async () => {
    const res = await window.showOpenFilePicker();
    const [fh] = res;
    const file = await fh.getFile();
    return { name: file.name.split('.')[0], definition: JSON.parse(await file.text()) };
  };
  const onCreate = () => {
    console.log('onCreate', info);
  };
  const onOpen = async () => {
    const obj = await getJson();
    return Promise.resolve(obj);
  };
  const onRender = (info) => {
    viewContent.value = JSON.stringify(info);
    show.value = true;
  };
  const onSave = (info) => {
    openSaveModel(info);
  };
  const onSaveAs = (info) => {
    openSaveModel(info);
  };
  const onOpenFileMenu = (info) => {
    console.log('onOpenFileMenu', info);
  };
  function openSaveModel(info) {
    formState.name = info.displayName;
    formState.info = info;
    open.value = true;
  }
  function closeSaveModel() {
    open.value = false;
  }
  function back() {
    if (show.value) {
      viewContent.value = '';
      show.value = false;
    } else {
      backToIndex();
    }
  }
  function backToIndex() {
    closeSaveModel();
    emits('close');
  }
  async function save() {
    formState.info.displayName = formState.name;
    try {
      let res = false;
      if (props.id) {
        res = await updateProfessionalReport({
          id: props.id,
          name: formState.name,
          fileJson: JSON.stringify(formState.info),
        });
      } else {
        res = await addProfessionalReport({
          name: formState.name,
          fileJson: JSON.stringify(formState.info),
        });
      }
      if (res) {
        notification.success({
          message: t('提示'),
          description: t('成功！'),
        }); //提示消息
        backToIndex();
      }
    } catch (error) {
      notification.error({
        message: t('提示'),
        description: t('失败！'),
      }); //提示消息
    }
  }
</script>
<style scoped lang="less">
  #viewer-host {
    width: 100%;
    min-height: 100vh;
  }

  :deep(.gc-app) {
    border-radius: 16px;
  }

  :deep(.gc-grid-item--appbar) {
    background: #fff;
    border-radius: 16px 16px 0 0;
  }

  :deep(.gc-grid-item--toolbar),
  :deep(.gc-sidebar__container),
  :deep(.gc-grid-item--statusbar) {
    background: #fff;
  }

  :deep(.app-status-bar) {
    border-radius: 0 0 16px;
  }

  :deep(.gc-menu__splitter) {
    background: #3e9eff;
    width: 26px;
    margin: 0 auto;
  }

  :deep(.gc-menu__btn-container) {
    background: @primary-color;
    border-radius: 0 0 0 16px;
  }

  :deep(.gc-btn--accent),
  :deep(.wd-toolbox-item),
  :deep(.gc-tabs--simplified .gc-btn::after),
  :deep(.gc-property-grid .gc-property-grid__header) {
    background: @primary-color;
  }

  :deep(.gc-menu__logo) {
    background: @primary-color;
    border-radius: 16px 0 0;
  }

  :deep(.gc-btn--accent:not([disabled], .gc-btn--disabled):hover),
  :deep(.gc-tabs--simplified .gc-btn:not([disabled], .disabled):hover::after) {
    background: #145ea9;
  }

  :deep(.gc-accent-color),
  :deep(.gc-heading--level-info .gc-heading__container) {
    color: @primary-color;
  }

  .button-item {
    position: absolute;
    right: 60px;
    top: 40px;
    z-index: 99;
  }

  .model-box {
    padding: 20px;
  }

  :deep(.model-box) {
    padding: 20px;
  }
</style>
