import Taro, { Component } from '@tarojs/taro'
import { View, Radio, Button } from '@tarojs/components'
import { AtInput, Text, AtIcon, Picker, Image, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'

import URL from '../../serviceAPI.config'


import './myGoodList.scss'
import loginExpired from '../../util/loginExpired';


class MyGoodList extends Component {
  config = {
    navigationBarTitleText: '商品列表'
  }
  constructor() {
    super(...arguments)
    this.state = {
      productName: '',
      lowestPrice: '',
      heightestPrice: '',
      minimumSold: '',
      maximumSold: '',
      order: '',// 商品列表排序参数
      productId: '',// 商品编号参数
      productCate: [], //宝贝类目
      productCateSelected: { id: '', name: '全部类目' },// 已选宝贝类目
      filterBar: ['filterPrice', 'filterStock', 'filterSold', 'filterPublishDate',], //筛选选项
      filterBarKeys: { filterPrice: '价格', filterStock: '库存', filterSold: '总销量', filterPublishDate: '发布时间' }, // 筛选选项对应值
      filterOptions: {
        filterPrice: false,
        filterStock: false,
        filterSold: false,
        filterPublishDate: false,
      }, // 正反排序
      selectedFilterValue: 0,   //
      myGoodList: [],// 保存后台返回的商品列表
      myGoodListTotal: '0',// 后台的商品总数 
      goodsStateParam: 1,//商品状态参数
      pageCountParam: 20,// 商品数量参数
      currPageParam: 1,// 当前页面 参数
      isCheckAll: false,// 是否checked
      goodsIdList: [],//商品Id 列表
      isOpenDeleteModal: false,// 是否显示删除模态框
      isOpenOffStockModal: false,// 是否显示下架模态框
      isAddToList: false,// 是否下拉加载 如果是 就添加商品到我的商品列表
      isShowTopNav: false,// 是否显示返回顶部按钮
    }
  }


  productNameChange(event) {
    this.setState({ productName: event })
  }
  productIdChange(event) {
    this.setState({ productId: event })
  }
  lowestPriceChange(event) {
    this.setState({ lowestPrice: event })
  }
  heightestPriceChange(event) {
    this.setState({ heightestPrice: event })
  }
  minimumSoldChange(event) {
    this.setState({ minimumSold: event })
  }
  maximumSoldChange(event) {
    this.setState({ maximumSold: event })
  }
  productCateChange = e => {
    this.setState({
      productCateSelected: this.state.productCate[e.detail.value]
    })
  }
  //获取宝贝类目搜索列表接口api
  getBaoBeiCateList() {
    Taro.request({
      url: URL.BaoBeiCateList,
      method: 'POST',
      dataType: 'json',

      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      console.log('宝贝类目',res)
      if (res.data.err_code != 10) {
        const productCate = [{ name: '全部类目', id: '' }]
        for (let item of res.data.goodsClass) {
          productCate.push({ name: item.class_name, id: item.class_id })
        }
        this.setState({ productCate: productCate })
      } else {
        Taro.showToast({
          title: res.data.err_msg,
          icon: 'none',
          duration: 1500,
        })
      }
    })
  }

  // 获取我的商品列表接口api
  getMyGoodListApi({
    goodsName = this.state.productName,
    goodsSn = this.state.productId,
    goodsClass = this.state.productCateSelected.id,
    goodsPriceL = this.state.lowestPrice,
    goodsPriceU = this.state.heightestPrice,
    goodsSalesL = this.state.minimumSold,
    goodsSalesU = this.state.maximumSold,
    goodsState = this.state.goodsStateParam,
    pageCount = this.state.pageCountParam,
    currPage = this.state.currPageParam,
    order = this.state.order,
  }) {
    Taro.request({
      url: URL.MyGoodList,
      method: 'POST',
      dataType: 'json',
      data: {
        goodsName: goodsName,
        goodsSn: goodsSn,
        goodsClass: goodsClass,
        goodsPriceL: goodsPriceL,
        goodsPriceU: goodsPriceU,
        goodsSalesL: goodsSalesL,
        goodsSalesU: goodsSalesU,
        goodsState: goodsState,
        pageCount: pageCount,
        currPage: currPage,
        order: order
      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      const data = JSON.parse(res.data)
      if (data.err_code != 10) {
        console.log('我的商品列表', JSON.parse(res.data))
        
        Taro.hideLoading()
        if (data.goodsCount != '0' && data.goods.length) {
          data.goods.forEach(item => {
            item.checked = false
          });
          if (this.state.isAddToList) {
            this.setState({ myGoodList: this.state.myGoodList.concat(data.goods) }, () => {
              this.setState({ isAddToList: false })
            })
          } else {
            this.setState({
              myGoodList: data.goods,
              myGoodListTotal: data.goodsCount
            })
          }
        } else {
          if (data.goods === null) {
            this.setState({
              myGoodList: [],
              myGoodListTotal: data.goodsCount
            })
          } else {
            this.setState({ isAddToList: false })
            Taro.showToast({
              title: '没有更多了',
              icon: 'none'
            })
          }
        }
      } else {
        Taro.showToast({
          title: data.err_msg,
          icon: 'none'
        })
      }
    })

  }
  // 获取搜索结果api
  // getMyGoodListApi({
  //   goodsName = this.state.productName,
  //   goodsSn = '',
  //   goodsClass = this.state.productCateSelected.id,
  //   goodsPriceL = this.state.lowestPrice,
  //   goodsPriceU = this.state.heightestPrice,
  //   goodsSalesL = this.state.minimumSold,
  //   goodsSalesU = this.state.maximumSold,
  //   shopClassID = this.state.productId,
  //   goodsState = this.state.goodsStateParam,
  //   pageCount = this.state.pageCountParam,
  //   currPage = this.state.currPageParam,
  //   order = '', }) {
  //   Taro.request({
  //     url: URL.MyGoodList,
  //     method: 'POST',
  //     dataType: 'json',

  //     data: {
  //       goodsName: goodsName,
  //       goodsSn: goodsSn,
  //       goodsClass: goodsClass,
  //       goodsPriceL: goodsPriceL,
  //       goodsPriceU: goodsPriceU,
  //       goodsSalesL: goodsSalesL,
  //       goodsSalesU: goodsSalesU,
  //       shopClassID: shopClassID,
  //       goodsState: goodsState,
  //       pageCount: pageCount,
  //       currPage: currPage,
  //       order: order
  //     },
  //     header: {
  //       'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
  //       'content-type': 'application/x-www-form-urlencoded',
  //       'X-Requested-With': 'XMLHttpRequest'
  //     }
  //   }).then(res => {
  //     if (res.statusCode === 200) {
  //       console.log('我的商品列表', JSON.parse(res.data))
  //       const data = JSON.parse(res.data)
  //       const goodCount = Number(data.goodsCount)
  //       this.setState({
  //         myGoodList: data.goods,
  //         myGoodListTotal: goodCount
  //       })
  //       Taro.hideLoading()

  //     } else {
  //       console.log('我的商品列表获取失败')
  //     }


  //   })

  // }

  // 商品列表下架API 
  changeGoodState({ goodsState = 0, goodsID = this.state.goodsIdList }) {
    Taro.request({
      url: URL.ChangeGoodState,
      method: 'POST',
      dataType: 'json',

      data: {
        goodsState: goodsState,
        goodsID: JSON.stringify(goodsID)
      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      let responseData = JSON.parse(res.data)
      if (responseData.err_code === 0) {
        this.setState({
          isCheckAll: false,
          currPageParam: 1,

        }, () => {
          this.getMyGoodListApi({})
          Taro.showToast({
            title: '下架成功',
            icon: 'success',
            duration: 1500
          })
        })
      }else if (responseData.err_code === 88888) {
        loginExpired(res)
    } else {
        Taro.showToast({
          title: responseData.err_msg,
          icon: 'none',
          duration: 1500
        })
        this.setState({ isCheckAll: false })
      }


    })

  }
  // 商品列表删除api
  deleteGood({ goodsState = 1, goodsID = this.state.goodsIdList }) {
    Taro.request({
      url: URL.DeleteGood,
      method: 'POST',
      dataType: 'json',

      data: {
        goodsState: goodsState,
        goodsID: JSON.stringify(goodsID)
      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      let responseData = JSON.parse(res.data)
      if (responseData.err_code === 0) {
        Taro.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        }).then(() => {
          this.setState({ isCheckAll: false, currPageParam: 1 },()=>{
            this.getMyGoodListApi({})
          })
        
        })
      }else if (responseData.err_code === 88888) {
        loginExpired(res)
    } else {
        Taro.showToast({
          title: responseData.err_msg,
          icon: 'none',
          duration: 1500
        })
        this.setState({ isCheckAll: false })
      }



    })

  }




  // 搜索
  searchButtonHandler() {
    Taro.showLoading({
      title: '加载中',
    })
    this.setState({ currPageParam: 1, isCheckAll: false, order: '' }, () => {
      this.getMyGoodListApi({})
    })
  }


  // 清空搜索
  emptyButtonHanlder() {
    this.setState({
      isCheckAll: false,
      currPageParam: 1,
      productName: '',
      lowestPrice: '',
      heightestPrice: '',
      minimumSold: '',
      maximumSold: '',
      productId: '',
      productCateSelected: { id: '', name: '全部类目' },
      order: '',
    }, () => {
      this.getMyGoodListApi({})
      Taro.showToast({
        title: '已清空',
        icon: 'success',
        duration: 1000
      })
    })

  }
  // 产品排序
  accendingDescending(value) {
    this.setState({ selectedFilterValue: value })
    if (value == 0) {
      this.setState({
        currPageParam: 1,
        filterOptions: {
          filterPrice: !this.state.filterOptions.filterPrice,
          filterStock: false,
          filterSold: false,
          filterPublishDate: false,
        }
      }, () => {
        this.state.filterOptions.filterPrice ? this.setState({ order: "goods_price" }, () => {
          this.getMyGoodListApi({})
        }) : this.setState({ order: "goods_price desc" }, () => {
          this.getMyGoodListApi({})
        })


      })
    }
    if (value == 1) {
      this.setState({
        currPageParam: 1,
        filterOptions: {
          filterPrice: false,
          filterStock: !this.state.filterOptions.filterStock,
          filterSold: false,
          filterPublishDate: false,
        }
      }, () => {
        this.state.filterOptions.filterStock ? this.setState({ order: "goods_stock" }, () => {
          this.getMyGoodListApi({})
        }) : this.setState({ order: "goods_stock desc" }, () => {
          this.getMyGoodListApi({})
        })
      }
      )
    }
    if (value == 2) {
      this.setState({
        currPageParam: 1,
        filterOptions: {
          filterPrice: false,
          filterStock: false,
          filterSold: !this.state.filterOptions.filterSold,
          filterPublishDate: false,

        }
      }, () => {
        this.state.filterOptions.filterSold ? this.setState({ order: "sales_volume " }, () => {
          this.getMyGoodListApi({})
        }) : this.setState({ order: "sales_volume desc" }, () => {
          this.getMyGoodListApi({})
        })
      }

      )
    }
    if (value == 3) {
      this.setState({
        currPageParam: 1,
        filterOptions: {
          filterPrice: false,
          filterStock: false,
          filterSold: false,
          filterPublishDate: !this.state.filterOptions.filterPublishDate,

        }
      }, () => {
        this.state.filterOptions.filterPublishDate ? this.setState({ order: "update_date desc" }, () => {
          this.getMyGoodListApi({})
        }) : this.setState({ order: "update_date" }, () => {
          this.getMyGoodListApi({})
        })
      }
      )
    }
  }


  // 商品全部选择
  checkAllHandler() {
    if (this.state.myGoodList.length) {
      const newMyGoodList = this.state.myGoodList.map((item) => {
        item.checked = !this.state.isCheckAll
        return item
      })
      this.setState({ isCheckAll: !this.state.isCheckAll, myGoodList: newMyGoodList }, () => {
        console.log('全选列表', this.state.myGoodList)
      })
    }
    else {
      this.setState({
        isCheckAll: true
      }, () => {
        this.setState({ isCheckAll: false })
      })
      Taro.showToast({
        title: '全选无效',
        icon: 'none',
        duration: 1500
      }).then(() => {

      })

    }
  }


  // 单个商品选择
  handleCheckChange(Id) {
    //如果goodid 一样的那么checked 就取反
    const newMyGoodList = this.state.myGoodList.map((item) => {
      if (item.goods_id === Id) {
        item.checked = !item.checked
      }
      return item
    })
    this.setState({ myGoodList: newMyGoodList })
  }
  // 删除商品
  deleteGoodsHandler() {
    const checkedGoodsId = []
    this.state.myGoodList.forEach(item => {
      if (item.checked) {
        checkedGoodsId.push(item.goods_id)
      }
    });
    checkedGoodsId.length ? this.setState({ isOpenDeleteModal: true }) : Taro.showToast({
      title: '请选择要删除的商品',
      icon: 'none',
      duration: 1500
    })
    // // this.deleteGood({ goodsID: checkedGoodsId })



  }
  // 改变商品状态
  offStockGoodHandler() {
    const checkedGoodsId = []
    this.state.myGoodList.forEach(item => {
      if (item.checked) {
        checkedGoodsId.push(item.goods_id)
      }
    });
    //this.changeGoodState({ goodsID: checkedGoodsId })
    checkedGoodsId.length ? this.setState({ isOpenOffStockModal: true }) : Taro.showToast({
      title: '请选择要下架的商品',
      icon: 'none',
      duration: 1500
    })
  }
  // 导航到商品编辑页面myGoodsEdit
  goToGoodEditPage(goodId) {
    Taro.navigateTo({
      url: '/pages/myGoodsEdit/myGoodsEdit?id=' + goodId
    })
  }
  // 导航到商品发布页面

  goToGoodsPublishPage() {
    Taro.switchTab({
      url: '/pages/goodsPublish/goodsPublish'
    })
  }
  goToGoodspage(goodId) {
    Taro.navigateTo({
      url: '/pages/goods/goods?id=' + goodId
    })
  }

  DeleteConfirm() {
    this.setState({
      isOpenDeleteModal: false
    })
    const checkedGoodsId = []
    this.state.myGoodList.forEach(item => {
      if (item.checked) {
        checkedGoodsId.push(item.goods_id)
      }
    });
    this.deleteGood({ goodsID: checkedGoodsId })
  }
  deleteModalClose() {
    this.setState({
      isOpenDeleteModal: false
    })
  }
  OffStockConfirm() {

    this.setState({
      isOpenOffStockModal: false
    })
    const checkedGoodsId = []
    this.state.myGoodList.forEach(item => {
      if (item.checked) {
        checkedGoodsId.push(item.goods_id)
      }
    });
    this.changeGoodState({ goodsID: checkedGoodsId })
  }
  offStockModalClose() {
    this.setState({
      isOpenOffStockModal: false
    })
  }

  componentDidMount() {
    Taro.showLoading({
      title: '加载中'
    })
    this.getMyGoodListApi({})
    this.getBaoBeiCateList()
  }
  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() {

  }

  componentDidHide() { }
  // 页面位置
  onPageScroll(location) {
    if (location.scrollTop <= 300 && this.state.isShowTopNav) {
      this.setState({ isShowTopNav: false })
    } else if (location.scrollTop > 300 && !this.state.isShowTopNav) {
      this.setState({ isShowTopNav: true })
    }
  }
  // 底部加载
  onReachBottom() {
    Taro.showLoading({
      title: '加载中'
    })
    this.setState({ isAddToList: true, currPageParam: this.state.currPageParam + 1 }, () => {
      this.getMyGoodListApi({})
    })


  }

  render() {


    //等待接口数据  
    const goodListElementArray = this.state.myGoodList.map((item, index) => {
      return <View key={index} className='good-container'>
        <View className='good-container-a'>
          <Radio className='radio' value={item.goods_id} checked={item.checked} onClick={this.handleCheckChange.bind(this, item.goods_id)} ></Radio>
          <View className='img-box' onClick={this.goToGoodspage.bind(this, item.goods_id)}>
            {/* <Image mode='aspectFit' className='img' style='height:50px;width:50px' src={URL.Base + item.goods_url} /> */}
            <Image className='img' style='height:100%;width:100%' src={URL.Base + item.goods_url} />
          </View>
          <View className='name-box' onClick={this.goToGoodspage.bind(this, item.goods_id)} >{item.goods_name}</View>
          <View className='price-box'>￥{item.goods_price}</View>
          <View className='quantity-box'>{item.sales_volume}</View>

        </View>

        <View className='button-box1' onClick={this.goToGoodEditPage.bind(this, item.goods_id)}>
          <Button className='button-orange' size='mini'>
            编辑商品</Button>
        </View>
      </View>
    })
    // 筛选项目排序element
    const filterElementsArray = this.state.filterBar.map((item, index) => {
      let isTure = this.state.filterOptions[item]

      return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index === this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
        <Text className='text-a'>
          {this.state.filterBarKeys[item]}
        </Text>
        {isTure ? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>}
      </View>
    })
    // 删除提示模态弹窗element
    const modalMessageDeleteElement = <AtModal isOpened={this.state.isOpenDeleteModal}>
      <AtModalHeader>提示</AtModalHeader>
      <AtModalContent>
        确定要删除已选商品？
 </AtModalContent>
      <AtModalAction> <Button onClick={this.deleteModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.DeleteConfirm.bind(this)}>确定</Button> </AtModalAction>
    </AtModal>
    // 下架提示模态弹窗element
    const modalMessageOffStockElement = <AtModal isOpened={this.state.isOpenOffStockModal}>
      <AtModalHeader>提示</AtModalHeader>
      <AtModalContent>
        确定要下架已选商品？
 </AtModalContent>
      <AtModalAction> <Button onClick={this.offStockModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.OffStockConfirm.bind(this)}>确定</Button> </AtModalAction>
    </AtModal>

    return (
      <View className='MyGoodList'>
        {/* 删除模态提示框 */}
        {modalMessageDeleteElement}
        {/* 下架模态框提示 */}
        {modalMessageOffStockElement}

        <View className='border-box'>
          <AtInput
            name='value'
            title='宝贝名称：'
            placeholder='宝贝名称'
            type='text'
            value={this.state.productName}
            onChange={this.productNameChange.bind(this)}
            border={false}
          />
        </View>
        <View className='border-box'>
          <AtInput
            name='value'
            title='最低价：'
            className='input'

            type='number'
            value={this.state.lowestPrice}
            onChange={this.lowestPriceChange.bind(this)}
            border={false}
          />
          <AtInput
            name='value'
            title='最高价：'
            className='input'
            type='number'
            value={this.state.heightestPrice}
            border={false}
            onChange={this.heightestPriceChange.bind(this)}
          />
        </View>
        <View className='border-box'>
          <AtInput
            name='value'
            title='最低销量：'
            className='input'
            type='number'
            value={this.state.minimumSold}
            border={false}
            onChange={this.minimumSoldChange.bind(this)}
          />
          <AtInput
            name='value'
            title='最高销量：'
            className='input'
            type='number'
            value={this.state.maximumSold}
            border={false}
            onChange={this.maximumSoldChange.bind(this)}
          />
        </View>

        <View className='border-box'>
          <AtInput
            border={false}
            name='value'
            title='商品编码：'
            type='number'
            value={this.state.productId}
            onChange={this.productIdChange.bind(this)}
            border={false}
          />
        </View>
        <View className='page-section'>
          <Picker mode='selector' rangeKey='name' range={this.state.productCate} onChange={this.productCateChange.bind(this)}>
            <View className='picker'>
              <View className='title-box'>
                <Text className='title'>宝贝类目:</Text>

                <Text className='selected'>{this.state.productCateSelected.name}</Text>
              </View>

            </View>
          </Picker>
        </View>
        <View className='button-box'>
          <View className='button' onClick={this.searchButtonHandler.bind(this)}>
            <Button size='mini' className='button-orange'>
              <AtIcon value='search' size='12' color='white'></AtIcon>
              搜索</Button>
          </View>
          <View className='button' onClick={this.goToGoodsPublishPage.bind(this)}>
            <Button className='button-green' size='mini'>
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</Button>
          </View>
          <View className='button' onClick={this.emptyButtonHanlder.bind(this)}>
            <Button className='button-dark-red' size='mini'>

              <AtIcon value='trash' size='12' color='white'></AtIcon>
              清空条件</Button>
          </View>
        </View>
        <View className='text'>
          <Text>出售中的宝贝{this.state.myGoodListTotal}条记录</Text>
        </View>
        <View className='filterbar-container'>
          <View className='filter-bar'>
            {filterElementsArray}

          </View>
          <View className='sub-filter'>
            <Radio className='radio' checked={this.state.isCheckAll} onClick={this.checkAllHandler.bind(this)}>全选</Radio>
            <View className='button' onClick={this.deleteGoodsHandler.bind(this)}>
              <Button size='mini' className='button-dark-red'>
                删除</Button>
            </View>
            <View className='button' onClick={this.offStockGoodHandler.bind(this)}>
              <Button size='mini' className='button-blue'>
                下架</Button>
            </View>
          </View>
        </View>
        {this.state.myGoodList.length ? <View className='mygoodlist-container'>
          {goodListElementArray}
        </View > : <View className='no-more-title'> 没有更多了</View>}
        {this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}



        <CopyrightComponent></CopyrightComponent>
      </View>
    )
  }
}

export default MyGoodList