<template>
  <BasicModal
    @register="registerModal"
    v-bind="$attrs"
    :title="t('deviceManagement.device.manageDeviceCredentials')"
    @cancel="handleCancel"
    @ok="handleOk"
    centered
    :canFullscreen="false"
  >
    <BasicForm @register="registerForm">
      <template #clientId="{ field, model }">
        <div class="flex items-center">
          <Input
            v-model:value="model[field]"
            :placeholder="t('deviceManagement.device.clientIdPlaceholderText')"
          />
          <Tooltip :title="t('deviceManagement.device.refrestClientIdText')">
            <ReloadOutlined class="ml-3 !text-blue-600" @click="handleCreateUUID" />
          </Tooltip>
        </div>
      </template>
      <template #credentialsId="{ field, model }">
        <div class="flex items-center">
          <Input
            v-model:value="model[field]"
            :placeholder="t('deviceManagement.device.accessTokenPlaceholderText')"
          />
          <Tooltip :title="t('deviceManagement.device.refreshAccessTokenText')">
            <ReloadOutlined class="ml-3 !text-blue-600" @click="handleCreateCredentialsId" />
          </Tooltip>
        </div>
      </template>
    </BasicForm>
  </BasicModal>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { useModalInner, BasicModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { TokenSchemas, credentialTypeEnum } from '../../config/data';
  import { saveDeviceToken } from '/@/api/device/deviceManager';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Input, Tooltip } from 'ant-design-vue';
  import { buildUUID, randomString } from '/@/utils/uuid';
  import { ReloadOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { specialCharactersRegex } from '/@/utils/rules';
  export default defineComponent({
    components: {
      BasicModal,
      BasicForm,
      Input,
      ReloadOutlined,
      Tooltip,
    },
    emits: ['register'],
    setup() {
      const { t } = useI18n();
      const [
        registerForm,
        { getFieldsValue, updateSchema, validate, resetFields, setFieldsValue },
      ] = useForm({
        labelWidth: 100,
        schemas: TokenSchemas,
        labelAlign: 'right',
        showSubmitButton: false,
        showResetButton: false,
        wrapperCol: {
          span: 16,
        },
      });
      const [registerModal, { closeModal }] = useModalInner(async (data) => {
        if (data.credentialsType === credentialTypeEnum.ACCESS_TOKEN) {
          updateSchema([
            {
              field: 'credentialType',
              ifShow: true,
            },
            {
              field: 'credentialsId',
              ifShow: true,
            },
          ]);
          setFieldsValue({
            credentialType: data.credentialsType,
            credentialsId: data.credentialsId,
            id: data.id.id,
            tbDeviceId: data.deviceId.id,
          });
        } else if (data.credentialsType === credentialTypeEnum.X_509) {
          updateSchema([
            {
              field: 'credentialType',
              ifShow: true,
            },
            {
              field: 'publicKey',
              ifShow: true,
            },
          ]);
          setFieldsValue({
            credentialType: data.credentialsType,
            publicKey: data.credentialsValue,
            id: data.id.id,
            tbDeviceId: data.deviceId.id,
          });
        } else {
          updateSchema([
            {
              field: 'credentialType',
              ifShow: true,
            },
            {
              field: 'clientId',
              ifShow: true,
            },
            {
              field: 'username',
              ifShow: true,
            },
            {
              field: 'password',
              ifShow: true,
            },
          ]);
          const credentialsValue = JSON.parse(data.credentialsValue);
          setFieldsValue({
            credentialType: data.credentialsType,
            clientId: credentialsValue?.clientId,
            username: credentialsValue?.userName,
            password: credentialsValue?.password,
            id: data.id.id,
            tbDeviceId: data.deviceId.id,
          });
        }
      });
      const checkedChange = (e) => {
        if (!e.target.checked) {
          updateSchema([
            {
              field: 'credentialsId',
              ifShow: false,
            },
            {
              field: 'clientId',
              ifShow: false,
            },
            {
              field: 'username',
              ifShow: false,
            },
            {
              field: 'password',
              ifShow: false,
            },
            {
              field: 'publicKey',
              ifShow: false,
            },
            {
              field: 'credentialType',
              ifShow: false,
            },
          ]);
          setFieldsValue({
            credentialType: '',
          });
        } else {
          updateSchema([
            {
              field: 'credentialType',
              ifShow: true,
            },
          ]);
        }
      };
      const handleCancel = () => {
        resetFields();

        updateSchema([
          {
            field: 'publicKey',
            ifShow: false,
          },
          {
            field: 'credentialsId',
            ifShow: false,
          },
          {
            field: 'clientId',
            ifShow: false,
          },
          {
            field: 'username',
            ifShow: false,
          },
          {
            field: 'password',
            ifShow: false,
          },
        ]);
      };
      const handleOk = async () => {
        const { createMessage } = useMessage();
        // 验证
        const valid = await validate();
        if (!valid) return;
        // 收集表单数据
        const field = getFieldsValue();
        const editData = {
          id: {
            id: field.id,
          },
          deviceId: {
            id: field.tbDeviceId,
            entityType: 'DEVICE',
          },
          credentialsType: field.credentialType,
          credentialsId: field.credentialsId,
          credentialsValue:
            field.credentialType === credentialTypeEnum.MQTT_BASIC
              ? JSON.stringify({
                  userName: field.username,
                  password: field.password,
                  clientId: field.clientId,
                })
              : field.credentialType === credentialTypeEnum.X_509
              ? field.publicKey
              : null,
        };
        // tcp的访问令牌不能输入特殊字符
        const tcpLimitInputSpecialCharacters = specialCharactersRegex.test(editData?.credentialsId);
        if (tcpLimitInputSpecialCharacters)
          return createMessage.warning(t('common.specialCharactersError'));
        //
        saveDeviceToken(editData)
          .then((res) => {
            if (!res) return;
            createMessage.success(t('common.modifiedDeviceCredentials'));
            // 请求
            closeModal();
            handleCancel();
          })
          .catch(() => {});
      };

      const handleCreateUUID = () => {
        setFieldsValue({ clientId: buildUUID() });
      };

      const handleCreateCredentialsId = () => {
        setFieldsValue({ credentialsId: randomString() });
      };
      return {
        t,
        registerModal,
        registerForm,
        checkedChange,
        handleCancel,
        handleOk,
        handleCreateUUID,
        handleCreateCredentialsId,
      };
    },
  });
</script>