<template>
  <DesktopLayout v-if="data.show">
    <template #head>
      <DesignHead :title="t('移动设计 - 数据展示页')">
        <template #buttons>
          <div class="design-button">
            <a-button :disabled="current == 0" class="common-button" @click="prev">{{
              t('上一步')
            }}</a-button>
            <a-button :disabled="current == steps.length - 1" class="common-button" @click="next">{{
              t('下一步')
            }}</a-button>
            <a-button
              type="primary"
              :disabled="current == 0"
              class="common-button"
              @click="onSave(true)"
              >{{ t('完成') }}</a-button
            >
            <!-- <a-button class="common-todo-button" @click="onSave(false)">{{
              t('保存草稿')
            }}</a-button> -->
            <a-button type="primary" class="clean-icon" @click="$emit('close')">{{
              t('关闭')
            }}</a-button>
          </div></template
        >
      </DesignHead></template
    >
    <template #steps>
      <DesignStepBox>
        <a-steps :current="current">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
      </DesignStepBox>
    </template>

    <Basic
      v-if="current == 0"
      ref="basic"
      :isEdit="editId ? true : false"
      :basicData="data.basicData"
    />
    <Design v-if="current == 1" ref="design" :list="data.list" />
    <LoadingBox v-if="spinning" />
  </DesktopLayout>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { DesktopLayout, DesignHead, DesignStepBox } from '/@/components/Desktop';
  import Design from './designer/Design.vue';
  import Basic from './designer/Basic.vue';

  import { LoadingBox } from '/@/components/ModalPanel/index';
  import { DesktopInfoItem, MobileBasicData, MobileData } from '/@/model/mobileDesign/designer';
  import { message } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import {
    addMobileData,
    addMobileDataDraft,
    editMobileData,
    getMobileInfo,
  } from '/@/api/mobileDesign';
  import { buildAppDataCode } from '/@/utils/helper/appDataDesignHelper';
  const { t } = useI18n();
  let emits = defineEmits(['close']);
  const props = withDefaults(
    defineProps<{
      editId: string;
    }>(),
    {
      editId: '',
    },
  );
  const steps = [
    {
      title: t('基本信息'),
      content: t('基本信息'),
    },
    {
      title: t('页面设计'),
      content: t('页面设计'),
    },
  ];
  const basic = ref();
  const design = ref();

  const current = ref<number>(0);

  const spinning = ref<boolean>(false);
  const data: {
    show: boolean;
    basicData: MobileBasicData;
    jsonContent: string;
    list: Array<DesktopInfoItem>;
    enabledMark: number;
    appMenuId: string;
  } = reactive({
    show: false,
    basicData: {
      code: '', //编码
      name: '', //名称
      icon: '', //图标
      categoryId: null, //功能类别
      sortCode: 0, //排序
      isMenu: 0, //菜单
      isHome: 0, //首页
      remark: '', //描述
    },
    jsonContent: '',
    list: [],
    enabledMark: 1,
    appMenuId: '',
  });

  onMounted(async () => {
    if (props.editId) {
      let res = await getMobileInfo(props.editId);
      data.jsonContent = res.jsonContent;
      data.basicData = {
        code: res.code,
        name: res.name,
        icon: res.icon,
        categoryId: res.categoryId,
        sortCode: res.sortCode,
        isMenu: res.isMenu,
        isHome: res.isHome,
        remark: res.remark,
      };
      data.list = JSON.parse(res.jsonContent);
      data.show = true;
      data.enabledMark = res.enabledMark;
      data.appMenuId = res.appMenuId;
    } else {
      data.show = true;
      data.enabledMark = 1;
      data.list = [];
      data.appMenuId = '';
      current.value = 0;
    }
  });
  const next = async () => {
    if (current.value == 0) {
      try {
        let validate = await basic.value.validate();
        if (validate) {
          data.basicData = basic.value.getFieldsValue();
          current.value++;
        }
      } catch (error) {}
    }
  };
  const prev = async () => {
    data.list = await design.value.saveDesignData(false);
    current.value--;
  };

  async function onSave(close: boolean) {
    spinning.value = true;
    setTimeout(() => {
      if (close) {
        save();
      } else {
        saveDraft();
      }
    }, 100);
  }

  async function saveDraft() {
    let list = await design.value.saveDesignData();

    data.jsonContent = JSON.stringify(list);

    try {
      let res = false;
      if (props.editId) {
        let params: MobileData = {
          id: props.editId,
          ...data.basicData,
          jsonContent: data.jsonContent,
          enabledMark: -1,
        };
        if (data.basicData.isMenu) params.appMenuId = data.appMenuId;
        res = await addMobileDataDraft(params);
      } else {
        res = await addMobileDataDraft({
          ...data.basicData,
          jsonContent: data.jsonContent,
          enabledMark: -1,
        });
      }
      if (res) {
        message.success(t('保存成功'));
        emits('close');
      }
      spinning.value = false;
    } catch (error) {
      spinning.value = false;
    }
  }
  async function save() {
    let list = await design.value.saveDesignData();
    let frontCode = buildAppDataCode(list, 0);
    let homeCode = buildAppDataCode(list, 1);
    data.jsonContent = JSON.stringify(list);

    try {
      let res = false;
      if (props.editId) {
        let params: MobileData = {
          id: props.editId,
          ...data.basicData,
          jsonContent: data.jsonContent,
          enabledMark: data.enabledMark == -1 ? 1 : data.enabledMark,
        };
        if (data.basicData.isMenu) {
          params.appMenuId = data.appMenuId;
          params.pageCode = frontCode;
        }
        if (data.basicData.isHome) params.homeCode = homeCode;
        res = await editMobileData(params);
      } else {
        let params: MobileData = {
          ...data.basicData,
          jsonContent: data.jsonContent,
          enabledMark: data.enabledMark,
        };
        if (data.basicData.isMenu) {
          params.pageCode = frontCode;
        }
        if (data.basicData.isHome) params.homeCode = homeCode;
        res = await addMobileData(params);
      }
      if (res) {
        message.success(t('保存成功'));
        emits('close');
      }
      spinning.value = false;
    } catch (error) {
      spinning.value = false;
    }
  }
</script>

<style lang="less" scoped>
  :deep(.layout-box) {
    height: calc(100% - 90px);
  }

  :deep(.menu-box),
  :deep(.content-box),
  :deep(.resize-right) {
    height: 100%;
  }
</style>
