<template>
  <a-modal
    :visible="props.visible"
    title="商户详情"
    width="80%"
    :footer="false"
    body-style="background:var(--color-neutral-1)"
    @cancel="handleCancel"
  >
    <a-space direction="vertical" size="medium" fill>
      <merchant-info ref="merchantInfoRef" />
      <payway-list ref="paywayListRef" :uid="props.uid" />
    </a-space>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import merchantInfo from './deploy/merchant-info.vue';
import paywayList from './payway-list.vue';

const merchantInfoRef = ref<InstanceType<typeof merchantInfo> | null>(null);
const paywayListRef = ref<InstanceType<typeof paywayList> | null>(null);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  uid: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:visible']);
const handleCancel = () => {
  emit('update:visible', false);
};

onMounted(() => {
  watch(
    () => props.visible,
    (val: boolean) => {
      if (val && props.uid !== '') {
        merchantInfoRef.value?.fetchData(props.uid);
        paywayListRef.value?.fetchData(props.uid);
      }
    }
  );
});
</script>
