/**
 * 流程
 */
import { CloudUploadOutlined, DiffOutlined, UserOutlined } from "@ant-design/icons";
import { Empty, Input, Tabs } from "antd";
import { debounce } from "lodash";
import React from "react";
import { Icon } from "../components/icons";
import { Renderer, RendererProps } from '../factory';
import { Api } from "../types";
import { isMobile } from "../utils/helper";
import MobileProcess from "./Lion/MobileProcess";
import FlowFileAsk from "./Lion/MobileProcess/components/FlowFileAsk";
import { FlowingJson, FlowSun } from "./Lion/Mobileprocess/type";

interface FlowingProps extends RendererProps {
  type: "flowing",
  // 已申请
  applyItem: FlowingJson;
  // 已审批
  doneItem: FlowingJson;
  // 待审批
  todoItem: FlowingJson;
  // 操作按钮
  actionsApi: Api
  // 获取当前操作数量
  flowCountApi: Api
  //  获取当前退回的节点
  returnNodeApi: Api
  // 上传附件
  attachmentUploadApi: Api
  // 附件下载Api
  attachmentDownloadApi: Api
  // 删除附件
  attachmentDeleteApi: Api
  // 删除当前Taskid中所有附件
  attachmentDeleteByTaskApi: Api
  // 附件获取任务Api
  attachmentGetTaskApi: Api
  //获取用户通讯录
  addrBookApi: Api
}
interface FlowingCodeState {
  statistics: number
  iptVal: string
  tabsVal: string
  approve: string
  contextval: FlowSun[]
}

interface FlowCode {
  count: number,
  name: string,
  title: string,
}
class FlowingCode extends React.Component<FlowingProps, FlowingCodeState> {

  constructor(props: FlowingProps) {
    super(props)
    this.state = {
      statistics: 0,
      iptVal: '',
      tabsVal: "发起申请",
      approve: 'todoItem',
      contextval: []
    }
  }
  componentDidMount() {
    this.handleChange()
  }

  handleChange = async () => {
    const { env, flowCountApi } = this.props
    const res = await env.fetcher(flowCountApi)
    if (res.status == 0) {
      this.handleContent(res.data.items)
    }
  }


  handleContenticon = (val: string) => {
    switch (val) {
      case 'applyItem':
        return <Icon icon={"Initiated-file"} className="icon" />
      case 'todoItem':
        return <Icon icon={"pending-documents"} className="icon" />
      case 'doneItem':
        return <Icon icon={"processed-file"} className="icon" />
      default:
        return <Icon icon={"documents-received"} className="icon" />
    }
  }
  handleContent = (val: any) => {
    const date = val.map((item: FlowCode) => {
      return {
        name: item.name,
        count: item.count,
        title: item.title,
        key: item.name == "receivedItem" ? '我收到的' : item.name,
        icon: this.handleContenticon(item.name),
        hierarchy: item.name == "applyItem" ? 0 : 1,
        data: item.name == "applyItem" ? item.name : '我审批的',
      }
    })
    this.setState({ contextval: date })
  }



  handleStatistics = (val: number) => {
    this.setState({ statistics: val })
  }

  getContactsSeek = async (val: string) => {

  }

  // 防抖
  handleSearch = debounce((value: string) => {
    this.getContactsSeek(value)
  }, 1000)


  handleOnClickFather = (value: string, hierarchy: number, data: string,) => {
    if (hierarchy == 0) {
      this.setState({ tabsVal: data })
    } else {
      this.setState({ tabsVal: data, approve: value })
    }
  }




  render() {
    const {
      classnames: cx,
      env,
      render,
      applyItem,
      doneItem,
      todoItem,
      actionsApi,
      onImageEnlarge,
      returnNodeApi,
      addrBookApi,
      attachmentUploadApi,
      attachmentDownloadApi,
      attachmentDeleteApi,
      attachmentDeleteByTaskApi,
      attachmentGetTaskApi
    } = this.props;
    const { statistics, tabsVal, approve, contextval } = this.state

    const attachmentApi = {
      attachmentUploadApi,
      attachmentDownloadApi,
      attachmentDeleteApi,
      attachmentDeleteByTaskApi,
      attachmentGetTaskApi,
      addrBookApi
    }
    return (
      <div className={cx("Process", {
        "Process_color": !isMobile(),
        "Process_height": isMobile() && tabsVal !== "发起申请"
      })} >
        {isMobile() && tabsVal !== "发起申请" && < div className='contacts-title-input'>
          {/* 输入框 */}
          <Input
            placeholder='搜索人名、标题、内容'
            onChange={(e) => this.handleSearch(e.target.value)}
            bordered={false}
          />
        </div>}
        {/* 一级 */}
        <Tabs
          centered={true}
          onTabClick={(key) => {
            this.setState({ tabsVal: key })
          }}
          className={cx("Process-tabs", { 'Process-tabs-title': isMobile(), 'ant-tabs-bottom': isMobile() })}
          animated={false}
          tabPosition={isMobile() ? "bottom" : "top"}
          activeKey={tabsVal}
        >

          <Tabs.TabPane
            tab={<span> {isMobile() && <DiffOutlined />}发起申请</span>}
            key={'发起申请'}
            className={cx("Process-tabs-tabPane")}>

            <FlowFileAsk
              env={env}
              render={render}
              actionsApi={actionsApi}
              contextval={contextval}
              handleOnClickFather={this.handleOnClickFather}
              handleOnChange={this.handleChange}
            />
            {/* <Empty className='Empty' description={<span>暂无待审批</span>} /> */}
          </Tabs.TabPane>

          <Tabs.TabPane
            tab={<span>{isMobile() && <UserOutlined />}我审批的</span>}
            key={'我审批的'}
            className={cx("Process-tabs-tabPane")} >

            {/* 二级 */}
            <Tabs centered={true} className={cx("Process-tabs")}
              onTabClick={(key) => {
                this.setState({ approve: key })
              }}
              activeKey={approve}
            >
              <Tabs.TabPane
                tab={todoItem.title + `${statistics !== 0 ? ' · ' + statistics : ''}`}
                key={'todoItem'}
                className={cx("Process-tabs-tabPane")}

              >
                <MobileProcess
                  key={todoItem.title}
                  env={env}
                  val={todoItem}
                  render={render}
                  title={'todoItem'}
                  handleStatistics={this.handleStatistics}
                  handleOnChange={this.handleChange}
                  onImageEnlarge={onImageEnlarge}
                  returnNodeApi={returnNodeApi}
                  attachmentApi={attachmentApi}
                />
              </Tabs.TabPane>

              <Tabs.TabPane
                tab={doneItem.title}
                key={'doneItem'}
                className={cx("Process-tabs-tabPane")}
              >
                <MobileProcess
                  key={doneItem.title}
                  env={env}
                  val={doneItem}
                  render={render}
                  title={'doneItem'}
                  handleOnChange={this.handleChange}
                  onImageEnlarge={onImageEnlarge}
                  attachmentApi={attachmentApi}
                />
              </Tabs.TabPane>

              <Tabs.TabPane
                tab={'我收到的'}
                key={'我收到的'}
                className={cx("Process-tabs-tabPane")}
              >
                <Empty className='Empty' description={<span>暂无待审批</span>} />
              </Tabs.TabPane>
            </Tabs>
          </Tabs.TabPane>

          <Tabs.TabPane
            tab={<span>{isMobile() && <CloudUploadOutlined />}已提交</span>}
            key={'applyItem'}
            className={cx("Process-tabs-tabPane")}
          >
            <MobileProcess
              key={applyItem.title}
              env={env}
              val={applyItem}
              render={render}
              title={'applyItem'}
              handleOnChange={this.handleChange}
              attachmentApi={attachmentApi}
            />
          </Tabs.TabPane>
        </Tabs>
      </div >
    )
  }
}

@Renderer({
  type: 'flowing'
})
export class FlowingCodeRenderer extends FlowingCode { }