<template>
  <div class="basic-box">
    <div class="form-box">
      <a-form :model="data.formState" :label-col="labelCol" layout="vertical">
        <a-row :gutter="50">
          <a-col :span="12">
            <a-form-item
              :label="t('模板名称')"
              :rules="[{ required: true }]"
              :help="validate && !data.formState.name ? t('请填写名称') : ''"
              :validate-status="validate ? (data.formState.name ? '' : 'error') : ''"
            >
              <a-input v-model:value="data.formState.name" :placeholder="t('请填写名称')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="t('模板编号')"
              :rules="[{ required: true }]"
              :help="validate && !data.formState.code ? t('请填写编号') : ''"
              :validate-status="validate ? (data.formState.code ? '' : 'error') : ''"
            >
              <a-input v-model:value="data.formState.code" :placeholder="t('请填写编号')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="模板类别"
              :rules="[{ required: true }]"
              :help="validate && !data.formState.category ? t('请填写模板类别') : ''"
              :validate-status="validate ? (data.formState.category ? '' : 'error') : ''"
            >
              <a-select
                v-model:value="data.formState.category"
                :placeholder="t('请选择模板类别')"
                style="width: 100%"
              >
                <a-select-option v-for="item in categoryOptions" :key="item.id" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="API"
              :rules="[{ required: true }]"
              :help="validate && !data.apiConfig.id ? t('请填写API') : ''"
              :validate-status="validate ? (data.apiConfig.id ? '' : 'error') : ''"
            >
              <SelectApiConfig v-model="data.apiConfig" :exampleStr="exampleStr">
                <InputModel
                  :value="data.apiConfig.name"
                  :placeholder="t('配置API')"
                  style="width: 100%; min-width: 100px"
                />
              </SelectApiConfig>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('菜单')">
              <a-switch
                v-model:checked="data.formState.isMenu"
                :checkedValue="1"
                :unCheckedValue="0"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="data.formState.isMenu">
            <a-form-item :label="t('图标')">
              <IconPicker v-model:value="data.formState.icon" />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="data.formState.isMenu">
            <a-form-item
              :label="t('上级')"
              :rules="[{ required: menuRequired }]"
              :help="validate && !data.formState.parentId && menuRequired ? t('请选择上级') : ''"
              :validate-status="
                validate && menuRequired ? (data.formState.parentId ? '' : 'error') : ''
              "
            >
              <MenuSelect
                :placeholder="t('请选择上级')"
                @change="
                  (val) => {
                    data.formState.parentId = val;
                  }
                "
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="t('排序')">
              <a-input-number
                v-model:value="data.formState.sortCode"
                :placeholder="t('请填写排序')"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item :label="t('描述')">
              <a-textarea
                v-model:value="data.formState.remark"
                :rows="4"
                :placeholder="t('请填写描述')"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, computed } from 'vue';
  import { IconPicker } from '/@/components/Icon';
  import { MenuSelect } from '/@/components/MenuSelect';
  import { PrintBasicData } from '/@/model/generator/print';
  import { SelectApiConfig, InputModel } from '/@/components/ApiConfig';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { TreeItem } from '/@/components/Tree';
  import { getDicDetailList } from '/@/api/system/dic';
  import { PrintCategory } from '/@/enums/printEnum';
  import { ApiConfig } from '/@/components/ApiConfig/src/interface';
  const labelCol = { style: { lineHeight: '14px', paddingBottom: '14px' } };
  const { t } = useI18n();
  const exampleStr = `{
    code: 0,
    msg: 'success',
    data: {
      title:'title',
      table:[]
    },
  }`;
  const props = withDefaults(
    defineProps<{
      basicData: PrintBasicData;
      apiConfig: ApiConfig;
    }>(),
    {
      basicData: () => {
        return {
          code: '',
          name: '',
          icon: '',
          category: undefined,
          parentId: '',
          sortCode: 0,
          isMenu: 0,
          remark: '',
          apiConfig: '',
          content: '',
        };
      },
    },
  );
  const data: {
    formState: PrintBasicData;
    apiConfig: ApiConfig;
  } = reactive({
    formState: {
      code: '',
      name: '',
      icon: '',
      category: undefined,
      parentId: '',
      sortCode: 0,
      isMenu: 0,
      remark: '',
      apiConfig: '',
      content: '',
    },
    apiConfig: {
      id: '',
      name: '',
      method: '',
      requestParamsConfigs: [], //Query Params
      requestHeaderConfigs: [], //Header
      requestBodyConfigs: [], //Body
    },
  });
  const validate = ref(false);
  // 模板类别
  const categoryOptions = ref<TreeItem[]>([]);
  const menuRequired = computed(() => {
    return import.meta.env.VITE_GLOB_PRODUCTION === 'true';
  });
  getCategoryList();
  async function getCategoryList() {
    categoryOptions.value = (await getDicDetailList({
      itemId: PrintCategory.ID,
    })) as unknown as TreeItem[];
  }
  onMounted(() => {
    data.formState = props.basicData;
    data.apiConfig = props.apiConfig;
  });
  async function validateForm() {
    validate.value = true;
    if (data.formState.code == '') {
      return false;
    }
    if (data.formState.name == '') {
      return false;
    }

    if (data.apiConfig && data.apiConfig.id == '') {
      return false;
    }
    if (
      data.formState.isMenu &&
      menuRequired.value &&
      (data.formState.parentId == '' || data.formState.parentId == undefined)
    ) {
      return false;
    }

    return true;
  }
  function getBasicData() {
    return data.formState;
  }
  function getApiData() {
    return data.apiConfig;
  }
  defineExpose({
    validateForm,
    getBasicData,
    getApiData,
  });
</script>

<style lang="less" scoped>
  .basic-box {
    height: 100%;
    overflow: hidden auto;
    background-color: #fff;
    border-radius: 16px;
    padding: 24px;
  }

  .form-box {
    width: 70%;
    height: 100%;
    margin: 0 auto;
  }

  .ant-form-item {
    margin-bottom: 30px;
  }

  .ant-input,
  :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector),
  :deep(.ant-input-affix-wrapper),
  .ant-input-number {
    border-radius: 4px;
  }

  :deep(.ant-input-group > .ant-input:first-child) {
    border-radius: 4px 0 0 4px;
  }

  :deep(.ant-input-group-addon:last-child) {
    border-radius: 0 4px 4px 0;
  }

  html[data-theme='dark'] {
    .basic-box {
      background-color: #000;
    }

    .form-box {
      background-color: #151515;
    }
  }
</style>
