<template>
  <div class="step2">
    <div
      ><input type="checkbox" v-model="creaentialsPassword.isCreaentials" @click="checked" />
      添加凭证
    </div>

    <a-form
      ref="formRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      v-if="creaentialsPassword.isCreaentials"
      :model="creaentialsPassword"
    >
      <a-form-item label="凭据类型" name="creantialsType">
        <a-select
          v-model:value="creaentialsPassword.creaentialsType"
          style="width: 200px"
          @change="handleChange"
          placeholder="请选择凭据类型"
          :options="options"
        />
      </a-form-item>
      <div v-if="creaentialsPassword.creaentialsType === 'Access token'">
        <a-form-item label="访问令牌" name="token">
          <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.token" />
        </a-form-item>
      </div>
      <div v-else-if="creaentialsPassword.creaentialsType === 'X.509'">
        <a-form-item label="RSA公钥" name="publicKey">
          <a-input
            type="input"
            style="width: 200px"
            v-model:value="creaentialsPassword.publicKey"
          />
        </a-form-item>
      </div>
      <div v-else>
        <a-form-item label="客户端ID" name="clientId">
          <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.clientId" />
        </a-form-item>
        <a-form-item label="用户名" name="username">
          <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.username" />
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input
            type="password"
            style="width: 200px"
            v-model:value="creaentialsPassword.password"
          />
        </a-form-item>
      </div>
    </a-form>

    <div class="flex justify-start">
      <a-button class="mr-5" @click="prevStep">上一步</a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, watch } from 'vue';

  import { Input, Form, Select, Button } from 'ant-design-vue';
  export default defineComponent({
    components: {
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Select.name]: Select,
      [Button.name]: Button,
    },
    emits: ['prev', 'next'],
    setup(_, { emit }) {
      const formRef = ref();
      const creaentialsPassword = reactive({
        isCreaentials: false,
        creaentialsType: 'Access token',
        token: '',
        publicKey: '',
        clientId: '',
        username: '',
        password: '',
      });
      const options = ref([
        {
          value: 'Access token',
          label: 'Access token',
        },

        {
          value: 'X.509',
          label: 'X.509',
        },
        {
          value: 'MQTT Basic',
          label: 'MQTT Basic',
        },
      ]);
      const checked = () => {
        creaentialsPassword.isCreaentials = !creaentialsPassword.isCreaentials;
      };
      const prevStep = () => {
        emit('prev');
      };
      watch(creaentialsPassword, (newValue) => {
        emit('next', newValue);
      });

      // 切换凭证类型时，重置字段
      const handleChange = (value) => {
        if (value === 'Access token') {
          creaentialsPassword.token = '';
        } else if (value === 'X.509') {
          creaentialsPassword.publicKey = '';
        } else {
          creaentialsPassword.clientId = '';
          creaentialsPassword.username = '';
          creaentialsPassword.password = '';
        }
      };

      // 重置所有字段
      function resetFields() {
        console.log(formRef);
        formRef.value.resetFields();
        console.log('----');
      }
      return {
        options,
        formRef,
        creaentialsPassword,
        handleChange,
        prevStep,
        checked,
        labelCol: { style: { width: '150px' } },
        wrapperCol: { span: 18 },
        resetFields,
      };
    },
  });
</script>
<style lang="less" scoped>
  .step2 {
    width: 500px;
    margin: 0 auto;
  }
</style>