// 代码生成器
<template>
  <PageWrapper dense fixedHeight contentFullHeight>
    <GroupCard :growCardList="items" />
    <DataFirstModal
      v-if="state.isShowDataFirst"
      @register="registerDataFirst"
      @close="handleClose('isShowDataFirst')"
    />
    <CodeFirstModal
      v-if="state.isShowCodeFirst"
      @register="registerCodeFirst"
      @close="handleClose('isShowCodeFirst')"
    />
    <SimpleTemplateModal
      v-if="state.isShowSimpleTemplate"
      @register="registerSimpleTemplate"
      @close="handleClose('isShowSimpleTemplate')"
    />
    <NoTableModal
      v-if="state.isShowNoTable"
      @register="registerNoTable"
      @close="handleClose('isShowNoTable')"
    />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  import GroupCard from './components/GroupCard.vue';
  import DataFirstModal from './components/DataFirstModal.vue';
  import CodeFirstModal from './components/CodeFirstModal.vue';
  import SimpleTemplateModal from './components/SimpleTemplateModal.vue';
  import NoTableModal from './components/NoTableModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useRouter } from 'vue-router';
  import { PageWrapper } from '/@/components/Page';
  const { t } = useI18n();
  const [registerDataFirst, { openModal: openDataFirstModal }] = useModal();
  const [registerCodeFirst, { openModal: openCodeFirstModal }] = useModal();
  const [registerSimpleTemplate, { openModal: openSimpleTemplateModal }] = useModal();
  const [registerNoTable, { openModal: openNoTableModal }] = useModal();

  import interfaceFirstPng from '/@/assets/images/design/interfaceFirst.png';
  import dataFirst from '/@/assets/images/design/dataFirst.png';
  import simpleTemplate from '/@/assets/images/design/simpleTemplate.png';
  import quickDevelop from '/@/assets/images/design/quickDevelop.png';
  import noTable from '/@/assets/images/design/noTable.png';

  const router = useRouter();
  const items = [
    {
      name: t('界面优先'),
      content: t('以界面为基础设计并生成单表或多表的基础功能'),
      btnName: t('设计功能'),
      image: interfaceFirstPng,
      func: () => {
        openCodeFirstModal(true, { undoAble: true });
      },
    },
    {
      name: t('数据优先'),
      content: t('以数据为基础设置生成单表或多表的基础功能'),
      btnName: t('设计功能'),
      image: dataFirst,
      func: () => {
        openDataFirstModal(true, { undoAble: true });
      },
    },
    {
      name: t('简易模板'),
      content: t('通过简单操作生成不需要考虑数据库的基础功能'),
      btnName: t('设计功能'),
      image: simpleTemplate,
      func: () => {
        openSimpleTemplateModal(true, { undoAble: true });
      },
    },
    {
      name: t('快速生成代码'),
      content: t('根据数据表结构自动快速生成功能代码'),
      btnName: t('设计功能'),
      image: quickDevelop,
      func: () => {
        router.push({ path: '/dataconfig/database' });
      },
    },
    {
      name: t('无表表单'),
      content: t('以客户自定义接口的数据交互方式生成表单功能'),
      btnName: t('设计功能'),
      image: noTable,
      func: () => {
        openNoTableModal(true, { undoAble: true });
      },
    },
  ];

  const state = reactive({
    isShowDataFirst: true,
    isShowCodeFirst: true,
    isShowSimpleTemplate: true,
    isShowNoTable: true,
  });
  const handleClose = (modal) => {
    state[modal] = !state[modal];
    setTimeout(() => {
      state[modal] = !state[modal];
    }, 100);
  };
</script>
<style lang="less" scoped>
  :deep(.vben-page-wrapper-content) {
    overflow: auto;
  }

  .card-name {
    font-size: 18px;
    font-weight: 500;
  }

  .card-content {
    margin-bottom: 20px;
  }

  .box {
    padding: 0;

    :deep(.item) {
      width: calc((100% - 10px) / 2);
      height: calc(50vh - 80px);
      background-color: #fff;
      border: 1px solid #f0f0f0;
      border-radius: 10px;
      margin: 0 0 10px;

      &:nth-child(odd) {
        margin: 0 10px 10px 0;
      }
    }
  }
</style>
