<template>
  <CommonRoot>
    <FlexCol backgroundColor="#f6f2e7">
      <StatusBarSpace backgroundColor="transparent" />
      <NavBar leftButton="back" />
      <FlexCol :padding="30">
        <FlexRow justify="space-between" :margin="[0,0,20,0]">
          <FlexCol>
            <H3>反馈纠错</H3>
            <Text fontConfig="subText">请填写您对文章的反馈，我们会尽快处理。</Text>
          </FlexCol>
          <button open-type="contact" class="remove-button-style">
            <FlexCol align="center">
              <Image width="50" height="50" src="https://mncdn.wenlvti.net/app_static/minnan/images/mine/CustomService.png" />
              <Text fontConfig="subText">联系客服</Text>
            </FlexCol>
          </button> 
        </FlexRow>
        <ProvideVar :vars="{
          DynamicFormGroupBorderRadius: 20,
          DynamicFormGroupMarginBottom: 20,
        }">
          <DynamicForm
            ref="formRef"
            :model="formModel"
            :options="formDefine"
          />
        </ProvideVar>
        <NaButton type="primary" @click="submit">提交</NaButton>
        <XBarSpace />
      </FlexCol>
    </FlexCol>
  </CommonRoot>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { useImageSimpleUploadCo } from '@/common/components/upload/ImageUploadCo';
import { showError } from '@/common/composeabe/ErrorDisplay';
import { back } from '@/components/utils/PageAction';
import { alert, toast } from '@/components/dialog/CommonRoot';
import { waitTimeOut } from '@imengyu/imengyu-utils';
import NaButton from '@/components/basic/Button.vue';
import Text from '@/components/basic/Text.vue';
import DynamicForm from '@/components/dynamic/DynamicForm.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import H3 from '@/components/typography/H3.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';
import NavBar from '@/components/nav/NavBar.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import CommonContent, { FeedBackItem } from '@/api/CommonContent';
import Image from '@/components/basic/Image.vue';
import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
import type { CheckBoxListProps } from '@/components/dynamic/wrappers/CheckBoxList.vue';
import type { FieldProps } from '@/components/form/Field.vue';
import type { FormProps } from '@/components/form/Form.vue';
import type { UploaderFieldProps } from '@/components/form/UploaderField.vue';

const loading = ref(false);

const formRef = ref<IDynamicFormRef>();
const formModel = ref(new FeedBackItem());
const formDefine : IDynamicFormOptions = {
  formAdditionaProps: {
    labelFlex: 0,
    inputFlex: 1,
    labelPosition: 'top'
  } as FormProps,
  formItems: [
    {
      name: 'c',
      type: 'flat-group',
      children: [
        { 
          label: '', 
          name: 'type', 
          type: 'check-box-list', 
          defaultValue: '',
          additionalProps: {
            loadData: async () => {
              await waitTimeOut(200);
              return (await CommonContent.getCategoryList(335)).map((item) => ({
                value: item.id,
                text: item.title,
                desc: item.intro,
              }));
            },
            multiple: false,
            vertical: true,
            useCell: true,
            innerStyle: { maxWidth: '680rpx' },
          } as CheckBoxListProps,
          rules:  [{
            required: true,
            message: '请选择问题类型',
          }] 
        },
      ]
    },
    {
      name: 'a',
      type: 'flat-group',
      children: [
        { 
          label: '问题描述', 
          name: 'content', 
          type: 'textarea', 
          defaultValue: '',
          additionalProps: {
            placeholder: '请详细填写，描述越清晰越可帮助处理问题',
            maxLength: 400,
            showWordLimit: true,
          } as FieldProps,
          rules:  [] 
        },
        {
          label: `联系方式`,
          name: 'contact',
          type: 'text',
          defaultValue: '',
          rules: [],
          additionalProps: {
            placeholder: '请输入您的联系电话或邮箱，我们将尽快联系您',
          },
        },
      ],
      childrenColProps: {
        span: 24
      }
    },
    {
      name: 'b',
      type: 'flat-group',
      children: [
        {
          label: `图片上传`,
          name: 'images',
          type: 'uploader',
          defaultValue: '',
          additionalProps: {
            upload: useImageSimpleUploadCo(),
            maxFileSize: 1024 * 1024 * 20,
            maxUploadCount: 9,
          } as UploaderFieldProps,
          rules: [],
        },
      ]
    },
  ]
}

const { querys } = useLoadQuerys({
  contentId: 0,
  title: '',
  page: '',
  modelId: 0,
  modelName: '',
  mainBodyColumnId: 0,
  mainBodyColumnName: '',
});

async function submit() {
  if (!formRef.value)
    return;
  try {
    await formRef.value.validate();
  } catch {
    toast('有必填项未填写，请检查');
    return;
  }
  try { 
    loading.value = true;
    formModel.value.contentId = querys.value.contentId;
    formModel.value.title = querys.value.title;
    formModel.value.modelId = querys.value.modelId;
    formModel.value.modelName = querys.value.modelName;
    formModel.value.mainBodyColumnId = querys.value.mainBodyColumnId;
    formModel.value.mainBodyColumnName = querys.value.mainBodyColumnName;
    formModel.value.page = querys.value.page;
    await CommonContent.feedBack(formModel.value as FeedBackItem);
    await alert({
      title: '提交成功',
      content: '感谢您的反馈，我们将尽快审核并通知您结果。',
      icon: 'success-filling',
      iconColor: 'success',
      width: 550
    }); 
    back();
  } catch (e) {
    showError(e);
  } finally {
    loading.value = false;
  }
}
</script>