<template>
  <JPopup ref="popup">
    <JMainCard pd="0" wrapPd="30rpx">
      <JInput
        name="联系人姓名"
        :rules="{ name: 'name', rule: 'REG_NotNUll' }"
        v-model:value="userInfo.name"
        place="请输入联系人姓名"
        :isBorder="true"
        @focusShow="flag = true"
        @focusNone="flag = false"
      ></JInput>
      <JInput
        name="联系人电话"
        :rules="{ name: 'phone', rule: 'REG_NotNUll' }"
        type="number"
        v-model:value="userInfo.phone"
        place="请输入联系人电话"
        @focusShow="flagT = true"
        @focusNone="flagT = false"
      ></JInput>
      <view class="confirm bgF2" @tap="toUSer">确认</view>
    </JMainCard>
    <JButton pd="0 30rpx 30rpx 30rpx" bgColor="#f2f2f2" color="#000" bottom="0" pdTop="0" @HandleTouch="popup.close()"
      >取消</JButton
    >
    <view class="height-block" v-if="flagT || flag"></view>
  </JPopup>
</template>

<script setup>
import { reactive, ref } from "vue"
import JPopup from "@/components/newComponents/JPopup/JPopup"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
import JInput from "@/components//newComponents/JInput/JInput"
import JButton from "@/components//newComponents/JButton/JButton"
import { validateArray } from "@/hooks/rules"
const emits = defineEmits(["userContact"])
const popup = ref()
const userInfo = reactive({})
const open = (val) => {
  if (val) {
    userInfo.name = val.contactName
    userInfo.phone = val.contactTel
  }
  popup.value.open()
}
const flag = ref(false)
const flagT = ref(false)
const toUSer = () => {
  if (validateArray(userInfo)) {
    emits("userContact", userInfo)
    uni.setStorageSync("contactInfo", userInfo)
    popup.value.close()
  }
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.confirm {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110rpx;
  text-align: center;
  color: $primaryColor;
  font-size: 33rpx;
}
.height-block {
  height: 25vh;
}
</style>
