<template>
  <lrlayout>
    <div :class="prefixCls">
      <div :class="`${prefixCls}_content`">
        <a-form
          ref="formModuleRef"
          :rules="rules"
          :model="formData"
          labelAlign="right"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item label="编号" name="code">
            <a-input v-model:value="formData.code" />
          </a-form-item>
          <a-form-item label="名称" name="name">
            <a-input v-model:value="formData.name" />
          </a-form-item>
          <a-form-item label="图标" name="icon">
            <IconPicker v-model:value="formData.icon" />
          </a-form-item>
          <a-form-item label="表单选择" name="formCodeName" @click="handleShow">
            <a-input v-model:value="formData.formCodeName">
              <template #addonAfter>
                <FileTextOutlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="表单选择" name="formCode" v-show="false">
            <a-input v-model:value="formData.formCode" />
          </a-form-item>
          <a-form-item label="表单版本" name="formVerison">
            <a-select v-model:value="formData.formVerison" :options="formVerisons" />
          </a-form-item>
          <a-form-item label="上级" name="pmoduleId">
            <a-tree-select
              v-model:value="formData.pmoduleId"
              :tree-data="pmoduleIds"
              :field-names="{ label: 'name', value: 'id' }"
            />
          </a-form-item>
          <a-form-item label="状态" name="enabledMark">
            <a-radio-group v-model:value="formData.enabledMark" size="mini" button-style="solid">
              <a-radio-button :value="1">是</a-radio-button>
              <a-radio-button :value="0">否</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <!-- <a-form-item label="是否系统" name="isSys">
            <a-radio-group v-model:value="formData.isSys" size="mini" button-style="solid">
              <a-radio-button :value="true">是</a-radio-button>
              <a-radio-button :value="false">否</a-radio-button>
            </a-radio-group>
          </a-form-item> -->
          <a-form-item label="排序" name="sortCode">
            <a-input-number v-model:value="formData.sortCode" :min="0" />
          </a-form-item>
          <a-form-item label="描述" name="description">
            <a-textarea v-model:value="formData.description" />
          </a-form-item>
        </a-form>
        <div :class="`${prefixCls}_formLine`"></div>
      </div>
    </div>
    <ModuleModal @register="registerModal" @get-scheme-row="getSchemeRow" />
  </lrlayout>
</template>

<script lang="ts" setup>
  import { FileTextOutlined } from '@ant-design/icons-vue';
  import { defineEmits, ref, onMounted, watch, defineExpose } from 'vue';
  import { IconPicker } from '@/components/Icon';
  import { TreeItem } from '@/components/Tree';
  import { useModal } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getMenuList } from '@/api/demo/system';
  import { useI18n } from '@/hooks/web/useI18n';

  import ModuleModal from './modalForm-Modal.vue';
  import { functionGetSchemePageList, functionGetForm } from '@/api/demo/formScheme';

  // emit
  const emit = defineEmits(['change-form-verisons', 'set-steps-current']);
  // message
  const { createMessage } = useMessage();
  // useI18n
  const { t } = useI18n();
  // 定义props
  const props = defineProps({
    editData: {
      type: Object,
      default: () => ({}),
    },
    isNextSteps: {
      type: Boolean,
      default: () => false,
    },
  });
  // 表单栅格
  const labelCol = { span: 4 };
  const wrapperCol = { span: 20 };

  // 表单选择声明
  const [registerModal, { openModal }] = useModal();
  // 表单ref
  const formModuleRef = ref<any>();
  // 版本options
  const formVerisons = ref([]);
  // 上级options
  const pmoduleIds = ref<TreeItem[]>([]);

  // 参数
  const formData = ref({
    type: 1,
    code: '',
    name: '',
    icon: 'ant-design:star-outlined',
    formCode: '',
    formCodeName: '',
    formVerison: '',
    pmoduleId: '',
    moduleId: '',
    enabledMark: 1,
    isSys: true,
    sortCode: '0',
    description: '',
  });
  // 规则
  let rules = {
    code: [{ required: true, message: '请输入' }],
    name: [{ required: true, message: '请输入' }],
    icon: [{ component: 'IconPicker', required: true, message: '请输入' }],
    formCodeName: [{ required: true, message: '请输入' }],
    formVerison: [{ required: true, message: '请选择版本' }],
    pmoduleId: [{ required: true, message: '请输入' }],
    enabledMark: [{ required: true }],
  };

  // 监视props
  watch(
    () => props.editData,
    () => {
      if (props.editData.formEdit) {
        // 编辑
        setFormData(props.editData.record);
      } else {
        // 新增
        formData.value = props.editData.record;
      }
    },
  );
  // 监视props
  watch(
    () => props.isNextSteps,
    () => {
      // 基本配置页数据是否填完整
      if (props.isNextSteps) {
        let checkdata = formData.value;
        if (
          checkdata.code === '' ||
          checkdata.formCode === '' ||
          checkdata.name === '' ||
          checkdata.formVerison === '' ||
          checkdata.pmoduleId === ''
        ) {
          createMessage.error(t('数据未填完整'));
          emit('set-steps-current', false);
        } else {
          emit('set-steps-current', true);
        }
      }
    },
  );
  // 监视formVerison
  watch(
    () => formData.value.formVerison,
    () => {
      if (formData.value.formVerison) {
        changevalidateSteps();
      }
    },
  );

  // 表单选择打开
  function handleShow() {
    openModal();
  }
  // 表单选择回传数据-版本
  async function getSchemeRow(row) {
    let formVerisons_temp = [];
    formData.value.formCode = row.id;
    formData.value.formCodeName = row.name;
    // 表单选择回传数据变化后，版本变化
    const historyData = await functionGetSchemePageList({ schemeInfoId: row.id });
    historyData.items.forEach((t) => {
      formVerisons_temp.push({ label: t.createDate, value: t.id });
    });
    formVerisons.value = formVerisons_temp;

    // 编辑-按照旧的版本
    if (props.editData.formEdit) {
      formData.value.formVerison = formVerisons_temp.find((t) => {
        return t.value === props.editData.record.formVerison;
      });
    } else {
      // 新增-默认最新的版本
      formData.value.formVerison = formVerisons_temp[0].value;
    }
  }

  // 版本改变后传输数据给父组件
  function changevalidateSteps() {
    emit('change-form-verisons', formData.value.formVerison);
  }

  // 上级
  async function fetch() {
    pmoduleIds.value = await getMenuList();
  }

  // 编辑时的初始值
  async function setFormData(record) {
    // info和scheme
    const result = await functionGetForm({ id: record.formCode });
    record.isSys = true;
    formData.value = record;
    getSchemeRow(result.info);
  }

  defineExpose({
    formData,
  });
  onMounted(() => {
    fetch();
  });

  const prefixCls = 'l-rblock';
</script>

<style lang="less" scoped>
  .l-rblock {
    width: 100%;
    height: 100%;
    background-color: @border-color-base;

    &_content {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      height: 100%;
      max-width: 794px;
      overflow: hidden auto;
      background: @component-background;
      border-radius: 4px;
      margin: auto;
      padding: 24px;
    }

    &_formLine {
      height: 50px;
    }
  }
</style>
