import { addUserItem, updateUserItem, type UserRecord } from '@/api/list';
import { computed, defineComponent, type PropType, ref } from 'vue';
import {
  Form,
  type FormInstance,
  FormItem,
  Input,
  InputPassword,
  Message,
  Modal
} from '@arco-design/web-vue';
import { isNull } from '@/utils/is';
import {
  KamiApiSysUserV1ChannelTypeChannelNameEnum,
  type KamiApiSysUserV1UserAddReq
} from '@/api/generated';

const defaultProps = {
  item: {
    type: Object as PropType<UserRecord>,
    default: null
  },
  visible: {
    type: Boolean,
    default: false
  }
};

export default defineComponent({
  name: 'AddUpdateModal',
  props: defaultProps,
  emits: {
    'update:visible': (_visible: boolean) => true
  },
  setup(props, { emit }) {
    const generateFormData = (): KamiApiSysUserV1UserAddReq => {
      return {
        username: '',
        password: '',
        channelList: [
          {
            channelName: KamiApiSysUserV1ChannelTypeChannelNameEnum.Jd,
            num: 1
          }
        ]
      };
    };
    const formData = ref<KamiApiSysUserV1UserAddReq>(generateFormData());
    const formRef = ref<FormInstance>();
    const item = computed(() => props.item);
    const visible = computed(() => {
      if (props.visible) {
        formData.value.username = item.value?.username ?? '';
      } else {
        formData.value = generateFormData();
      }
      return props.visible;
    });
    const submitForm = () => {
      formRef.value.validate().then(async res => {
        if (res) return;
        if (!isNull(item.value) && item.value.id !== '') {
          await updateUserItem({ ...formData.value, id: item.value.id });
        } else {
          await addUserItem({ ...formData.value });
        }
        formData.value = generateFormData();
        Message.success('操作成功');
        emit('update:visible', false);
      });
    };
    return () => (
      <Modal
        title='添加或编辑用户'
        visible={visible.value}
        onOk={submitForm}
        width='40%'
        onCancel={() => {
          formData.value = generateFormData();
          emit('update:visible', false);
        }}
      >
        <Form
          model={formData}
          rules={{
            username: [{ required: true, message: '请输入正确账号' }],
            password: [{ required: true, message: '请输入密码' }]
          }}
          ref={formRef}
        >
          <FormItem
            label='用户名'
            field='username'
            disabled={item.value !== null}
            required
          >
            <Input placeholder='用户名' v-model={formData.value.username} />
          </FormItem>
          <FormItem label='密码' field='password' required>
            <InputPassword v-model={formData.value.password} />
          </FormItem>
          {/* <FormItem label='轮询(京东)' field='channelApple'>
            <InputNumber
              placeholder='苹果通道轮询ck个数'
              v-model={formData.value.channelList[0].num}
            />
          </FormItem> */}
        </Form>
      </Modal>
    );
  }
});
