<script setup lang="ts">
  import { Form, FormItem, Input, InputNumber, Select, Alert, SelectOptionData } from '@arco-design/web-vue';
  import ProjectSection from '@/components/project-select/index.vue';
  import { computed, onMounted, ref, watch } from 'vue';
  import useUserApi from '@/http/user';
  import useTagApi from '@/http/star-tag';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { User } from '@/utils/model';
  import useRoleApi from '@/http/role';
  import { SystemRole } from '@/types/system-role';
  import useConfigApi from '@/http/config';
  import { Option } from '@/types/global';

  const { scopeOption } = useUserApi;

  type FormValueProp = {
    nick_name: string;
    real_name: string;
    email: string;
    lang: string;
    area_code: string;
    phone: string;
    scope: number;
    demo_type: number;
    user_tag_id: number;
    authIds?: number[];
    roleIds?: number[];
    projectIds?: number[];
    business_singer_limit: number;
  };

  const props = defineProps<{ row: User; authTagOptions: SelectOptionData[]; onRequest: (data: FormValueProp) => Promise<User> }>();

  const formRef = ref<FormInstance>();

  const formValue = ref<FormValueProp>({
    nick_name: props.row.nick_name,
    real_name: props.row.real_name,
    email: props.row.email,
    area_code: props.row.area_code || '86',
    phone: props.row.phone,
    scope: props.row.scope,
    demo_type: props.row.demo_type,
    user_tag_id: props.row.user_tag_id,
    lang: props.row.lang,
    business_singer_limit: props.row.business_singer_limit || 0,
    authIds: props.row.auth_tags?.map((item) => item.id) || [],
    roleIds: props.row.roles?.map((item) => item.id) || [],
    projectIds: props.row.projects?.map((item) => item.id) || [],
  });

  const formRules = computed(() => {
    return {
      nick_name: [{ required: true, message: '请输入用户艺名' }],
      real_name: [{ required: true, message: '请输入用户真名' }],
      phone: [
        { required: true, message: '请输入用户手机号码' },
        { validator: (value: any, cb: (error?: string) => void) => !formValue.value.area_code && cb('请输入用户手机国际区号') },
      ],
      email: [{ required: true, message: '请输入用户邮箱' }],
      scope: [{ required: true, message: '请选择权限' }],
      demo_type: [{ required: true, message: '请选择个人Demo权限' }],
      user_tag_id: [{ required: true, message: '请选择标签' }],
      business_singer_limit: [{ required: true, message: '请输入团队歌手数' }],
      projectIds: [{ required: formValue.value.scope === 2, message: '请选择管理厂牌' }],
      roleIds: [{ required: formValue.value.scope === 1, message: '请选择角色' }],
    };
  });

  const roleOption = ref<SystemRole[]>([]);
  const langOption = ref<Option[]>([]);
  const demoScopeOption = ref<Option[]>([
    { label: '跟随认证标签权限', value: 1, disabled: false },
    { label: '关闭', value: 0, disabled: false },
  ]);

  const userTagOption = ref<Option[]>([]);

  const allAuthDemoTags = ref<string[]>([]);

  const activityRecommendOption = ref<Option[]>([]);

  const onScopeChange = () => {
    formValue.value.roleIds = [];
    formValue.value.projectIds = [];
  };

  const onSubmit = async (): Promise<User> => {
    if (await formRef.value?.validate()) {
      return Promise.reject();
    }
    return props.onRequest(formValue.value);
  };

  const setDemoScopeOptionStatus = (setType?: boolean) => {
    let has = false;
    if (formValue.value) {
      const { authIds } = formValue.value;
      if (authIds) {
        authIds.forEach((item) => {
          allAuthDemoTags.value.forEach((allItem) => {
            if (item === Number(allItem)) {
              has = true;
            }
          });
        });
      }
    }
    if (has) {
      demoScopeOption.value[1].disabled = false;
    } else {
      if (![2, 3].includes(props.row.identity)) {
        demoScopeOption.value[1].disabled = true;
      }

      if (setType) {
        formValue.value.demo_type = 1;
      }
    }
  };

  const onAuthTagOptionsChange = () => {
    setDemoScopeOptionStatus(true);
  };

  watch(allAuthDemoTags, () => {
    setDemoScopeOptionStatus();
  });

  watch(
    formValue.value,
    () => {
      setDemoScopeOptionStatus();
    },
    {
      immediate: true,
    }
  );

  defineExpose({ onSubmit });

  onMounted(() => {
    useRoleApi.get({ guard: 'Admin', fetchType: 'all' }).then(({ data }) => {
      roleOption.value = data;
    });

    useConfigApi
      .getOption({ parentKey: '01HMFTN51ZEVCGSSKRF6C9EC3Y', setColumn: ['identifier', 'name'], setSort: ['-weight'] })
      .then((data) => {
        activityRecommendOption.value = data;
      });

    useConfigApi.getOption({ parentKey: 'activity_lang', setColumn: ['identifier', 'name'], setSort: ['-weight'] }).then((data) => {
      langOption.value = data;
    });

    useConfigApi.getOne({ identifier: 'CtGly-jsLjAu5yJvLrN7L' }).then((data: any) => {
      allAuthDemoTags.value = data.content.split(',');
    });

    useTagApi
      .get({
        sortBy: 'id',
        sortType: 'desc',
        page: 1,
        pageSize: 9999,
      })
      .then((res) => {
        const arr = [
          {
            label: '无',
            value: 0,
            disabled: false,
          },
        ];
        const { data } = res;

        data.forEach((item) => {
          arr.push({
            label: item.name,
            value: item.id,
            disabled: item.status !== 1,
          });
        });
        userTagOption.value = arr;
      });
  });
</script>

<template>
  <Form ref="formRef" :model="formValue" :rules="formRules" auto-label-width>
    <FormItem label="用户艺名" field="nick_name" show-colon>
      <Input v-model="formValue.nick_name" :max-length="99" show-word-limit />
    </FormItem>
    <FormItem label="用户真名" field="real_name" show-colon>
      <Input v-model="formValue.real_name" :max-length="99" show-word-limit />
    </FormItem>
    <FormItem label="邮箱" field="email" show-colon>
      <Input v-model="formValue.email" :max-length="99" show-word-limit />
    </FormItem>
    <FormItem label="手机号" field="phone" show-colon>
      <Input v-model="formValue.area_code" style="width: 20%" :max-length="6" @blur="() => formRef?.validateField('phone')" />
      <div style="width: 5%; text-align: center">-</div>
      <Input v-model="formValue.phone" :max-length="16" show-word-limit @blur="() => formRef?.validateField('phone')" />
    </FormItem>
    <FormItem label="语种" field="lang" show-colon>
      <Select v-model="formValue.lang" :options="langOption" :fallback-option="false" placeholder="请选择" />
    </FormItem>
    <FormItem label="音乐认证" field="authIds" show-colon>
      <Select
        v-model="formValue.authIds"
        placeholder="请选择"
        :options="authTagOptions"
        multiple
        allow-clear
        allow-search
        @change="onAuthTagOptionsChange"
      />
    </FormItem>
    <FormItem label="团队歌手" field="business_singer_limit" show-colon>
      <InputNumber v-model="formValue.business_singer_limit" :min="2" :max="1000" />
    </FormItem>
    <FormItem label="权限" field="scope" show-colon>
      <Select v-model="formValue.scope" placeholder="请选择" :options="scopeOption" :fallback-option="false" @change="onScopeChange" />
    </FormItem>
    <FormItem label="个人Demo权限" field="demo_type" show-colon>
      <!-- <span v-if="[2, 3].includes(user.identity)"> 经纪人</span> -->
      <Select v-model="formValue.demo_type" placeholder="请选择" :options="demoScopeOption" :fallback-option="false" />
    </FormItem>
    <FormItem label="明星标签" field="user_tag_id" show-colon>
      <Select v-model="formValue.user_tag_id" placeholder="请选择" :options="userTagOption" :fallback-option="false" />
    </FormItem>
    <FormItem v-show="formValue.scope === 2" label="管理厂牌" field="projectIds" show-colon>
      <ProjectSection v-model="formValue.projectIds" :multiple="true" :max-tag-count="5" placeholder="请选择" allow-search />
    </FormItem>
    <FormItem v-show="formValue.scope === 1" field="roleIds" label="角色" show-colon row-class="mb-0">
      <Select
        v-model="formValue.roleIds"
        placeholder="请选择"
        :field-names="{ value: 'id', label: 'name' }"
        :options="roleOption"
        :multiple="true"
        :fallback-option="false"
        :allow-search="true"
      />
    </FormItem>
    <Alert v-show="formValue.scope !== 0 && formValue.scope !== row.scope" type="warning">
      权限变更将初始化用户登录密码，初始值为该用户手机号
    </Alert>
  </Form>
</template>

<style scoped lang="less"></style>