import { View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import React, { ReactNode, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import Tabs from './components/tabs'
import Form from './components/form'
import TagPopup from './components/tagPopup'
import Popup from '@/components/popup'
import { debounce } from '@/common/util'
import { alert, goLink } from '@/common/common'
import { formatDateTime, formatPriceDiv, formatWeightDiv } from '@/common/format'
import AddressList from '@/components/AddressList'
import { MpPurchaser } from '@/api/customer'

const CustomerDetails = () => {
  const router = useRouter()

  const [status, setstatus] = useState<number>(1)

  const [infoObj, setinfoObj] = useState<any>()
  const { fetchData: getDesc } = MpPurchaser()

  // 顶部栏
  const AddressListRef = useRef<any>()
  const [TarBarList, setTarBarList] = useState<any[]>([{ id: 1, name: '基础信息', showBorder: true }, { id: 2, name: '收货地址', showBorder: false }])
  const handChose = (item) => {
    TarBarList.forEach((it) => {
      if (it.id === item.id) {
        it.showBorder = true
      }
      else {
        it.showBorder = false
      }
      setTarBarList([...TarBarList])
      setstatus(item.id)
      // pageNum.current.page = 1
      // setOrderData(() => ({ list: [], total: 0 }))
      // setSearchField((val) => ({ ...val, size: 10, status: item.id }))
    })
    if (item.id == 2) {
      Taro.nextTick(() => {
        AddressListRef.current?.getData()
      })
    }
  }

  const [showPopup, setshowPopup] = useState(false)
  const TagPopupRef = useRef<any>()
  const handShow = () => {
    TagPopupRef?.current?.modeList.map((it) => {
      infoObj?.label_list?.forEach((item) => {
        if (it.id == item.label_id) {
          it.checked = true
        }
      })
      return it
    })
    TagPopupRef.current.setModeList([...TagPopupRef.current.modeList])
    setshowPopup(true)
  }
  const getInfo = async() => {
    Taro.showLoading({
      title: '请稍等...',
      mask: true,
    })
    const res = await getDesc({ id: router.params.purchaser_id })
    setinfoObj(res.data)
    Taro.hideLoading()
    setshowPopup(false)
  }
  useDidShow(() => {
    getInfo()
  })
  return (
    <View className={styles.mainBox}>
      <View className={styles.mainTop}>
        <View className={styles.mainUser}>
          <View className={styles.leftSafe}>
            <View className={styles.itemCile}>{infoObj?.name?.[0]}</View>
          </View>
          <View className={styles.item_top_one}>
            <View className={styles.item_top_one_flex}>
              <View className={styles.itemName}>{infoObj?.name}</View>
              <View className={styles.itemPhone}>{infoObj?.phone}</View>
            </View>
            <View className={styles.item_tag_box}>
              <View className={styles.item_tagItem}>{infoObj?.purchaser_type_name || '暂无'}</View>
              <View className={styles.item_tagItem}>{infoObj?.sale_user_name || '暂无'}</View>
              {
                infoObj?.label_list?.map((item, key) => {
                  return (
                    <View key={key} className={styles.item_tagItem}>{item.label_name}</View>
                  )
                })
              }
              <View className={styles.item_tagAdd} onClick={() => handShow()}>
                <View className={styles.item_add}>+</View>
                <View className={styles.item_add_font}>标签</View>
              </View>
            </View>
          </View>
          <View className={styles.pos} onClick={() => goLink(`/pages/customerEditor/index?id=${router.params.purchaser_id}&type=edit`)}>{'编辑 >'}</View>
        </View>
        <Tabs list={TarBarList} handChose={item => handChose?.(item)}></Tabs>
      </View>
      {
        status === 1 && <View className={styles.formBox}>
          <Form title="客户全称" des={infoObj?.name || '暂无'} ></Form>
          <Form title="客户简称" des={infoObj?.short_name || '暂无'} ></Form>
          <Form title="客户类型" des={infoObj?.purchaser_type_name || '暂无'} ></Form>
          <Form title="联系人" des={infoObj?.director || '暂无'} ></Form>
          <Form title="联系电话" des={infoObj?.phone || '暂无'} isPhone></Form>
          <Form title="省市区" des={infoObj?.province_name + infoObj?.city_name + infoObj?.district_name || '暂无'} ></Form>
          <Form title="详细地址" des={infoObj?.address_detail || '暂无'} ></Form>
          <Form title="业务人员" des={infoObj?.sale_user_name || '暂无'} ></Form>
          <Form title="客户来源" des={infoObj?.purchaser_source_name || '暂无'} ></Form>
          <Form title="备注信息" des={infoObj?.remark || '暂无'} ></Form>
          <Form title="下单时间" des={formatDateTime(infoObj?.recent_order_time) || '暂无'} ></Form>
          <Form title="创建时间" des={formatDateTime(infoObj?.create_time) || '暂无'} ></Form>
          <Form title="创建人" des={infoObj?.creator || '暂无'} ></Form>
          <Form title="更新人" des={infoObj?.update_user_name || '暂无'} ></Form>
          <Form title="更新时间" des={formatDateTime(infoObj?.update_time) || '暂无'} isBorder={false}></Form>
        </View>
      }
      {
        status === 2
                && <View className={styles.order_list}>
                  <AddressList ref={AddressListRef} refresherEnabled purchaser_id={router.params.purchaser_id as any} />
                </View>
      }
      <TagPopup ref={TagPopupRef} showPopup={showPopup} handClose={() => setshowPopup(false)} diseShow={() => getInfo()}></TagPopup>
    </View>
  )
}
export default CustomerDetails