<template>
  <a-page-header
    v-if="siteInfo"
    :title="form.name"
    :style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
    @back="() => $router.go(-1)"
  >
    <template #extra>
      <a-button key="1" type="primary" @click="save">保存</a-button>
      <a-button key="2" @click="openPreview(`${form.path}`)">预览</a-button>
    </template>
    <a-spin :spinning="spinning">
      <div class="ele-cell ele-cell-align-top">
        <!-- 设计画布 -->
        <div class="body ele-cell-content ele-bg-white">
          {{ form }}
          <a-divider />
          layout: {{ layout }}
          <template v-for="(item, index) in layout" :key="index">
            <template v-if="item.name == 'header'">
              <!--              <DesignHeader :data="item" @done="onDone" />-->
            </template>
            <template v-if="item.name == 'banner'">
              <!--              <DesignHeader :data="item" @done="onDone" />-->
              <!--              <DesignBanner :data="item" @done="onDone" />-->
            </template>
          </template>
        </div>
        <!-- 中间间隙 -->
        <div v-if="showTools" style="width: 20px"></div>
        <div v-else style="width: 10px"></div>
        <!-- 设计工具 -->
        <DesignTools
          v-model:visible="showTools"
          :data="form"
          @update="openTools"
          @done="doTools"
        />
      </div>
    </a-spin>
  </a-page-header>
</template>

<script lang="ts" setup>
  import { reactive, ref, unref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import useFormData from '@/utils/use-form-data';
  import { getDesign, updateDesign } from '@/api/cms/design';
  import { Design } from '@/api/cms/design/model';
  import { message } from 'ant-design-vue';
  import { FormInstance } from 'ant-design-vue/es/form';
  import { openPreview } from '@/utils/common';
  import { getSiteInfo } from '@/api/layout';
  import { Website } from '@/api/cms/website/model';
  import { Layout } from '@/api/layout/model';

  // 表格选中数据
  const formRef = ref<FormInstance | null>(null);
  const { currentRoute } = useRouter();
  const { query } = unref(currentRoute);
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { screenWidth } = storeToRefs(themeStore);
  const current = ref<any>(null);
  const spinning = ref(true);
  const showTools = ref(true);
  const siteInfo = ref<Website>();

  const layout = ref<Layout>();

  // 服务器信息
  const { form, assignFields, resetFields } = useFormData<Design>({
    pageId: undefined,
    name: '',
    images: '',
    path: '',
    component: '',
    content: '',
    type: undefined,
    status: 0,
    comments: '',
    sortNumber: 100,
    layout: undefined,
    home: undefined
  });

  const openTools = (e) => {
    showTools.value = !showTools.value;
  };

  const onDone = (item) => {
    current.value = item;
  };

  const doTools = (item: any) => {
    console.log(item, 'doTools');
    current.value = item;
  };

  /* 保存编辑 */
  const save = () => {
    const formData = {
      ...form,
      layout: JSON.stringify(form.layout)
    };
    updateDesign(formData)
      .then((msg) => {
        message.success('保存成功');
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  const { contentWidth } = storeToRefs(themeStore);
  // 使用 watch 监听 contentWidth 改变
  watch(contentWidth, (e) => {
    console.log(e);
  });

  /**
   * 加载数据
   */
  const reload = (id: number) => {
    // 加载网站信息
    getSiteInfo().then((data) => {
      siteInfo.value = data;
    });
    getDesign(id).then((data) => {
      if (data) {
        spinning.value = false;
        if (data.layout) {
          try {
            layout.value = JSON.parse(data.layout);
          } catch (e) {
            console.log('JSON格式有误');
          }
        }
        assignFields(data);
      }
    });
  };

  watch(
    () => query.id,
    (id) => {
      if (id) {
        reload(Number(id));
      } else {
        resetFields();
        formRef.value?.clearValidate();
      }
    },
    { immediate: true }
  );
</script>

<script lang="ts">
  export default {
    name: 'DesignDetail'
  };
</script>

<style lang="less">
  .body {
    width: 80vw;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  }
  .header {
    height: 120px;
  }
</style>
