import React, { Component } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text, ScrollView, Picker, Video, SwiperItem, Swiper, Image } from '@tarojs/components'
import { SpAddress } from '@/components'
import { withPager, withBackToTop } from '@/hocs'
import { connect } from 'react-redux'
import { AtDrawer } from 'taro-ui'
import {
  BackToTop,
  Loading,
  RecommendItem,
  SearchBar,
  SpNote,
  FilterBar,
  SpTabbar,
  SpPage,
  SpImage
} from '@/components'
import api from '@/api'
import { classNames, pickBy, isWeixin } from '@/utils'
import S from '@/spx'

import './list.scss'

@connect(({ colors }) => ({
  colors: colors.current
}))
// @withPager
@withBackToTop
export default class RecommendList extends Component {
  $instance = getCurrentInstance()

  constructor(props) {
    super(props)

    this.state = {
      ...this.state,
      list: [],
      query: null,
      showDrawer: false,
      selectColumn: {},
      columnList: [],
      info: {},
      areaList: [],
      multiIndex: [],
      isShowSearch: false,
      shareInfo: {},
      isSpAddressOpened: false,
      play: false,
      windowWidth: 750,
      page: {
        isLoading: true
      },
      currentIndex: 0,
      // swiperList: [
      //   {
      //     type: 'image',
      //     src: process.env.APP_IMAGE_CDN_NEW + '/index/22.jpg'
      //   },
      //   {
      //     type: 'image',
      //     src: process.env.APP_IMAGE_CDN_NEW + '/index/33.jpg'
      //   },
      //   // {
      //   //   type: 'video',
      //   //   src: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/wxAssets/index/video-1.mp4'
      //   // }
      // ],
      swiperList: [],
      activeInfo: {}
    }
  }

  componentDidMount () {
    api.wx.shareSetting({ shareindex: 'planting' }).then((res) => {
      this.setState({
        shareInfo: res
      })
    })
  }

  componentDidShow () {
    const params = this.$instance.router.params
    if (params) {
      const { id, name } = params
      this.setState({
        selectColumn: {
          id,
          name,
          isChooseColumn: true
        }
      })
    }
    // Taro.showLoading({ title: '' })
    // this.resetPage()
    // this.setState({
    //   list: []
    // })
    setTimeout(() => {
      // this.nextPage()
      // Taro.hideLoading()
      this.setState({
        page: {
          isLoading: false
        }
      })
    }, 300)
    // this.praiseNum()
    // this.getActiveDetail()
  }

  onShareAppMessage () {
    const res = this.state.shareInfo
    const { userId } = Taro.getStorageSync('userinfo')
    const query = userId ? `/pages/recommend/list?uid=${userId}` : '/pages/recommend/list'
    return {
      title: res.title,
      imageUrl: res.imageUrl,
      path: query
    }
  }

  onShareTimeline () {
    const res = this.state.shareInfo
    const { userId } = Taro.getStorageSync('userinfo')
    const query = userId ? `uid=${userId}` : ''
    return {
      title: res.title,
      imageUrl: res.imageUrl,
      query: query
    }
  }

  getActiveDetail = async (id = 1) => {
    const { status, activity_info = {}, total_count } = await api.user.registrationActivity({ activity_id: id })
    this.setState({
      page: {
        isLoading: false,
      },
      activeInfo: {
        ...activity_info,
        total_count,
        status
      },
      swiperList: activity_info.pics.map(item => ({
        type: 'image',
        src: item
      }))
    })
  }

  async fetch (params) {
    const { page_no: page, page_size: pageSize } = params
    const { columnList, areaList } = this.state
    let { selectColumn } = this.state
    const article_query = {
      ...this.state.query,
      article_type: 'bring',
      page,
      pageSize,
      category_id: selectColumn.id
    }

    if (columnList.length === 0) {
      const columns = await api.article.columnList()
      let clist = pickBy(columns, {
        name: 'category_name',
        id: 'category_id'
      })
      let defaultItem = {}
      if (!selectColumn.id) {
        defaultItem = { id: '', name: '全部', isChooseColumn: true }
      } else {
        defaultItem = { id: '', name: '全部', isChooseColumn: false }
        clist.map((item) => {
          if (item.id === selectColumn.id) {
            item.isChooseColumn = true
          } else {
            item.isChooseColumn = false
          }
        })
      }
      selectColumn = Object.assign({}, defaultItem)
      clist.unshift(defaultItem)
      this.setState({
        columnList: clist
      })
    }

    const {
      list,
      total_count: total,
      province_list
    } = S.getAuthToken()
        ? await api.article.authList(article_query)
        : await api.article.list(article_query)

    if (areaList.length === 0) {
      let res = await api.member.areaList()
      let regions = []
      province_list.map((item) => {
        let match = res.find((area) => item == area.id)
        if (match) {
          regions.push(match)
        }
      })
      const addList = pickBy(regions, {
        label: 'label',
        id: 'id',
        children: 'children'
      })
      this.addList = addList
      let arrProvice = []
      let arrCity = []
      let arrCounty = []

      addList.map((item, index) => {
        arrProvice.push(item.label)
        if (index === 0) {
          item.children.map((c_item, c_index) => {
            arrCity.push(c_item.label)
            if (c_index === 0) {
              c_item.children.map((cny_item) => {
                arrCounty.push(cny_item.label)
              })
            }
          })
        }
      })
      this.setState({
        areaList: [arrProvice, arrCity, arrCounty]
      })
    }

    const nList = pickBy(list, {
      img: 'image_url',
      item_id: 'article_id',
      title: 'title',
      author: 'author',
      summary: 'summary',
      head_portrait: 'head_portrait',
      isPraise: 'isPraise',
      articlePraiseNum: 'articlePraiseNum.count'
    })

    nList.map((item) => {
      if (!item.articlePraiseNum) {
        item.articlePraiseNum = 0
      }
    })

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

    return {
      total
    }
  }

  handleClickItem = (item) => {
    const url = `/subpage/pages/recommend/detail?id=${item.item_id}`
    Taro.navigateTo({
      url
    })
  }

  handleConfirm = (val) => {
    this.setState(
      {
        showDrawer: false,
        query: {
          showDrawer: false,
          ...this.state.query,
          title: val
        }
      },
      () => {
        this.resetPage()
        this.setState(
          {
            list: []
          },
          () => {
            this.nextPage()
          }
        )
      }
    )
  }

  handleClickFilter = () => {
    this.setState({
      showDrawer: true
    })
  }

  handleClickParmas = (id) => {
    let { columnList, selectColumn } = this.state
    columnList.map((item) => {
      if (item.id === id) {
        item.isChooseColumn = true
        selectColumn = item
      } else {
        item.isChooseColumn = false
      }
    })
    this.setState({
      columnList,
      selectColumn
    })
  }
  handleRegionRefresh = (e) => {
    e.stopPropagation()
    this.resetPage()
    let { query } = this.state
    Object.assign(query, { regions_id: [], province: '', city: '', area: '' })
    this.setState(
      {
        multiIndex: [],
        areaList: [],
        list: [],
        info: { city: '', county: '', province: '' },
        query
      },
      () => {
        this.nextPage()
      }
    )
  }

  handleSearchOn = () => {
    this.setState({
      isShowSearch: true
    })
  }

  handleSearchOff = () => {
    this.setState({
      isShowSearch: false
    })
  }

  handleSearchChange = (val) => {
    this.setState({
      query: {
        ...this.state.query,
        title: val
      }
    })
  }

  handleSearchClear = () => {
    this.setState(
      {
        isShowSearch: false,
        query: {
          ...this.state.query,
          title: ''
        }
      },
      () => {
        this.resetPage()
        this.setState(
          {
            list: []
          },
          () => {
            this.nextPage()
          }
        )
      }
    )
  }

  handleClickSearchParams = (type) => {
    this.setState({
      showDrawer: false
    })
    if (type === 'reset') {
      const { paramsList, selectParams } = this.state
      console.log('handleClickSearchParams:paramsList', paramsList)
      console.log('handleClickSearchParams:selectParams', selectParams)
      paramsList && paramsList.map((item) => {
        item.attribute_values.map((v_item) => {
          if (v_item.attribute_value_id === '') {
            v_item.isChooseParams = true
          } else {
            v_item.isChooseParams = false
          }
        })
      })
      selectParams && selectParams.map((item) => {
        item.attribute_value_id = ''
      })
      this.setState({
        paramsList,
        selectParams,
      })
      this.resetColumn()
    }

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

  resetColumn () {
    this.setState({
      selectColumn: Object.assign({}, { id: '', name: '全部', isChooseColumn: true }),
      columnList: this.state.columnList.map((d, idx) => {
        d.isChooseColumn = idx == 0 ? true : false
        return d
      })
    })
  }

  // 选定开户地区
  handleClickPicker = () => {
    let arrProvice = []
    let arrCity = []
    let arrCounty = []
    if (this.addList) {
      this.addList.map((item, index) => {
        arrProvice.push(item.label)
        if (index === 0) {
          item.children.map((c_item, c_index) => {
            arrCity.push(c_item.label)
            if (c_index === 0) {
              c_item.children.map((cny_item) => {
                arrCounty.push(cny_item.label)
              })
            }
          })
        }
      })
      this.setState({
        showDrawer: false,
        areaList: [arrProvice, arrCity, arrCounty],
        multiIndex: [0, 0, 0]
      })
    }
  }

  bindMultiPickerChange = async () => {
    const { info } = this.state
    // this.addList.map((item, index) => {
    //   if (index === e.detail.value[0]) {
    //     info.province = item.label
    //     item.children.map((s_item, sIndex) => {
    //       if (sIndex === e.detail.value[1]) {
    //         info.city = s_item.label
    //         s_item.children.map((th_item, thIndex) => {
    //           if (thIndex === e.detail.value[2]) {
    //             info.county = th_item.label
    //           }
    //         })
    //       }
    //     })
    //   }
    // })

    const { province, city, area } = info
    this.setState(
      {
        query: {
          ...this.state.query,
          province,
          city
          // area
        }
      },
      () => {
        this.resetPage()
        this.setState(
          {
            list: []
          },
          () => {
            setTimeout(() => {
              this.nextPage()
            }, 0)
          }
        )
      }
    )
  }

  bindMultiPickerColumnChange = (e) => {
    const { areaList, multiIndex } = this.state
    if (e.detail.column === 0) {
      this.setState({
        multiIndex: [e.detail.value, 0, 0]
      })
      this.addList.map((item, index) => {
        if (index === e.detail.value) {
          let arrCity = []
          let arrCounty = []
          item.children.map((c_item, c_index) => {
            arrCity.push(c_item.label)
            if (c_index === 0) {
              c_item.children.map((cny_item) => {
                arrCounty.push(cny_item.label)
              })
            }
          })
          areaList[1] = arrCity
          areaList[2] = arrCounty
          this.setState({ areaList })
        }
      })
    } else if (e.detail.column === 1) {
      multiIndex[1] = e.detail.value
      multiIndex[2] = 0
      this.setState(
        {
          multiIndex
        },
        () => {
          this.addList[multiIndex[0]].children.map((c_item, c_index) => {
            if (c_index === e.detail.value) {
              let arrCounty = []
              c_item.children.map((cny_item) => {
                arrCounty.push(cny_item.label)
              })
              areaList[2] = arrCounty
              this.setState({ areaList })
            }
          })
        }
      )
    } else {
      multiIndex[2] = e.detail.value
      this.setState({
        multiIndex
      })
    }
  }

  handleClose = (e) => {
    this.setState({
      showDrawer: false
    })
  }

  handleClickCloseSpAddress = () => {
    this.setState({
      isSpAddressOpened: false
    })
  }

  handleClickOpenSpAddress = () => {
    this.setState({
      isSpAddressOpened: true
    })
  }


  onPickerChange = (selectValue) => {
    const info = {
      province: selectValue[0].label,
      city: selectValue[1].label,
      // area: selectValue[2].label
    }
    this.setState({
      info
    }, () => {
      this.bindMultiPickerChange()
    })
  }

  handleVideoClick = (play) => {
    let video
    if (isWeixin) {
      video = Taro.createVideoContext('recommend-video')
    } else if (isWeb) {
      video = document.getElementById('recommend-video')
    }

    if (!video) {
      return
    }

    if (play) {
      setTimeout(() => {
        video.play()
      }, 200)
    } else {
      isWeixin ? video.stop() : video.pause()
    }
    this.setState({
      play
    })
  }
  onSwiperChange = (e) => {
    const { current } = e.detail
    this.setState({
      currentIndex: current
    })
  }

  handleApply = () => {
    const { activeInfo = {} } = this.state
    let url = '/pages/recommend/detail?id='
    if (activeInfo.total_count) {
      url = `/pages/recommend/status?id=`
    }
    Taro.navigateTo({
      url: url + activeInfo.activity_id
    })
  }
  handleBackToIndex = () => {
    Taro.redirectTo({
      url: '/pages/index'
    })
  }

  render () {
    const {
      list,
      showBackToTop,
      scrollTop,
      page,
      showDrawer,
      info,
      columnList,
      selectColumn,
      multiIndex,
      areaList,
      query,
      isShowSearch,
      isSpAddressOpened,
      play,
      swiperList,
      currentIndex,
      activeInfo
    } = this.state
    const { colors } = this.props
    let address = info.province + info.city
    const windowWidth = Taro.getSystemInfoSync().windowWidth
    const height = windowWidth * 9 / 17

    return (
      <SpPage renderFooter={<SpTabbar />} loading={page.isLoading} className='has-nav' title="" isBlack >
        <View className='page-recommend-list'>
          {false && <>
            <View className='recommend-list__toolbar'>
              <View
                className={`recommend-list__search ${query && query.title && isShowSearch ? 'on-search' : null
                  }`}
              >
                <SearchBar
                  showDailog={false}
                  keyword={query ? query.title : ''}
                  onFocus={this.handleSearchOn}
                  onChange={this.handleSearchChange}
                  onClear={this.handleSearchClear}
                  onCancel={this.handleSearchOff}
                  onConfirm={this.handleConfirm.bind(this)}
                />
              </View>
              <FilterBar className='recommend-list__tabs'>
                <View className='filter-bar__item' onClick={this.handleClickFilter.bind(this)}>
                  <View className='iconfont icon-menu'></View>
                  <Text>{selectColumn.name || '栏目'}</Text>
                </View>
                <View className='filter-bar__item region-picker'>
                  {/* <Picker
                  mode='multiSelector'
                  onClick={this.handleClickPicker}
                  onChange={this.bindMultiPickerChange}
                  onColumnChange={this.bindMultiPickerColumnChange}
                  value={multiIndex}
                  range={areaList}
                >
                  <View>
                    <View className='iconfont icon-periscope'></View>
                    <Text>{address || '地区'}</Text>
                  </View>
                </Picker> */}
                  <View onClick={this.handleClickOpenSpAddress.bind(this)}>
                    <View className='iconfont icon-periscope'></View>
                    <Text>{address || '地区'}</Text>
                  </View>
                  <SpAddress isOpened={isSpAddressOpened} onClose={this.handleClickCloseSpAddress} onChange={this.onPickerChange} />

                  {address ? (
                    <View
                      className='zoom-btn icon-close iconfont'
                      onClick={this.handleRegionRefresh.bind(this)}
                    ></View>
                    // <Text className='icon-close' onClick={this.handleRegionRefresh.bind(this)}>x</Text>
                  ) : (
                    ''
                  )}
                </View>
              </FilterBar>
            </View>
            <AtDrawer
              show={showDrawer}
              right
              mask
              width={`${Taro.pxTransform(570)}`}
              onClose={this.handleClose}
            >
              <View className='drawer-item'>
                <View className='drawer-item__options'>
                  {columnList.map((item, index) => {
                    return (
                      <View
                        className={classNames(
                          'drawer-item__options__item',
                          item.isChooseColumn ? 'drawer-item__options__checked' : ''
                        )}
                        // className='drawer-item__options__item'
                        style={
                          item.isChooseColumn
                            ? {
                              background: (colors && colors.data && colors.data[0].primary) || null
                            }
                            : {}
                        }
                        key={`${index}1`}
                        onClick={this.handleClickParmas.bind(this, item.id)}
                      >
                        {item.name}
                      </View>
                    )
                  })}
                  <View className='drawer-item__options__none'> </View>
                  <View className='drawer-item__options__none'> </View>
                  <View className='drawer-item__options__none'> </View>
                </View>
              </View>
              <View className='drawer-footer'>
                <Text
                  className='drawer-footer__btn'
                  onClick={this.handleClickSearchParams.bind(this, 'reset')}
                >
                  重置
                </Text>
                <Text
                  className='drawer-footer__btn drawer-footer__btn_active'
                  style={{ background: (colors && colors.data && colors.data[0].primary) || null }}
                  onClick={this.handleClickSearchParams.bind(this, 'submit')}
                >
                  确定
                </Text>
              </View>
            </AtDrawer>

            <ScrollView
              className='recommend-list__scroll'
              scrollY
              scrollTop={scrollTop}
              scrollWithAnimation
              onScroll={this.handleScroll}
              onScrollToLower={this.nextPage}
            >
              <View className='recommend-list recommend-list__type-grid'>
                {list.map((item) => {
                  return (
                    <View className='recommend-list__item'>
                      <RecommendItem
                        key={item.item_id}
                        info={item}
                        onClick={() => this.handleClickItem(item)}
                      />
                    </View>
                  )
                })}
              </View>
              {page.isLoading ? <Loading>正在加载...</Loading> : null}
              {!page.isLoading && !page.hasNext && !list.length && (
                <SpNote img='trades_empty.png'>暂无数据~</SpNote>
              )}
            </ScrollView>
          </>}

          {/* 鞋床故事 */}
          {page.isLoading ? <Loading></Loading> :
            <View className="recommend-content">
              <Video
                id="recommend-video"
                src={`${process.env.APP_IMAGE_CDN_NEW}/recommend/162S.mp4`}
                poster={`${process.env.APP_IMAGE_CDN_NEW}/recommend/poster.jpg`}
                initialTime={0}
                controls={play}
                autoplay={false}
                loop={false}
                // muted={true}
                showProgress={true}
                showFullscreenBtn={false}
                showPlayBtn={true}
                showCenterPlayBtn={false}
                enableProgressGesture={true}
                showMuteBtn
                objectFit="cover"
                style={{ width: "100%", height: "400rpx", marginTop: "20rpx" }}
                onPlay={() => {

                }}
                onEnded={() => {

                }}
                onClick={() => {
                  !play && this.handleVideoClick(true)
                }}
              />
              <View className="content-item">
                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/03.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/02.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/04.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/05.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/06.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/07.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/08.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
                <SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/09.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
              </View>
              <View className="content-btn" onClick={this.handleBackToIndex} >
                返回首页
              </View>
            </View>
          }

          {/* 活动部分 */}
          {/* {page.isLoading ? <Loading></Loading> :
            <View className="active-content">
              <Swiper
                className={classNames('swiper')}
                indicatorColor="#999"
                indicatorActiveColor="#333"
                current={currentIndex}
                interval={5000}
                duration={800}
                // indicatorDots
                circular
                autoplay={true}
                onChange={this.onSwiperChange}
              >
                {swiperList.map((item, index) => (
                  <SwiperItem key={index} className="" style={{ height: "100%" }}>
                    {item.type === "image" && (
                      <Image
                        src={item.src}
                        style={{ width: "100%", height: "100%", objectPosition: "center" }}
                        mode={'aspectFill'}
                        showMenuByLongpress={false}
                      />
                    )}
                    {item.type === "video" && (
                      <Video
                        id="video"
                        src={item.src}
                        poster={item.poster}
                        initialTime={0}
                        controls={false}
                        autoplay={true}
                        loop={true}
                        muted={true}
                        showProgress={false}
                        showFullscreenBtn={false}
                        showPlayBtn={false}
                        showCenterPlayBtn={false}
                        enableProgressGesture={false}
                        objectFit="cover"
                        style={{ width: "100%", height: "100%" }}
                        onPlay={() => {
                        }}
                        onEnded={() => {
                        }}
                      />
                    )}
                  </SwiperItem>
                ))}
              </Swiper>
              <View className="item-btns">
                <View className="item-tit">{activeInfo.activity_name}</View>
                {activeInfo.end_time * 1000 >= Date.now() && <View className="item-btn" onClick={this.handleApply}>
                  <View className="item-btn-txt">{activeInfo.total_count ? '已报名' : '活动申请'}</View>
                </View>}
              </View>
              <View className='spot-pagination'>
                {swiperList.map((_, index) => (
                  <View key={index} className={'spot-pagination-bullet ' + ((currentIndex == index) ? 'spot-pagination-bullet-active' : "")} style={{ width: 1 / swiperList.length * 100 + '%' }}></View>
                ))}
              </View>
            </View>
          } */}
          <BackToTop show={showBackToTop} onClick={this.scrollBackToTop} />

        </View>
      </SpPage>
    )
  }
}