import React, { Component } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, ScrollView, Text } from '@tarojs/components'
import { connect } from 'react-redux'
import { AtTabs, AtTabsPane, AtCurtain } from 'taro-ui'
import _mapKeys from 'lodash/mapKeys'
import { Loading, SpNote, SpNavBar, SpPage, SpImage } from '@/components'
import api from '@/api'
import { withPager } from '@/hocs'
import {
  log,
  pickBy,
  resolveOrderStatus,
  getCurrentRoute,
  classNames,
  isNavbar,
  getBrowserEnv,
  VERSION_PLATFORM,
  formatDateTime
} from '@/utils'
import { Tracker } from '@/service'
import TradeItem from './comps/new-item'

import './list.scss'

@connect(({ colors }) => ({
  colors: colors.current
}))
@withPager
export default class TradeList extends Component {
  $instance = getCurrentInstance()
  constructor(props) {
    super(props)

    this.state = {
      ...this.state,
      curTabIdx: 0,
      tabList: [
        { title: '全部', status: '0' },
        { title: '待付款', status: '5' },
        { title: '待发货', status: '6' },
        { title: '待收货', status: '1' }
      ],
      // 是否显示待评价
      evaluate: 1,
      list: [],
      rate_status: false,
      curItemActionsId: null,
      showDeliveryModal: false,
      deliveryList: [],
      deliveryName: '',
      deliveryCode: ''
    }
  }

  componentDidMount () {
    const { status = 0, evaluate = 1 } = this.$instance.router.params
    const _tabList = JSON.parse(JSON.stringify(this.state.tabList))
    if (evaluate == 1) {
      _tabList.push({ title: '待评价', status: '7', is_rate: 0 })
      _tabList.push({ title: '已完成', status: '3', is_rate: 0 })
      _tabList.push({ title: '售后', status: '---', is_rate: 0 })
    }
    const tabIdx = _tabList.findIndex((tab) => tab.status === status)
    if (tabIdx >= 0) {
      this.setState(
        {
          curTabIdx: tabIdx,
          list: [],
          evaluate,
          tabList: _tabList
        }
      )
    }
  }

  componentDidShow () {
    this.resetPage()
    this.setState({
      list: []
    })
    setTimeout(() => {
      this.nextPage()
    }, 500)
  }

  onPullDownRefresh = () => {
    Tracker.dispatch('PAGE_PULL_DOWN_REFRESH')
    this.refresh()
  }

  refresh = () => {
    Taro.showLoading({
      title: '加载中',
      icon: 'none'
    })
    this.resetPage(() => {
      this.nextPage()
      this.setState({
        list: []
      })
      Taro.hideLoading()
    })
  }

  componentWillUnmount () {
    this.hideLayer()
  }

  calcTimer (totalSec) {
    let remainingSec = totalSec
    const dd = Math.floor(totalSec / 24 / 3600)
    remainingSec -= dd * 3600 * 24
    const hh = Math.floor(remainingSec / 3600)
    remainingSec -= hh * 3600
    const mm = Math.floor(remainingSec / 60)
    remainingSec -= mm * 60
    const ss = Math.floor(remainingSec)

    return {
      dd,
      hh,
      mm,
      ss
    }
  }

  async fetch (params) {
    const { tabList, curTabIdx } = this.state

    params = _mapKeys(
      {
        ...params,
        order_type: 'normal',
        status: tabList[curTabIdx].status,
        is_rate: tabList[curTabIdx].is_rate
      },
      function (val, key) {
        if (key === 'page_no') return 'page'
        if (key === 'page_size') return 'pageSize'

        return key
      }
    )

    let list = [],
      total = 0,
      rate_status = false
    if (params.status === '---') {
      // params.aftersales_status = 0
      const { list: _list, total_count: _total } = await api.aftersales.list(params)
      list = _list
      total = _total
      rate_status = true
    } else {
      const {
        list: _list,
        pager: { count: _total },
        rate_status: _rate_status
      } = await api.trade.list(params)
      list = _list
      total = _total
      rate_status = _rate_status
    }
    let nList = pickBy(list, {
      tid: 'order_id',
      status_desc: 'order_status_msg',
      order_status_des: 'order_status_des',
      aftersales_bn: ({ aftersales_bn, aftersales }) => {
        return aftersales_bn || aftersales?.aftersales_bn
      },
      aftersales_type: ({ aftersales }) => {
        return aftersales?.aftersales_type
      },
      status: ({ order_status }) => resolveOrderStatus(order_status),
      totalItems: ({ items }) => items?.reduce((acc, item) => +item.num + acc, 0),
      // payment: ({ item_fee_new }) => (item_fee_new / 100).toFixed(2),
      payment: ({ total_fee, refund_fee }) => ((+total_fee || refund_fee) / 100).toFixed(2),
      total_fee: 'total_fee',
      pay_type: 'pay_type',
      point: 'point',
      order_class: 'order_class',
      freight_fee: 'freight_fee',
      freight_type: 'freight_type',
      type: 'type',
      is_rate: 'is_rate',
      dada: 'dada',
      create_date: ({ create_date, create_time }) => {
        return create_date || formatDateTime(create_time * 1000)
      },
      is_all_delivery: 'is_all_delivery',
      is_logistics: 'is_split',
      receipt_type: 'receipt_type',
      delivery_type: 'delivery_type',
      pay_status: 'pay_status',
      delivery_status: 'delivery_status',
      delivery_code: 'delivery_code',
      delivery_corp: 'delivery_corp',
      delivery_corp_name: 'delivery_corp_name',
      delivery_id: 'delivery_id',
      distributor_info: 'distributor_info',
      orders_delivery_id: 'orders_delivery_id',
      order_type: 'order_type',
      can_apply_cancel: 'can_apply_cancel',
      order: ({ items, detail }) =>
        pickBy(items || detail, {
          order_id: 'order_id',
          item_id: 'item_id',
          pic_path: 'pic',
          title: ({ item_name, item_name_2 }) => item_name_2 || item_name,
          origincountry_name: 'origincountry_name',
          origincountry_img_url: 'origincountry_img_url',
          type: 'type',
          item_spec_desc: 'item_spec_desc',
          // price: ({ item_fee_new }) => (item_fee_new / 100).toFixed(2),
          price: ({ total_fee }) => (+total_fee / 100).toFixed(2),
          item_fee: 'item_fee',
          point: 'item_point',
          num: 'num',
          order_item_type: 'order_item_type'
        }),
      timer: ({ auto_cancel_time, create_time }) => auto_cancel_time > parseInt(new Date().getTime() / 1000) ? this.calcTimer(auto_cancel_time - parseInt(new Date().getTime() / 1000)) : null
    })

    log.debug('[trade list] list fetched and processed: ', nList)

    this.setState({
      list: [...this.state.list, ...nList],
      rateStatus: rate_status
    })

    Taro.stopPullDownRefresh()

    return { total }
  }

  handleClickTab = (idx) => {
    this.hideLayer()
    if (this.state.page.isLoading) return

    if (idx !== this.state.curTabIdx) {
      this.resetPage()
      this.setState({
        list: []
      })
    }

    this.setState(
      {
        curTabIdx: idx
      },
      () => {
        this.nextPage()
      }
    )
  }

  handleClickItem = (trade) => {
    const { tid, aftersales_bn } = trade
    let url = `/subpage/pages/trade/detail?id=${tid}`
    if (aftersales_bn) {
      url = `/subpages/trade/after-sale?aftersales_bn=${aftersales_bn}&id=${tid}`
    }

    if (trade.order_class === 'pointsmall') {
      url += `&type=pointitem`
    }

    Taro.navigateTo({
      url
    })
  }

  handleClickItemBtn = async (trade, type) => {
    console.log(trade)
    const { tid, aftersales_bn } = trade

    let detailUrl = `/subpage/pages/trade/detail?id=${tid}`

    if (trade.order_class === 'pointsmall') {
      detailUrl += `&type=pointitem`
    }

    if (type === 'confirm') {
      await api.trade.confirm(tid)
      const { fullPath } = getCurrentRoute(this.$instance.router)
      Taro.redirectTo({
        url: fullPath
      })
      return
    }

    switch (type) {
      case 'cancel':
        Taro.navigateTo({
          url: `/subpage/pages/trade/cancel?order_id=${tid}`
        })
        break
      case 'rate':
        Taro.navigateTo({
          url: `/marketing/pages/item/rate?id=${tid}`
        })
        break
      case 'aftersales':
        Taro.navigateTo({
          url: `/subpages/trade/after-sale?id=${tid}&aftersales_bn=${aftersales_bn || ''}`
        })
        break
      case 'delivery':
        {
          let {
            delivery_code,
            delivery_corp,
            delivery_corp_name,
            orders_delivery_id,
            delivery_type,
            is_all_delivery,
            tid,
            order_type
          } = trade
          this.handleClickDelivery(true, trade)
          // if (is_all_delivery || delivery_type === 'old') {
          //   Taro.navigateTo({
          //     url: `/subpage/pages/trade/delivery-info?delivery_id=${orders_delivery_id}&delivery_code=${delivery_code}&delivery_corp=${delivery_corp}&delivery_name=${delivery_corp_name || delivery_corp
          //       }&delivery_type=${delivery_type}&order_type=${order_type}&order_id=${tid}`
          //   })
          // } else {
          //   Taro.navigateTo({
          //     url: `/subpage/pages/trade/split-bagpack?order_type=${order_type}&order_id=${tid}`
          //   })
          // }
        }
        break
      default:
        Taro.navigateTo({
          url: detailUrl
        })
    }
  }

  handleClickDelivery = async (flag, trade) => {
    if (flag) {
      Taro.showLoading({ title: '' })
      let { delivery_type, delivery_id, order_type, tid: order_id } = trade
      let list = []
      if (delivery_type !== 'new') {
        list = await api.trade.deliveryInfoNew({ delivery_id })
      } else {
        list = await api.trade.deliveryInfo(order_type, order_id)
      }
      const nList = pickBy(list, {
        title: 'AcceptStation',
        content: ({ AcceptTime }) => AcceptTime ? AcceptTime.substring(5, 16) : ''
      })
      this.setState({
        deliveryList: nList,
        deliveryName: trade.delivery_corp_name,
        deliveryCode: trade.delivery_code
      })
    }
    this.setState({ showDeliveryModal: flag })
    Taro.hideLoading()
    // Taro.navigateTo({
    //   url: `/subpage/pages/trade/delivery-info?order_type=${this.state.info.order_type}&order_id=${this.state.info.tid}&delivery_code=${this.state.info.delivery_code}&delivery_corp=${this.state.info.delivery_corp}&delivery_name=${this.state.info.delivery_name}`
    // })
  }

  handleActionClick = (type, item) => {
    this.hideLayer()
  }

  handleActionBtnClick = (item) => {
    this.setState({
      curItemActionsId: item.tid
    })
  }

  hideLayer = () => {
    this.setState({
      curItemActionsId: null
    })
  }

  render () {
    const { colors } = this.props
    const {
      curTabIdx,
      curItemActionsId,
      tabList,
      list = [],
      page,
      rateStatus,
      evaluate,
      showDeliveryModal,
      deliveryList,
      info = {},
      deliveryName,
      deliveryCode
    } = this.state

    return (
      <SpPage
        isBlack
        className={classNames('page-trade-list', {
          'has-navbar': true || isNavbar()
        })}
      // showNavSearchIcon
      >
        <SpNavBar title='订单列表' leftIconType='chevron-left' fixed='true' />
        <AtTabs
          className={`trade-list__tabs ${colors.data[0].primary ? 'customTabsStyle' : ''}`}
          current={curTabIdx}
          tabList={tabList}
          onClick={this.handleClickTab}
          customStyle={{ color: colors.data[0].primary }}
        >
          {tabList.map((panes, pIdx) => (
            <AtTabsPane current={curTabIdx} key={panes.status} index={pIdx}></AtTabsPane>
          ))}
        </AtTabs>
        <ScrollView
          scrollY
          className={`trade-list__scroll ${getBrowserEnv().weixin ? 'with-tabs-wx' : 'with-tabs'}`}
          // onScrollToUpper={this.onPullDownRefresh.bind(this)}
          onScrollToLower={this.nextPage}
        >
          {list.map((item) => {
            return (
              <TradeItem
                payType={item.pay_type}
                key={item.tid}
                rateStatus={rateStatus}
                info={item}
                isShowDistributorInfo={VERSION_PLATFORM}
                showActions={curItemActionsId === item.tid}
                onClick={this.handleClickItem.bind(this, item)}
                onClickBtn={this.handleClickItemBtn.bind(this, item)}
                onActionBtnClick={this.handleActionBtnClick.bind(this, item)}
                onActionClick={this.handleActionClick.bind(this, item)}
                onTimeUp={this.refresh}
              />
            )
          })}
          {page.isLoading && <Loading>正在加载...</Loading>}
          {!page.isLoading && !page.hasNext && !list.length && (
            <SpNote isUrl img={`${process.env.APP_IMAGE_CDN_NEW}/cart/logo-hui.png`} height={144} width={144}>
              您的{curTabIdx != '0' ? tabList[curTabIdx].title : ''}订单为空
            </SpNote>
          )}
          {!!curItemActionsId && <View className='layer' onClick={this.hideLayer} />}
        </ScrollView>
        <AtCurtain
          className='curtain'
          isOpened={showDeliveryModal}
          onClose={() => {
            this.setState({ showDeliveryModal: false })
          }}
        >
          <View className="curtain_content">
            <View className="curtain_content_title">
              <SpImage src={`member/logo-black.png`} height={32} mode='heightFix' isNew />
              <Text className="" style={{ marginLeft: '6px' }}>物流信息</Text>
            </View>
            <View className="receiver_name">
              {deliveryName}：{deliveryCode}
            </View>
            <ScrollView scrollY
              scrollWithAnimation className="curtain_content_text" showScrollbar={false} enhanced>
              {deliveryList.map((item, index) => <View class="receiver_item" key={`item_${index}`}>
                <View className="receiver_item_left">
                  {item.content}
                </View>
                <View className="receiver_item_right">
                  {item.title}
                </View>
              </View>)}
            </ScrollView>
          </View>
        </AtCurtain>
      </SpPage>
    )
  }
}