import { useState } from 'react'
import { ScrollView } from '@tarojs/components'
import './index.scss'
import EditUserDetailBasicInfo from '../EditUserDetailBasicInfo/index'

export default function UserDetailBasicInfo (props) {
  const { CustomerInfo = {}, AddFollow = () => {}, CustomerId = null, Update = () => {} } = props
  const [ShowEditPopup, setShowEditPopup] = useState(false)

  const Close = () => {
    Update()
    setShowEditPopup(false)
  }

  return (
    <view className='components UserDetailBasicInfo'>
      <ScrollView scroll-y>
        <view className='PageContent'>

          <view className='Content'>
            <view className='flex-h'>
              <text>姓名</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.name || '-'}</text>
              </view>
              <text className='iconfont icon-xiugai active' onClick={() => {setShowEditPopup(true)}}></text>
              <text className='active' onClick={() => {setShowEditPopup(true)}}>修改</text>
            </view>
            {/* <view className='flex-h'>
              <text>昵称</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.nickname || '-'}</text>
              </view>
            </view> */}
            <view className='flex-h'>
              <text>手机号码</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.phone || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>性别</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.sex - 0 === 1 ? '男' : '女'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>家庭住址</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.homeAddress || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>工作地址</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.firmAddress || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>年龄段</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.age || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>职业</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.career || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>家庭年收入</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.householdIncome || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>家庭成员数</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.familyNumber || '-'}人</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>已有房产数</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.houseNumber || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>已有车辆数</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.carNumber || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>预计购房时间</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.estimatedPurchaseTime || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>咨询重点</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.consultation || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>购房动机</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.motivation || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>抗性分析</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.resistanceAnalysis || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>项目认可点</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.approval || '-'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text>备注</text>
              <text>：</text>
              <view className='flex-item'>
                <text>{CustomerInfo.remark || '-'}</text>
              </view>
            </view>
          </view>

          <view className='Btn'>
            <text className='active' onClick={AddFollow}>添加跟进</text>
            {/* <text>变更状态</text> */}
          </view>

        </view>
      </ScrollView>
      {
        ShowEditPopup &&
        <view className='EditUserInfo'>
          <view>
            <view>
              <EditUserDetailBasicInfo Data={CustomerInfo} CustomerId={CustomerId} close={() => {Close()}}></EditUserDetailBasicInfo>
            </view>
          </view>
        </view>
      }
    </view>
  )
}
