<template>
  <div class="step2">
    <BasicForm @register="registerForm">
      <template #addAgree="{ model, field }">
        <Checkbox v-model:checked="model[field]" @change="checkedChange">
          {{ t('deviceManagement.device.addProtocolText') }}
        </Checkbox>
      </template>
      <template #clientId="{ model, field }">
        <div class="flex justify-center items-center">
          <Input
            v-model:value="model[field]"
            :placeholder="t('deviceManagement.device.clientIdPlaceholderText')"
          />
          <Tooltip :title="t('deviceManagement.device.refrestClientIdText')">
            <Icon
              class="ml-3 cursor-pointer !text-blue-600"
              icon="ant-design:reload-outlined"
              @click="handleGenerateClientId"
            />
          </Tooltip>
        </div>
      </template>
      <template #credentialsId="{ model, field }">
        <div class="flex justify-center items-center">
          <Input
            v-model:value="model[field]"
            :placeholder="t('deviceManagement.device.accessTokenPlaceholderText')"
          />
          <Tooltip :title="t('deviceManagement.device.refreshAccessTokenText')">
            <Icon
              class="ml-3 cursor-pointer !text-blue-600"
              icon="ant-design:reload-outlined"
              @click="handleGenerateCredentialsId"
            />
          </Tooltip>
        </div>
      </template>
    </BasicForm>
    <div>
      <a-button @click="prevStep">
        {{ t('common.lastStepText') }}
      </a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  import { Checkbox, Input, Tooltip } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step2Schemas } from '../../config/data';
  import { Icon } from '/@/components/Icon';
  import { buildUUID, randomString } from '/@/utils/uuid';
  import { useI18n } from '/@/hooks/web/useI18n';
  export default defineComponent({
    components: {
      BasicForm,
      Checkbox,
      Input,
      Icon,
      Tooltip,
    },

    emits: ['prev', 'next'],
    setup(_, { emit }) {
      const { t } = useI18n();
      const prevStep = () => {
        emit('prev');
      };
      const [
        registerForm,
        { getFieldsValue, updateSchema, validate, resetFields, setFieldsValue },
      ] = useForm({
        labelWidth: 130,
        schemas: step2Schemas,
        actionColOptions: {
          span: 14,
        },
        labelAlign: 'left',
        showSubmitButton: false,
        showResetButton: false,
        wrapperCol: {
          span: 12,
        },
      });
      const checkedChange = async (e) => {
        if (!e.target.checked) {
          await updateSchema([
            {
              field: 'credentialsId',
              ifShow: false,
            },
            {
              field: 'clientId',
              ifShow: false,
            },
            {
              field: 'username',
              ifShow: false,
            },
            {
              field: 'password',
              ifShow: false,
            },
            {
              field: 'publicKey',
              ifShow: false,
            },
          ]);
          setFieldsValue({
            credentialType: '',
          });
        }
      };
      function resetFieldsValueAndStatus() {
        resetFields();
        setFieldsValue({
          addAgree: false,
        });
        updateSchema([
          {
            field: 'publicKey',
            ifShow: false,
          },
          {
            field: 'credentialsId',
            ifShow: false,
          },
          {
            field: 'clientId',
            ifShow: false,
          },
          {
            field: 'username',
            ifShow: false,
          },
          {
            field: 'password',
            ifShow: false,
          },
        ]);
      }
      // 验证
      function validateStep2Method() {
        validate();
      }

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

      const handleGenerateCredentialsId = () => {
        setFieldsValue({ credentialsId: randomString() });
      };

      return {
        t,
        prevStep,
        registerForm,
        checkedChange,
        getFieldsValue,
        validate,
        resetFieldsValueAndStatus,
        validateStep2Method,
        handleGenerateClientId,
        handleGenerateCredentialsId,
      };
    },
  });
</script>
<style lang="less" scoped>
  .step2 {
    width: 700px;
    margin: 0 auto;
  }
</style>