import { Button, Image, Picker, Text, Textarea, View } from '@tarojs/components'
import Taro, { chooseMedia } from '@tarojs/taro'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import ModifyModal from './components/ModifyModal'
import { alert, goLink, isEmptyObject, retrieval } from '@/common/common'
import Popup from '@/components/popup'
import { companyTypeApi, portraitUpdateApi, realNameUpdateApi } from '@/api/user'
import { companyDetailApi, companyUpdateApi } from '@/api/company'
import './index.scss'
import useLogin from '@/use/useLogin'
import { useSelector } from '@/reducers/hooks'
import useUploadCDNImg from '@/use/useUploadImage'
import { IMG_CND_Prefix } from '@/common/constant'
import useUserInfo from '@/use/useUserInfo'
import IconFont from '@/components/iconfont/iconfont'
import { formatImgUrl } from '@/common/fotmat'

export default () => {
  const { getPhoneNumber, getAdminUserInfo } = useLogin()
  const { adminUserInfo } = useSelector(state => state.userInfo)
  // 用户信息
  useEffect(() => {
    setFormData({
      ...formData,
      ...(adminUserInfo as any),
    })
  }, [adminUserInfo])
  useEffect(() => {
    setFormData({
      ...(adminUserInfo as any),
      company_type_index: 0,
    })
    getCompanyTypeData()
  }, [])
  // 表单数据
  const [formData, setFormData] = useState<typeof adminUserInfo>(adminUserInfo)
  // 昵称修改保存
  const { fetchData: realNameUpdateFetch } = realNameUpdateApi()
  const rules = {
    text: [
      {
        message: '请输入',
      },
    ],
  }
  const { fetchData: saveFetch } = companyUpdateApi()
  const { fetchData: getCompanyFetch } = companyDetailApi()
  const handleTextareaSave = async(text, type) => {
    retrieval({ text }, rules)
      .then(async() => {
        let result
        if (type == 'Ickname') {
          result = await realNameUpdateFetch({ real_name: text })
        }
        else {
          const params = await getCompanyFetch()
          result = await saveFetch({
            ...params.data,
            company_name: text,
          })
        }
        if (result.success) {
          getAdminUserInfo()
          ;(ModifyIcknameEl.current as any).setModalShow(false)
          ;(ModifyCompanyNameEl.current as any).setModalShow(false)
          alert.success('保存成功')
        }
        else {
          alert.none(result.msg)
        }
      })
      .catch((message) => {
        alert.none(message)
      })
  }
  // Taro.eventCenter.on('message:detail', (message) => console.log(message))
  // 面面跳转
  const onNavigate = (url: string) => {
    goLink(url)
  }
  // 肖像编辑
  const { fetchData: portraitUpdateFetch } = portraitUpdateApi()
  const { getWxPhoto } = useUploadCDNImg()
  const handleSelectRortrait = () => {
    Taro.showModal({
      title: '提示',
      content: '是否确定更改头像？',
      showCancel: true,
      async success(ev) {
        if (ev.confirm) {
          const result = await getWxPhoto('mall')
          const portraitUpdateResult = await portraitUpdateFetch({
            avatar_url: IMG_CND_Prefix + (result as any).url,
          })
          if (portraitUpdateResult.success) {
            getAdminUserInfo()
            alert.success('保存成功')
          }
          else {
            alert.none(portraitUpdateResult.msg)
          }
        }
      },
    })
  }
  const mGetPhoneNumber = (ev) => {
    if (ev.detail?.code) {
      getPhoneNumber(ev.detail.code)
    }
    else {
      alert.none('绑定失败!')
    }
  }
  const ModifyIcknameEl = useRef(null)
  const ModifyCompanyNameEl = useRef(null)
  // 获取企业类型
  const { fetchData: companyTypeFetch, state: companyTypeData } = companyTypeApi()
  const getCompanyTypeData = async() => {
    const reuslt = await companyTypeFetch()
    if (reuslt.success) {
      reuslt.data?.list?.every((item, index) => {
        if (item.id == (adminUserInfo as any).purchaser_type) {
          setFormData({
            ...(adminUserInfo as any),
            company_type_index: index,
          })
          return false
        }
        return true
      })
    }
  }
  // 修改企业类型
  const handleCompanyType = async(ev) => {
    const { value } = ev.detail
    const item = companyTypeData.data.list && companyTypeData.data.list[value]
    if (item) {
      if (item.id == 0) { return alert.error('请选择类型') }
      const params = await getCompanyFetch()
      const result = await saveFetch({
        ...params.data,
        purchaser_type: item.id,
      })
      if (result.success) {
        getAdminUserInfo()
        alert.success('保存成功')
      }
      else {
        alert.none(result.msg)
      }
    }
  }

  const { removeToken, removeSessionKey, removeUserInfo } = useUserInfo()
  const outLogin = () => {
    removeToken()
    removeSessionKey()
    removeUserInfo()
    goLink('/pages/index/index', {}, 'switchTab')
  }

  const comanyTypeDataFormat = useMemo(() => {
    if (companyTypeData.data.list) {
      return companyTypeData.data.list?.map((item) => {
        if (item.id == 0) { item.name = '--请选择类型--' }
        return item
      })
    }
    else {
      return []
    }
  }, [companyTypeData])

  const userInfo = useSelector(state => state.userInfo)

  const onPhone = () => {
    if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
    Taro.makePhoneCall({
      phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
    })
  }

  return (
    <View className="user-edit">
      <View onClick={handleSelectRortrait} className="user-edit-portrait">
        <Image src={(formData as any)?.avatar_url} />
        <View>点击编辑头像</View>
      </View>
      <View className="user-edit-content">
        <UserEditList
          onClick={() => (ModifyIcknameEl.current as any).setModalShow(true)}
          data={(formData as any)?.user_name}
          label="昵称"
          placeholder="请输入"
          icon=""
        />
        <UserEditList label="手机号" placeholder="去绑定" icon="" useIcon="true">
          {(formData as any)?.phone
            ? (
              <View className="user-edit-content-phone">
                <View>{(formData as any)?.phone}</View>
              </View>
            )
            : (
              <Button className="user-edit-content-bindphone" openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}>
              去绑定
              </Button>
            )}
        </UserEditList>
        <UserEditList
          onClick={() => (ModifyCompanyNameEl.current as any).setModalShow(true)}
          data={(formData as any)?.company_name}
          label="公司名称"
          placeholder="待绑定"
          icon=""
        />
      </View>

      {userInfo?.adminUserInfo?.sale_user_id && <View className="customer_service">
        <Image className="customer_service_image" src={formatImgUrl('/mall/avatar2.png', '')}></Image>
        <View className="customer_service_name_and_phone">
          <View className="customer_service_name">
            <Text>{userInfo?.adminUserInfo?.sale_user_name}</Text>
            <Text>专属客服经理</Text>
          </View>
          <View className="customer_service_phone">客服热线 {userInfo?.adminUserInfo?.sale_user_phone}</View>
        </View>
        <View className="customer_service_button" onClick={() => onPhone()}>
          <IconFont name="icon-dianhua" />
          <Text>拨打</Text>
        </View>
      </View>}

      {/* <Button hoverClass="none" className="user-edit-logout" onClick={outLogin}>
        退出当前账号
      </Button> */}

      <ModifyModal title="修改昵称" ref={ModifyIcknameEl} value={(formData as any)?.user_name} save={value => handleTextareaSave(value, 'Ickname')} />
      <ModifyModal
        title="修改名称"
        ref={ModifyCompanyNameEl}
        value={(formData as any)?.company_name}
        save={value => handleTextareaSave(value, 'companyName')}
      />
    </View>
  )
}

// 列表
const UserEditList = memo((props: any) => {
  return (
    <View onClick={props.onClick} className="user-edit-list">
      <View className="user-edit-list-left">{props.label}</View>
      <View className="user-edit-list-right">
        <View>{props.children ? props.children : props.data ? props.data : <View className="user-edit-list-right-placeholder">{props.placeholder}</View>}</View>
        {!props.useIcon && <Text className="iconfont icon-a-moreback"></Text>}
      </View>
    </View>
  )
})