<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form';
import { useForm } from '@/hooks/web/useForm';
import { PropType, reactive, watch, ref, unref } from 'vue';
import { ListItem } from '@/api/dict/types';
import { getOrganTree, getCsckSystemList } from '@/api/common';
import { useValidator } from '@/hooks/web/useValidator';
import dayjs from 'dayjs';
import { getRoleTreeApi } from '@/api/system/SysRole';
import { getDateByPrevMonth } from '@/utils/dateUtil';
import { getLoginNameByUserInfo,getLoginOrganCodeByUserInfo } from '@/utils/auth';
const date = getDateByPrevMonth();
const { required } = useValidator();
// 获取当前用户机构号
const loginOrganCode = getLoginOrganCodeByUserInfo();
const session_loginName = getLoginNameByUserInfo();
const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null,
  },
  actionType: {
    type: String,
    default: 'add',
  },
});
const systemList = ref<ListItem[]>([]);
getCsckSystemList().then(item => {
  item.forEach(item => {
    item.label = item.value + '-' + item.label;
  });
  systemList.value = item;
});
// systemList.value.filter(item=>!!item).join("-")
const { formRegister, formMethods } = useForm();
const { setValues, getFormData, getElFormExpose, getComponentExpose } = formMethods;

const formSchema = reactive<FormSchema[]>([
  {
    field: 'dataDate',
    label: '数据日期',
    component: 'DatePicker',
    componentProps: {
      type: 'date',
      style: 'width: 100%',
    },
    value: date,
    colProps: { span: 24 },
  },
  {
    field: 'organCode',
    label: '机构',
    componentProps: {
      checkStrictly: false,
      checkOnClickNode: true,
      nodeKey: 'id',
      props: { children: 'childs', label: 'nodeName' },
      filterable: true,
      multiple: true,
      collapseTags: true,
      showCheckbox: true,
      // style: { minWidth: '300px' },
      style: 'width: 100%',
      value:loginOrganCode

    },
    component: 'TreeSelect',
    value: [loginOrganCode],
    optionApi: async () => {
      const res = await getOrganTree({
        treeid: '1',
        systemCode: 'portal',
        loginOrganCode,
      });
      return res.body.result;
    },
    colProps: { span: 24 },
  },
  {
    field: 'systemGroupCode',
    label: '系统组',
    component: 'TreeSelect',
    optionApi: async () => {
      const res = await getRoleTreeApi();
      return res;
    },
    componentProps: {
      style: 'width: 100%',
      checkStrictly: true,
      multiple: false,
      showCheckbox: true,
      collapseTags: true,
      nodeKey: 'id',
      props: { children: 'childs', label: 'nodeName' },
    },
    colProps: { span: 24 },
  },
  {
    field: 'createUser',
    label: '创建人',
    component: 'Input',
    value:session_loginName,
    hidden:true
  },
]);

const rules = reactive({
  dataDate: [required()],
  organCode: [required()],
  systemGroupCode: [required()],
});

const submit = async () => {
  const elForm = await getElFormExpose();
  const valid = await elForm?.validate().catch(err => {
    console.log(err);
  });
  if (valid) {
    const formData = await getFormData<{ systemGroupCode: string; dataDate: string; organCode: string }>();
    const treeRef = await getComponentExpose('organCode');
    const checkedKeys = unref(treeRef)?.getCheckedKeys() || []
    const data = {
      ...formData,
      dataDate: dayjs(formData.dataDate).format('YYYY-MM-DD'),
      organCode: checkedKeys
    }
    return data;
  }
};

watch(
  () => props.currentRow,
  currentRow => {
    if (!currentRow) return;
    setValues(currentRow);
  },
  {
    deep: true,
    immediate: true,
  },
);

defineExpose({
  submit,
});
</script>

<template>
  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
</template>

<style lang="less" scoped>
:deep(.el-select .el-select__tags > span) {
  display: inline-flex !important;
}

:deep(.el-select__tags .el-tag + .el-tag:last-child) {
  display: none;
}
</style>
