<template>
  <div class="l-rblock">
    <div class="l-page-pane">
      <BasicForm ref="formModuleRef" @register="registerForm" :model="formData">
        <template #bodycell="{ model, field }">
          {{ model }}
          {{ field }}
          <template v-if="field === 'formCode'">
            <a-input
              v-model:value="formData.formCode"
              @change="custmerformChange(model)"
              @click="modelShow"
              :span="24"
              :placeholder="请选择"
            />
          </template>
          <template v-if="field === 'formVerison'">
            <a-select
              v-model:value="formData.formVerison"
              :options="formVerisons"
              :span="24"
              :placeholder="请选择"
            />
          </template>
        </template>
      </BasicForm>
      <div class="formLine"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, provide, computed } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';

  import { functionGetSchemePageList } from '@/api/demo/formScheme';

  import { formSchema } from './formModule.data';

  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
    labelWidth: 100,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: { lg: 24, md: 24 },
  });

  const formModuleRef = ref<any>();

  // 参数
  let formData = {
    type: 1,
    code: '',
    name: '',
    icon: 'el-icon-star-off',
    formCode: '',
    formVerison: '',
    pmoduleId: '',
    moduleId: '',
    sortCode: '',
    enabledMark: 1,
    description: '',
  };

  const formVerisons = ref([]);

  async function custmerformChange(model) {
    console.log(model);
    let versioins = [];
    let query = {
      schemeInfoId: model.formCode,
    };
    const data = await functionGetSchemePageList(query);
    data.array.forEach((element) => {
      versioins.push({
        label: element.createDate,
        value: element.id,
      });
    });
    formVerisons.value = versioins;
  }
</script>

<style lang="less">
  .l-rblock {
    width: 100%;
    height: 100%;
    background: #f0f2f5;
  }
  .l-page-pane {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 794px;
    overflow: hidden auto;
    background: #fff;
    border-radius: 4px;
    margin: auto;
    padding: 24px;
  }
  .addDataBaseTableBox {
    border: 1px dashed #f0f0f0;
    text-align: center;
    cursor: pointer;
    margin-top: -20px;
    &:hover {
      border-color: #409eff;
    }
  }
  .connectTableTitle {
    padding-top: 20px;
  }
  .formLine {
    height: 50px;
  }
</style>
