import React from 'react'
import { Image, Text, View, Button } from '@tarojs/components'
import './index.scss'

import { useEffect } from 'react';
import { useState } from 'react';
import backNav from '@/images/backNav.png'
import uncheck from '@/images/uncheck.png'
import checked from '@/images/checked.png'

import edit from '@/images/edit.png'
import Taro from '@tarojs/taro';
import { useRouter } from '@tarojs/taro';
import { deleteAddress, getAddress } from '../../utils/api';
import { backTo, closeLoading, loading, redirectTo, successNotice } from '../../utils/utils';
import { SetData } from '../../utils/storage';
import { useDidShow } from '@tarojs/taro';



function Index() {

  const param = useRouter().params
  const [id] = useState(param.id)
  const [home] = useState(param.home)
  const [gid] = useState(param.gid)
  const [addrId, setAddrId] = useState(0)
  const [list, setList] = useState([])
  const [ref, setRef] = useState(0)


  useEffect(() => {
    getAddress().then(re => {
      if (!re) return
      setList(re.items)
    })
    if (!!id) {
      setAddrId(id)
    }
  }, [id, ref])

  useDidShow(() => {
    setRef(ref + 1)
  })


  // 跳转
  const navDetailFn = (id) => {
    Taro.navigateTo({
      url: `/pages/address-create/index?id=${id}`
    })
  }

  const onSelect = (aid) => {
    if (!!gid && !!aid) {
      // redirectTo(`/pages/settle/index?id=${gid}&aid=${aid}`)
      SetData(gid, aid, 5)
      backTo()
    }
  }

  // 删除
  const deleteAddr = async (id) => {
    if (!id) return
    loading('正在删除中')
    const re = await deleteAddress(id).finally(() => {
      closeLoading()
    })
    successNotice('删除成功')
    setRef(d => d + 1)
  }

  // 返回页面
  const backFn = () => {
    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
  }

  return (
    <View className='addr-container'>
      <View className='addr-detail-title'>
        <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
        {
          home ? '我的地址' : "选择地址"
        }

      </View>

      <View className='addr-body' >
        {
          list.map((item, index) => {
            return <View className='addr-item' key={item.id}>
              {
                !home && <View className='addr-icon w-6 h-6' onClick={() => {
                  setAddrId(item.id)
                }}>
                  <Image src={addrId == item.id ? checked : uncheck} className="w-6 h-6" />
                </View>
              }
              <View className='addr-item-content' onClick={() => {
                setAddrId(item.id)
                onSelect(item.id)
              }}>
                <View className='addr-item-title'>
                  <View className='addr-item-name'>{item.recipient_name} {item.recipient_phone}</View>
                  {item.id_default && <View className='addr-default'>默认地址</View>}
                </View>
                <View className='addr-item-info'>{item.province?.name}{item.city?.name}{item.county?.name}{item.address}</View>
              </View>
              <View className='addr-edit-icon' onClick={() => {
                navDetailFn(item.id)
              }}>
                <Image src={edit} />
              </View>
            </View>
          })
        }

      </View>
      <Button className='addr-btn flex-center border-none' onClick={() => {
        navDetailFn('')
      }}>新增地址</Button>
    </View>
  )
}

export default Index
