<template>
  <PageWrapper contentBackground contentClass="p-4">
    <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="页面">
        <a-select v-model:value="formState.page" placeholder="请选择页面">
          <a-select-option v-for="(item, index) in publishOptions" :key="index" :value="item.value">
            {{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-form-item>
    </a-form>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { nextTick, onMounted, ref, reactive } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicForm, useForm } from '@/components/Form';
  import { projectListApi, setMainPage, getMainPage } from '@/api/path/project.api';
  import { previewPath } from '@/utils';

  const { createConfirm, createMessage } = useMessage();
  const labelCol = ref({ span: 4 });
  const wrapperCol = ref({ span: 14 });
  const publishOptions = ref([]);

  onMounted(() => {
    getPublishedPageList();
    getPage();
  });

  const formRef = ref();
  const formState = reactive({
    page: '',
  });
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState.page);
        setMainPage({ mainPage: formState.page })
          .then((res) => {
            createMessage.success('设置成功');
          })
          .catch((error) => {
            console.log('error', error);
          });
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  // 获取已发布页面列表
  const getPublishedPageList = async () => {
    const data = await projectListApi({
      state: 1,
      page: 1,
      limit: 1000,
    });
    publishOptions.value = data.items.map((item) => {
      return {
        label: item.projectName,
        value: previewPath(item.id),
      };
    });
  };
  const getPage = () => {
    getMainPage().then((res) => {
      formState.page = res;
    });
  };
</script>
<style lang="less" scoped>
  .demo {
    background-color: @component-background;
  }
</style>
