import { apiClient } from '@/api';
import type { KamiApiCardInfoJdV1JDConfigGetRes } from '@/api/generated';
import {
  Button,
  Modal,
  Form,
  FormItem,
  Switch,
  type FormInstance,
  InputNumber
} from '@arco-design/web-vue';
import { defineComponent, onMounted, reactive, ref } from 'vue';

export default defineComponent({
  name: 'cardJdConfig',
  setup() {
    const state = reactive<{
      visible: boolean;
    }>({
      visible: false
    });
    const formData = ref<Required<KamiApiCardInfoJdV1JDConfigGetRes>>({
      isAllowDifferentAmount: true,
      isAllowDifferentSucceedCallback: true,
      isAllowDifferentFailCallback: true,
      redeemCardMinAmount: 0,
      isAllowCompensatedCallback: true,
      redeemCardRate: 100
    });
    const formRef = ref<FormInstance>();
    onMounted(() => {
      apiClient.apiCardInfoJDCardConfigGetGet().then(res => {
        formData.value =
          res.data as Required<KamiApiCardInfoJdV1JDConfigGetRes>;
      });
    });
    return () => (
      <>
        <Button
          type='primary'
          status='normal'
          onClick={() => {
            state.visible = !state.visible;
            apiClient.apiCardInfoJDCardConfigGetGet().then(res => {
              formData.value =
                res.data as Required<KamiApiCardInfoJdV1JDConfigGetRes>;
            });
          }}
        >
          设置
        </Button>
        <Modal
          title='充值设置'
          v-model:visible={state.visible}
          onBeforeOk={async (done: (closed: boolean) => void) => {
            if (await formRef.value.validate()) {
              done(false);
            }
            try {
              await apiClient.apiCardInfoJDCardConfigSetPost({
                kamiApiCardInfoJdV1JDConfigSetReq: formData.value
              });
              done(true);
            } catch {
              done(false);
            }
          }}
        >
          <Form
            ref={formRef}
            model={formData}
            labelColProps={{ span: 12 }}
            wrapperColProps={{ span: 12 }}
          >
            <FormItem field='redeemCardMinAmount' label='最小充值金额' required>
              <InputNumber v-model={formData.value.redeemCardMinAmount} />
            </FormItem>
            <FormItem
              field='isAllowDifferentAmount'
              label='是否兑换(金额异议)'
              required
            >
              <Switch v-model={formData.value.isAllowDifferentAmount} />
            </FormItem>
            <FormItem
              field='isAllowDifferentSucceedCallback'
              label='成功是否回调(金额异议)'
              required
            >
              <Switch
                v-model={formData.value.isAllowDifferentSucceedCallback}
              />
            </FormItem>
            <FormItem
              field='isAllowDifferentFailCallback'
              label='失败是否回调(金额异议)'
              required
            >
              <Switch v-model={formData.value.isAllowDifferentFailCallback} />
            </FormItem>
            <FormItem
              field='isAllowCompensatedCallback'
              label='补卡自动回调'
              required
            >
              <Switch v-model={formData.value.isAllowCompensatedCallback} />
            </FormItem>
            <FormItem field='redeemCardRate' label='充值速率(单/分钟)' required>
              <InputNumber v-model={formData.value.redeemCardRate} />
            </FormItem>
          </Form>
        </Modal>
      </>
    );
  }
});
