import NavBarNormal from "@/components/NavBarNormal/index";
import { View, Input, Text } from "@tarojs/components";
import PageCustom from "@/components/page-custom/index";
import WemetaInput from '@/components/wemeta-input/index'
import Taro, { useRouter } from "@tarojs/taro";
import { useAgentStore, useAgentStoreActions } from "@/store/agentStore";
import { TAgentDetail } from "@/types/agent";
import { useState } from "react";
import BottomBar from "@/components/BottomBar";
import WemetaButton from "@/components/buttons/WemetaButton";
import style from './index.module.less'


// const RenderEntCard = (
//   agent: TAgentDetail | null,
//   navToUrl: (url: string) => void
// ) => {

//   if (!agent?.isEnt) {
//     return <View className="px-16 w-full pt-12">
//       <ListWrapper>
//         <Vie//           arrow
//           onClick={() => { navToUrl('/pages/editor-pages/editor-ent-name/index') }}
//         >
//           <View className="flex items-center font-normal">
//             <View className="flex-1 font-normal">企业</View>
//             <View className="text-gray-5 truncate max-w-[188px]">
//               {agent?.entName}
//             </View>
//           </View>
//         </View>
//         <View
//           arrow
//           onClick={() => { navToUrl('/pages/editor-pages/editor-position/index') }}
//         >
//           <View className="flex items-center font-normal">
//             <View className="flex-1 font-normal">职位</View>
//             <View className="text-gray-5 mr-8">{agent?.position}</View>
//           </View>
//         </View>
//       </ListWrapper>
//     </View>;
//   }

//   return (
//     <View className="px-16 w-full pt-12">
//       <ListWrapper>
//         <Vie//         >
//           <View className="flex items-center font-normal">
//             <View className="flex-1 font-normal">企业</View>
//             <View className="text-gray-5 truncate max-w-[188px]">
//               {agent?.entName}
//             </View>
//           </View>
//         </View>//           <View className="flex items-center font-normal">
//             <View className="flex-1 font-normal">企业认证</View>
//             <TagCertificated />
//           </View>
//         </View>
//         <View
//           arrow
//           onClick={() => { navToUrl('/pages/editor-pages/editor-position/index') }}
//         >
//           <View className="flex items-center font-normal">
//             <View className="flex-1 font-normal">职位</View>
//             <View className="text-gray-5 mr-8">{agent?.position}</View>
//           </View>
//           {/* <PickerSingleColumn headerTitle="您的岗位" options={options} selected={selected} onPicked={handlePicked} showPicker={showPicker} setShowPicker={setShowPicker}>
//               <View className="flex items-center font-normal" onClick={() => setShowPicker(true)}>
//                 <View className="flex-1 font-normal">职位</View>
//                 <View className="text-gray-5 mr-8">{agent?.position}</View>
//               </View>
//             </PickerSingleColumn> */}
//         </View>
//       </ListWrapper>
//     </View>
//   );
// };

export default function Index() {
  const router = useRouter();
  const agentEdit = useAgentStore((state) => state.agentEdit)
  const { updateEditAgent } = useAgentStoreActions()

  const [disabled, setDisabled] = useState(false)
  const handleSave = ()=>{

  }

  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 });
  };

  return (
    <PageCustom>
      <NavBarNormal backText="数字名片"></NavBarNormal>
      <View className="p-16 w-full pb-126">
        <View className="flex flex-col gap-16 w-full">
          <View>
            <View className={style.label}>姓名 <Text className="text-red leading-22 text-14">*</Text> </View>
            <View className={style.value}>
              <WemetaInput
                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>
            <View className={style.label}>职位</View>
            <View className={style.value}>
              <WemetaInput
                value={agentEdit?.position || ''}
                onBlur={(e: any) => handleFieldChange('position', e.detail.value)}
                onInput={(e: any) => handleFieldChange('position', e.detail.value)}
                placeholderStyle="color: rgba(17,17,17,.25)"
                placeholder="输入职位名称"
              />
            </View>
          </View>

          <View>
            <View className={style.label}>企业</View>
            <View className={style.value}>
              <WemetaInput
                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>
            <View className={style.label}>手机号</View>
            <View className={style.value}>
              <WemetaInput
                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="手机号"
              />
            </View>
          </View>
          <View>
            <View className={style.label}>联系邮箱</View>
            <View className={style.value}>
              <WemetaInput
                value={agentEdit?.email || ''}
                onBlur={(e: any) => handleFieldChange('email', e.detail.value)}
                onInput={(e: any) => handleFieldChange('email', e.detail.value)}
                placeholderStyle="color: rgba(17,17,17,.25)"
                placeholder="联系邮箱"
              />
            </View>
          </View>
          <View>

            <View className={style.label}>地址</View>
            <View className={style.value}>
              <WemetaInput
                value={agentEdit?.address || ''}
                onBlur={(e: any) => handleFieldChange('address', e.detail.value)}
                onInput={(e: any) => handleFieldChange('address', e.detail.value)}
                placeholderStyle="color: rgba(17,17,17,.25)"
                placeholder="地址"
              />
            </View>
          </View>
          <View
          >
            <View className={style.label}>二维码</View>
          </View>
        </View>
      </View>

      {/* {RenderEntCard(agent, navToUrl)} */}
      <BottomBar>
        <WemetaButton disabled={disabled} className="flex-1" onClick={handleSave}>保存</WemetaButton>
      </BottomBar>
    </PageCustom>
  );
}
