<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="bg-white rounded overflow-hidden" style="width: 690rpx;">
      <view class="px-15 py-12 text-center text-lg font-semibold text-dark">
        修改患者邀请码名称
      </view>
      <view class="mt-10 px-15">
        <view class="p-10 border rounded-sm">
          <input v-model="name" class="w-full" placeholder="请输入名称" />
        </view>
      </view>
      <button-footer :showShadow="false" confirmText="保存" @confirm="confirm()" @cancel="close()" />
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
import { toast } from '@/utils/widget';

import ButtonFooter from '@/components/button-footer.vue';

const emits = defineEmits(['close', 'change'])
const props = defineProps({
  team: {
    type: Object,
    default: () => ({})
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const popup = ref();
const name = ref('');

function close() {
  emits('close')
}

async function confirm() {
  if (name.value.trim() === '') {
    return toast('请输入名称')
  }
  emits('change', name.value.trim())
}

watch(() => props.visible, n => {
  if (n) {
    name.value = props.team && typeof props.team.name === 'string' ? props.team.name.trim() : '';
    popup.value && popup.value.open()
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.pb-50 {
  padding-bottom: 100rpx;
}
</style>