import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Picker, ScrollView, Button } from '@tarojs/components'
import { getProjectList, techReject } from '../../utils/servers/servers';
import dayjs from 'dayjs';
import {
  AtSearchBar,
  AtTabs,
  AtTabsPane,
} from 'taro-ui';
import { clockState } from '../../utils/tools/config';

import './index.less';

import "taro-ui/dist/style/components/search-bar.scss";
import 'taro-ui/dist/style/components/tabs.scss';
import "taro-ui/dist/style/components/flex.scss";
import "taro-ui/dist/style/components/action-sheet.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/button.scss";

import MyList from './myList';

class Project extends Component {

  constructor(props) {
    super(props);
    this.state = {
      typeList: [
        { title: '全部', type: 1 },
        { title: '我创建', type: 2 },
        // { title: '我参与', type: 3 }
      ],
      current: 0,

      list: [],
      pageNum: 1,
      listState: 'LOADING',

    }
    this.getProjectList = this.getProjectList.bind(this);
    this.getMyList = this.getMyList.bind(this);
  }

  componentDidShow() {
    this.getProjectList();
  }

  async componentDidMount() {
    await this.getProjectList();
  }

  onPullDownRefresh() {
    this.getProjectList();
  }

  onReachBottom() {
    this.getProjectList(true);
  }

  onTabItemTap(obj) {
    if (obj.index === 1) {
      this.onTabTap();
    }
  }


  async onTabTap() {
    await this.getMyList(1);
  }

  async getProjectList(lv) {
    await this.getMyList(lv ? this.state.pageNum + 1 : 1);
    Taro.stopPullDownRefresh();
  }

  async getMyList(pageNum) {
    const { current } = this.state
    this.setState({
      listState: 'LOADING'
    })
    let data = {
      pageNum: pageNum,
      pageSize: 10,
      roleType: 0,
      name: this.state.searchValue || undefined,

    }
    for (let i in data) {
      if (!data[i] && data[i] != 0) {
        delete data[i]
      }
    }
    let msg = await getProjectList(data);
    if (msg.code === 200) {
      if (msg.total === 0) {
        this.setState({
          listState: 'NO_DATA'
        })
      } else if (msg.total === this.state.list.length && pageNum !== 1) {
        !this.state.isOpen && Taro.showToast({ title: '没有更多数据了', icon: 'none' });
        this.setState({
          listState: 'NO_MORE_DATA'
        })
      } else {
        if (msg.total === (pageNum === 1 ? msg.rows : this.state.list.concat(msg.rows)).length) {
          this.setState({
            listState: 'NO_MORE_DATA'
          })
        }
      }
      this.setState({
        list: pageNum === 1 ? msg.rows : this.state.list.concat(msg.rows),
        pageNum: msg.rows.length === 0 ? this.state.pageNum : msg.next - 1
      })
    } else {
      Taro.showToast({ title: msg.msg, icon: 'none' });
      this.setState({
        // listState: msg.error[0].field === '403' ? 'NO_DATA' : 'RELOAD'
      })
    }
    Taro.stopPullDownRefresh();
  }

  onPageScroll(event) {
    let touchMove = event.scrollTop;
    if (touchMove >= 37) {
      this.setState({
        openSearch: true
      })
    } else {
      this.setState({
        openSearch: false
      })
    }
  }

  // submit() {
  //   if (!this.state.rmk) {
  //     Taro.showToast({ title: '请填写备注！', icon: 'none' });
  //     return
  //   }
  //   Taro.showLoading({ title: '正在提交...' });
  //   techReject({
  //     id: this.state.id,
  //     remarks: this.state.rmk,
  //   }).then(v => {
  //     Taro.hideLoading()
  //     if (v.error.length === 0) {
  //       Taro.showToast({ title: '提交成功', icon: 'none' });
  //       this.getProjectList();
  //       this.setState({
  //         isOpen: false,
  //         rmk: "",
  //       })
  //     } else {
  //       Taro.showToast({ title: v.error[0].message, icon: 'none' })
  //     }
  //   }).catch(() => {
  //     Taro.hideLoading()
  //     Taro.showToast({
  //       title: '系统错误,请稍后再试',
  //       icon: 'none'
  //     })
  //   })
  // }

  render() {
    return (
      <View className='indexPage' >
        <View className='searchContent'>
          <View className='searchTop'>
            <AtSearchBar
              showActionButton
              placeholder='请输项目名称'
              value={this.state.searchValue}
              onActionClick={() => {
                this.getProjectList();
              }}
              onChange={(value) => {
                this.setState({
                  searchValue: value
                })
              }}
              onClear={() => {
                this.setState({
                  searchValue: ''
                })
              }}
            />
          </View>
          {/* <View className='searchBottom'>
            <View className='searchAdd' style={{ paddingLeft: '5px' }}
              onClick={() => {
                this.setState({
                  isOpen: true
                })
              }}
            >
              + 创建新项目
            </View>
          </View> */}
        </View>
        <AtTabs
          swipeable={false}
          current={this.state.current || 0}
          tabList={this.state.typeList}
          onClick={(current) => {
            this.setState({
              list: [],
              pageNum: 1,
              current,
            }, () => {
              this.getProjectList();
            })
          }}>
          {
            this.state.typeList?.map((item, index) =>
              <AtTabsPane
                current={this.state.current}
                index={index}
              >
                <MyList
                  title={item.title}
                  typelist={this.state.typeList}
                  seeView={this.state.current}
                  list={this.state.list}
                  listState={this.state.listState}
                  onRefresh={() => {
                    this.getProjectList(true);
                  }}
                />
              </AtTabsPane>
            )
          }
        </AtTabs>
      </View>
    )
  }
}

export default Project
