<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="bg-white rounded overflow-hidden" style="width: 690rpx;">
      <view class="flex items-center justify-between px-15 py-12 border-b">
        <view class="text-lg font-semibold text-dark">校验姓名</view>
        <uni-icons type="closeempty" :size="24" color="#999" @click="close"></uni-icons>
      </view>
      <view class="px-15 pt-15 text-base text-dark">
        请输入所选档案的姓名进行验证
      </view>
      <view class="px-15 py-12">
        <input v-model="inputName" class="input-name" :placeholder="placeholder" placeholder-class="placeholder-class"
          maxlength="20" />
      </view>
      <view class="pb-15">
        <button-footer hideden-shadow confirmText="确定" @cancel="close" @confirm="confirm()" />
      </view>
    </view>
  </uni-popup>
</template>

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

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

const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  customer: {
    type: Object,
    default: () => ({})
  }
})

const popup = ref()
const inputName = ref('')
const placeholder = computed(() => '请输入姓名' + (props.customer.maskName ? `(${props.customer.maskName})` : ''))

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

function confirm() {
  const trimmedName = inputName.value.trim()
  if (!trimmedName) {
    toast('请输入姓名')
    return
  }
  if (trimmedName && trimmedName === props.customer.name) {
    emits('confirm')
    close()
  } else {
    toast('姓名不一致，请重新输入')
  }
}

watch(() => props.visible, n => {
  if (n) {
    inputName.value = ''
    popup.value && popup.value.open()
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.input-name {
  width: 100%;
  height: 88rpx;
  padding: 0 20rpx;
  border: 1px solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.placeholder-class {
  color: #999;
}

.btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.btn-cancel {
  margin-right: 20rpx;
  color: #666;
  background-color: #f5f5f5;
}

.btn-confirm {
  color: #fff;
  background-color: #1890ff;
}
</style>
