<!-- @format -->

<template>
  <ns-view-add-form
    :schemas="formSchema"
    :model="data"
    :title="'编辑人员'"
    :api="'/api/community/objs/Role/Account'" />
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, provide, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { http } from '/nerv-lib/util/http';
  import SelectRolePerson from './component/selectRolePerson.vue';
  export default defineComponent({
    name: 'NsViewSetRolePerson',
    components: {
      SelectRolePerson,
    },
    setup() {
      provide('components', () => {
        return { SelectRolePerson };
      });
      const router = useRouter();
      const uuid = router.currentRoute.value.query['roleUuid'];
      const show = ref(false);
      let data = ref({});
      const personList = ref({});

      function setOriginalForm(list: []) {
        return [
          {
            field: 'roleUuid',
            show: false,
            component: 'NsInput',
          },
          {
            field: 'fields',
            label: '',
            displayFormItem: false,
            class: 'ns-form-item-full',
            component: 'NsChildForm',
            componentProps: {
              title: '基本信息',
              schemas: [
                {
                  field: 'roleName',
                  label: '角色名称',
                  component: 'NsInput',
                  componentProps: {
                    disabled: true,
                  },
                },
                {
                  field: 'describe',
                  label: '角色描述',
                  component: 'NsInput',
                  componentProps: {
                    disabled: true,
                  },
                },
              ],
            },
          },
          {
            field: 'fields',
            label: '',
            displayFormItem: false,
            class: 'ns-form-item-full',
            component: 'NsChildForm',
            componentProps: {
              title: '角色权限设置',
              schemas: [
                {
                  field: 'accountCodeList',
                  label: '',
                  class: 'ns-form-item-full ns-form-item-padding',
                  component: 'SelectRolePerson',
                  componentProps: {
                    placeholder: '请输入',
                    field: 'accountCodeList',
                    labelField: 'personName',
                    valueField: 'personUuid',
                    dataSource: list,
                    // disabled: uuid && true,
                  },
                  rules: [
                    // {
                    //   required: true,
                    //   message: '不得为空',
                    //   trigger: 'blur',
                    // },
                  ],
                },
              ],
            },
          },
        ];
      }
      function load(): void {
        if (!uuid) {
          return;
        }
        const requestArr = [];
        // 角色基本信息
        const request1 = http.get('/api/community/objs/Role/detail', { roleUuid: uuid }).then(); // 角色权限
        const request2 = http.get('/api/community/objs/Role/Account', { roleUuid: uuid }).then();
        requestArr.push(request1);
        requestArr.push(request2);
        Promise.all(requestArr)
          .then((res) => {
            if (res && res.length === 2) {
              data.value = res[0] && res[0]['data'] ? res[0]['data'] : {};
              personList.value = res[1] && res[1]['data']['data'] ? res[1]['data']['data'] : [];
              personList.value.forEach((ele) => {
                ele['personName'] = ele['accountRealName'];
                ele['personUuid'] = ele['accountCode'];
              });
              show.value = true;
            } else {
              show.value = true;
            }
          })
          .catch((error) => {
            show.value = true;
            // this.messageService.error('错误', '获得模块信息失败, 错误原因: ' + error, error);
          });
      }
      if (uuid) {
        load();
      }

      let formSchema = ref([]);
      watch(
        () => show.value,
        () => {
          if (show.value) {
            formSchema.value = setOriginalForm(personList.value);
          }
        },
        {
          immediate: true,
        },
      );
      return {
        data,
        formSchema,
        uuid,
        setOriginalForm,
      };
    },
  });
</script>
