<!-- eslint-disable vue/no-mutating-props -->
<script setup lang="ts">
import type { MjFormPhoneRenderOpts } from '.'
import type { RenderParams } from '../mj-form-plugin'

defineOptions({ name: 'MjFormPhonePlugin' })

const props = withDefaults(
  defineProps<{
    renderOpts: MjFormPhoneRenderOpts
    // 表格、表单相关的一些数据
    renderParams: RenderParams
  }>(),
  {},
)

const text = computed({
  get() {
    return props.renderParams.data[props.renderParams.field]
  },
  set(val) {
    props.renderParams.data[props.renderParams.field] = val
  },
})

const placeholder = computed(() => {
  const v = props.renderOpts.props?.placeholder
  if (v === undefined) {
    return `请输入${props.renderParams.item.title}`
  }
  return v
})
</script>

<template>
  <mj-form-phone
    v-model="text"
    :placeholder="placeholder"
    v-bind="renderOpts.props"
  />
</template>

<style lang="scss" scoped>
.mj-form-phone-box {
  position: relative;

  .mj-form-phone {
    display: flex;
    align-items: center;
    color: #000;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
  }
}
</style>
