import React, { Component } from 'react'
import { config, request, permission, util } from 'utils'
import { connect } from 'dva';
import { SearchBar, Modal, Menu , ActionSheet, WingBlank, WhiteSpace, Button, Toast} from 'antd-mobile';
import router from 'umi/router';
import { StickyContainer, Sticky } from 'react-sticky';
import styles from './index.less';
const { APIV3, WXMpAPI } = config
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
class ClassPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      clicked: '全部科室',
      clicked_2:"全部分类",
      data:[],
      searchText:"",
      columnId:"",
      classData:[],
      searchvalue:""
    }
  }
  componentDidMount() {
    console.log("入口页");
    this.setState({
      columnId:this.props.location.query.columnId,
      searchText:this.props.location.query.searchText,
    },()=>{

      if(this.state.searchText!==undefined){
        this.requestData(false,false,false,this.state.searchText)
        console.log(this.state.searchText);
      }else{
        this.requestData(true);
      }
        this.requestDepmentData();
        this.requestClassData();
    })

  }
  //查询全部科室
  requestDepmentData=()=>{
    let self = this
    let {columnId} = this.state
    let list ={
    "pageIndex":1,
    "pageSize":10,
    "filters": [
        {
            "field": "column_id",
            "operate": "equal",
            "value": columnId
        }
    ],
}
        request({
            url: WXMpAPI + '/wx/content/department/queryDepartmentsByColumnId',
            method: "post",
            data: list
        }).then(function (getListRes) {
            if (getListRes.success == 1) {
              self .setState({
                depmentdata:getListRes.items
              })
            }
            console.log(getListRes.items);
        });

  }
  //获取分类数据
requestClassData=()=>{

  let self= this 
  let {columnId} = this.state
  let list ={
        "pageIndex":1,
        "pageSize":10,
        "filters": [
            {
                "field": "classification_column_id",
                "operate": "equal",
                "value":columnId
            }
    ],
    }
      request({
          url: WXMpAPI + '/wx/content/classification/queryAllClassifications',
          method: "post",
          data: list
      }).then(function (getListRes) {
          if (getListRes.success == 1) {
            self.setState({
              classData:getListRes.items
            })
          }
          console.log(getListRes.items);
      });

}
  //初始页面
  requestData=(start,reqClass,reqDepart,reqSearch,reqCancle) => {
    let self = this
    let {columnId} =  this.state
    let list 
    if(start){
      list = {
      "pageIndex":1,
      "pageSize":10,
      }
    }else if(reqSearch){
      list = {
            "pageIndex":1,
            "pageSize":10,
            "filters": [
                {
                    "field": "article_title",
                    "operate": "contains",
                    "value": reqSearch
                }
            ],
        }
      
    }else if(reqDepart){
       list = {
          "pageIndex":1,
            "pageSize":10,
            "filters": [
                {
                    "field": "department_id",
                    "operate": "contains",
                    "value": reqDepart
                },
            ],
       }
             
    }else if(reqClass){
        list  ={
              "pageIndex":1,
              "pageSize":10,
              "filters": [
                  {
                      "field": "classification_column_id",
                      "operate": "contains",
                      "value": reqClass
                  },
            
              ],
          }
      }else if(reqCancle){
        list = {
              "pageIndex":1,
              "pageSize":10,
              "filters": [
                  {
                      "field": "classification_column_id",
                      "operate": "contains",
                      "value": ""
                  },
            
              ],
          }
      }

      console.log(list);
        request({
            url: WXMpAPI + '/wx/content/article/queryArticlesFront',
            method: "post",
            data: list
        }).then(function (getListRes) {
            if (getListRes.success == 1) {
              self .setState({
                data:getListRes.items
              })
              console.log(getListRes.items);
            }
        });
  }

  onSubmitSearch=()=>{
    let value = this.state.searchvalue
    this.requestData(false,false,false,value)
  }
  //全部科室
  showActionSheet = () => {
    // const BUTTONS = ['Operation1', 'Operation2', 'Operation2', 'Cancel'];
    //返回名字
    const  BUTTONS = this.state.depmentdata.map((item,index)=>{
      return  item.departmentName
    })
    let self = this
    BUTTONS.push("取消")
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      // destructiveButtonIndex: BUTTONS.length - 2,
      // title: 'title',
      // message: 'I am description, description, description',
      maskClosable: true,
      'data-seed': 'logId',
      wrapProps,
    },
    (buttonIndex) => {
      if(buttonIndex>=BUTTONS.length-1){
        this.requestData(false,false,false,false,true)
        return  
     }
      this.setState({ clicked: BUTTONS[buttonIndex] });
      var departId = this.state.depmentdata[buttonIndex].departmentParentid
      self.requestData(false,false,departId)
    });

  }
  //全部分类
  showActionSheet_2 = () => {
    let self = this
    // const BUTTONS = ['Operation1', 'Operation2', 'Operation2', 'Cancel'];
    const BUTTONS = this.state.classData.map((item,index)=>{
      return item.classificationName
    })
    BUTTONS.push("取消")
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      // destructiveButtonIndex: BUTTONS.length - 2,
      // title: 'title',
      // message: 'I am description, description, description',
      maskClosable: true,
      'data-seed': 'logId',
      wrapProps,
    },
    (buttonIndex) => {
      if(buttonIndex>=BUTTONS.length-1){
        this.requestData(false,false,false,false,true)
         return  
      }
      this.setState({ clicked_2: BUTTONS[buttonIndex] });
      var classId = this.state.classData[buttonIndex].classificationColumnId
      self.requestData(false,false,classId)
    });
  }
  onCancel=()=>{
    this.setState({
      searchvalue:""
    })
    // this.requestData(false,false,false,false,true)
  }
  render() {
    return (
      <div className='search_cart'>
        <div className="search">
          <div className="search-input">
            <SearchBar
             enterButton="搜索" size="large"
             value={this.state.searchvalue}
             onSubmit={(value)=>this.onSubmitSearch(value)}
             onChange= {(value)=>{
               this.setState({
                searchvalue:value
               })
             }}
             onCancel={this.onCancel} />
          </div>
        </div>
        <WingBlank style={{display:'flex'}}>
    <Button onClick={this.showActionSheet} >{this.state.clicked}</Button>
    <Button onClick={this.showActionSheet_2} style={{marginLeft:"15px"}}>{this.state.clicked_2}</Button>
    </WingBlank>
    <div className="shop" style={{marginTop:"20px"}}>
      {
        this.state.data.length<=0?<p style={{textAlign:"center"}}>没有更多了</p>: this.state.data.map((item,index)=>{
          return(
            <div className="shopItem" onClick={() => router.push({pathname:'/detail',query:{Id:item.articleId}})}>
            <img src={item.articlePhotoaddress} />
            <div>
          <p className="shop_title">{item.articleTitle}</p>
          <p className="shop_message">{item.articleSummary}</p>
            </div>
          </div>
          )
        })
      }
    </div>
      </div>
    )
  }
}


export default ClassPage;
