<template>
  <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }">
    <div class="modal-body">
      <div class="row">
        <!-- Id ẩn -->
        <Field name="Id" type="hidden" :value="form.Id" />

        <!-- Bank Code -->
        <div class="col-md-12 mb-3">
          <label class="form-label">
            Mã ngân hàng <span class="text-danger">*</span>
          </label>
          <Field name="BankCode" type="text" class="form-control" :class="{ 'is-invalid': errors.BankCode }"
            v-model="form.BankCode" placeholder="Nhập mã ngân hàng" maxlength="200" />
          <div class="invalid-feedback">
            {{ errors.BankCode }}
          </div>
        </div>

        <!-- Tên đầy đủ -->
        <div class="col-md-12 mb-3">
          <label class="form-label">
            Tên đầy đủ <span class="text-danger">*</span>
          </label>
          <Field name="FullName" type="text" class="form-control" :class="{ 'is-invalid': errors.FullName }"
            v-model="form.FullName" placeholder="Nhập tên đầy đủ của ngân hàng" maxlength="200" />
          <div class="invalid-feedback">
            {{ errors.FullName }}
          </div>
        </div>

        <!-- Tên thương hiệu -->
        <div class="col-md-6 mb-3">
          <label class="form-label">
            Tên thương hiệu <span class="text-danger">*</span>
          </label>
          <Field name="BrandName" type="text" class="form-control" :class="{ 'is-invalid': errors.BrandName }"
            v-model="form.BrandName" placeholder="Nhập tên thương hiệu" maxlength="50" />
          <div class="invalid-feedback">
            {{ errors.BrandName }}
          </div>
        </div>

        <!-- Thứ tự -->
        <div class="col-md-6 mb-3">
          <label class="form-label">Thứ tự</label>
          <Field name="DisplayOrder" type="number" class="form-control" :class="{ 'is-invalid': errors.DisplayOrder }"
            v-model="form.DisplayOrder" placeholder="Nhập thứ tự" />
        </div>
      </div>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" @click="close">
        Hủy
      </button>
      <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
        <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
        {{ isEdit ? 'Cập nhật' : 'Thêm mới' }}
      </button>
    </div>
  </Form>
</template>

<script>
import bankService from '@/services/bankService';
import { useToast } from "vue-toastification";
import { Form, Field } from 'vee-validate';
import * as Yup from 'yup';

export default {
  name: 'CreateOrUpdateBank',
  components: { Form, Field },
  setup() {
    const toast = useToast();
    return { toast };
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  emits: ['cancel', 'saved'],
  data() {
    return {
      form: {
        Id: 0,
        BankCode: '',
        FullName: '',
        BrandName: '',
        DisplayOrder: 0
      },
      schema: Yup.object().shape({
        Id: Yup.number().nullable(),
        BankCode: Yup.string()
          .required('Mã ngân hàng là bắt buộc')
          .min(2, 'Mã ngân hàng từ 2-16 ký tự')
          .max(16, 'Mã ngân hàng từ 2-16 ký tự'),
        FullName: Yup.string()
          .required('Tên đầy đủ là bắt buộc')
          .min(5, 'Tên đầy đủ từ 5-200 ký tự')
          .max(200, 'Tên đầy đủ từ 5-200 ký tự'),
        BrandName: Yup.string()
          .required('Tên thương hiệu là bắt buộc')
          .min(2, 'Tên thương hiệu từ 2-50 ký tự')
          .max(50, 'Tên thương hiệu từ 2-50 ký tự'),
        DisplayOrder: Yup.number().nullable(),
      })
    };
  },
  computed: {
    isEdit() {
      return this.id && this.id > 0;
    }
  },
  mounted() {
    if (this.isEdit) {
      this.loadBankData();
    }
  },
  methods: {
    async loadBankData() {
      try {
        const result = await bankService.getById(this.id);
        if (result) {
          this.form = {
            Id: result.Id || 0,
            BankCode: result.BankCode || '',
            FullName: result.FullName || '',
            BrandName: result.BrandName || '',
            DisplayOrder: result.DisplayOrder || 0
          };
        }
      } catch (error) {
        console.error('Error loading bank data:', error);
        this.toast.error('Có lỗi xảy ra khi tải thông tin ngân hàng');
      }
    },

    async onSubmit() {
      try {
        const preparedData = {
          Id: this.form.Id || 0,
          BankCode: (this.form.BankCode || '').trim(),
          FullName: (this.form.FullName || '').trim(),
          BrandName: (this.form.BrandName || '').trim(),
          DisplayOrder: this.form.DisplayOrder || 0
        };
        let result;
        if (this.isEdit) {
          result = await bankService.update(preparedData);
        } else {
          result = await bankService.create(preparedData);
        }

        if (result && result.Result === 1) {
          this.toast.success(
            this.isEdit ? 'Cập nhật ngân hàng thành công' : 'Thêm mới ngân hàng thành công'
          );
          this.$emit('cancel');
        } else {
          if (result && result.Errors && result.Errors.length > 0) {
            // Hiển thị lỗi chung nếu backend trả về chi tiết lỗi
            this.toast.error(result.Errors.map(e => e.Message).join('\n'));
          } else {
            this.toast.error((result && result.Message) || 'Có lỗi xảy ra khi lưu ngân hàng');
          }
        }
      } catch (error) {
        console.error('Error saving bank:', error);
        this.toast.error('Có lỗi xảy ra khi lưu ngân hàng');
      }
    },

    close() {
      this.$emit('cancel');
    }
  }
};
</script>

<style scoped>
.form-check-input:checked {
  background-color: #198754;
  border-color: #198754;
}

.invalid-feedback {
  display: block;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
