import { View, Text, Input, Textarea} from "@tarojs/components"
import style from './index.module.less'
import IconPlusBlue from "@/components/icon/icon-plus-blue"
import { useAgentStore, useAgentStoreActions } from "@/store/agentStore";
import Taro from "@tarojs/taro";
// import ContactIcon from '@/components/ContactIcon'
export default () => {
  const agentEdit = useAgentStore((state)=> state.agentEdit);
  const { updateEditAgent } = useAgentStoreActions();

  // 处理表单字段更新
  const handleFieldChange = (field: string, value: string) => {
    // 如果是手机号字段，只允许数字且限制11位
    if (field === 'mobile') {
      value = value.replace(/\D/g, '').slice(0, 11);
    }
    console.log(field, value)
    updateEditAgent({ [field]: value });
  };

  const handleEdit = ()=> {
    Taro.navigateTo({
      url: `/pages/editor-contact/index?agentId=${agentEdit?.agentId}`,
    })
  }

  return(
    <View className={style.card}>
      <View className={style.list}>
        <View className={style.listItem}>
          <View className={style.label}>姓名 <Text className="text-red leading-22 text-14">*</Text> </View>
          <View className={style.value}>
            <Input
              className="py-16"
              value={agentEdit?.name || ''}
              onBlur={(e: any) => handleFieldChange('name', e.detail.value)}
              onInput={(e: any) => handleFieldChange('name', e.detail.value)}
              placeholderStyle="color: rgba(17,17,17,.25)"
              placeholder="输入姓名"
              maxlength={40}
            />
          </View>
        </View>
        <View className={style.listItem}>
          <View className={style.label}>企业</View>
          <View className={style.value}>
            <Input
              className="py-16"
              value={agentEdit?.entName || ''}
              onBlur={(e: any) => handleFieldChange('entName', e.detail.value)}
              onInput={(e: any) => handleFieldChange('entName', e.detail.value)}
              placeholderStyle="color: rgba(17,17,17,.25)"
              placeholder="输入企业名称"
            />
          </View>
        </View>
        <View className={style.listItem}>
          <View className={style.label}>手机</View>
          <View className={style.value}>
            <Input
              className="py-16"
              type="number"
              value={agentEdit?.mobile || ''}
              onBlur={(e: any) => handleFieldChange('mobile', e.detail.value)}
              onInput={(e: any) => handleFieldChange('mobile', e.detail.value)}
              placeholderStyle="color: rgba(17,17,17,.25)"
              placeholder="输入手机号"
              maxlength={11}
            />
          </View>
        </View>
        <View className={style.listItem}>
          <View className="flex flex-center gap-8 pt-16 w-full" onClick={handleEdit}>
            <IconPlusBlue/>
            <View className="font-pingfangSCMedium text-14 leading-22 text-primary">更多名片信息</View>
          </View>

        </View>
      </View>
    </View>
  )
}
