// 核心库
import React from 'react'
// 组件库
import { message, Button, Icon, Popconfirm, Empty } from 'antd'
import { Search, OrganizationTree } from '@woowalker/feui'
import ComponentBase from "../ComponentBase"
import Node from "./node"
import VPage from './VPage'
import EditModal from '../../components/Edit/EditModal'
import CombinationModal from '../../components/Combination/CombinationModal'
import TableModal from '../../components/Table/TableModal'
import FormModal from '../../components/FormModal'
import DataLoading from '../../components/common/DataLoading'
// 工具库
import { cloneDeep } from 'lodash'
import { addRuleAndGroups, extendRule, extendGroupRule, initFilter } from "../../utils/common"
// 样式
import styles from '../Component.css'
let formParam = ''
class TreeBaseComponent extends ComponentBase {
  constructor (props) {
    super(props)
    this.state = {
      data: {},
      treeConfig: {},
      treeLoadParam: {},
      showAdd: false,
      showModal: false
    }
    this.defaultTreeCode = 'tree'
  };
  componentDidMount () {
    super.componentDidMount()
    this.onLoadData()
  }

  componentWillReceiveProps (NextProps) {
    super.componentWillReceiveProps(NextProps)
  }

  onLoadTreeData ({ treeCode, searchValue, onComplete }) {
    const treeConfig = this.getTreeConfig({ treeCode })
    if (treeConfig) {
      const { sort, order, relationField, relationId, api, orgType, ignoreOrgRule } = treeConfig

      if (!api) return
      const treeLoadParam = this.state.treeLoadParam
      let loadParam = treeLoadParam[treeCode]

      if (!loadParam) {
        loadParam = initFilter(this.props.login.OrgId, '', sort, order)
        treeLoadParam[treeCode] = loadParam
      }
      loadParam['Level'] = -1
      const rules = this.props && this.props.data && this.props.data.rules ? this.props.data.rules : []
      const json = cloneDeep(loadParam)

      formParam = this.props.formParam
      if (formParam) {
        for (var val in formParam) {
          json[val] = formParam[val]
        }
      }

      if (rules) {
        rules.forEach(item => {
          extendRule(json, item.field, item.operator, item.value, item.isSysParam)
        })
      }
      if (orgType) {
        json.OrgType = orgType
      }
      if (searchValue) {
        addRuleAndGroups(json, searchValue)
      }

      //填加关联字段过滤
      if (relationField && relationId) {
        extendRule(json, relationField, 1, relationId)
      }

      // 是否忽略组织权限
      if (ignoreOrgRule) {
        json.IgnoreOrgRule = ignoreOrgRule
      }

      //配置的自定义查询条件
      if (this.props.data?.Filter) {
        json[this.props.data.Filter] = this.props.data.ID
      }

      // 配置的自定义过滤参数
      if (this.props.data?.customParams) {
        extendGroupRule(json.FilterGroup, this.props.data.customParams, 1, this.props.data.ID)
      }

      this.props.dispatch({
        type: 'app/getTableData',
        payload: json,
        url: api,
        onComplete: (ret) => {
          if (ret) {
            if (!ret.IsSuccessful) {
              message.error(ret.ErrorMessage)
              return
            }
            const datas = JSON.stringify(ret.Data)
            this.setTreeData({
              treeCode,
              data: JSON.parse(datas.toLowerCase()),
              onComplete,
            })
          }
        }
      })
    }
  }


  /*
  获取树配置
   */
  getTreeConfig (params) {
    const { treeCode = this.defaultTreeCode } = params ? params : {}
    let treeConfig = this.state.treeConfig
    if (!treeConfig) {
      treeConfig = {}
    }
    return treeConfig[treeCode]
  }

  /*
  设置树配置
   */
  setTreeConfig (params) {
    const { treeConfig, onComplete } = params ? params : {}
    let tempTreeConfig = this.state.treeConfig
    if (!tempTreeConfig) {
      tempTreeConfig = {}
    }
    if (treeConfig.treeCode === undefined) {
      treeConfig.treeCode = this.defaultTreeCode
    }
    tempTreeConfig = {
      ...tempTreeConfig,
      [treeConfig.treeCode]: treeConfig,
    }
    this.setState({
      treeConfig: tempTreeConfig
    }, () => {
      if (typeof onComplete === 'function') {
        onComplete()
      }
    })
  }

  /*
  获取树数据
   */
  getTreeData (params) {
    const { treeCode = this.defaultTreeCode } = params ? params : {}
    let data = this.state.treeData
    if (!data) {
      data = {}
    }
    return data[treeCode]
  }

  /*
  设置树数据
   */
  setTreeData ({ treeCode, data, onComplete }) {
    let tempData = this.state.treeData
    if (!tempData) {
      tempData = {}
    }
    if (treeCode === undefined) {
      treeCode = this.defaultTreeCode
    }
    tempData = {
      ...tempData,
      [treeCode]: data,
    }
    this.setState({
      treeData: tempData,
    }, () => {
      if (typeof onComplete === 'function') {
        onComplete()
      }
    })
  }

  /**
   * 节点包含MENU_LEVEL：第几级（没有默认第一个颜色），ICON：下方图标（没有默认不显示）
   */
  MyNode = (data) => {
    const treeCode = this.defaultTreeCode
    const treeConfig = this.getTreeConfig({ treeCode })
    return (
      <Node
        key={`${data.node.id}--customNode`}
        treeCode={treeCode}
        treeConfig={treeConfig}
        treePicFilter={this.state.picFilter}
        nodeData={data}
        {...this.props}
        showModal={this.state.showModal}
        getRenderBtn={this.getRenderBtn} />
    )
  };

  click = visible => {
    this.setState({ showModal: visible })
  }

  getRenderBtn = (params = {}) => {
    const { record, btnConfig = {} } = params
    // 编辑 新增 查看 复制新增 新增同级
    if (
      btnConfig.btnType === 5
      || btnConfig.btnType === 3
      || btnConfig.btnType === 8
      || btnConfig.btnType === 10
      || (btnConfig.btnType === -1 && record.parent_id)
    ) {
      const isShow = btnConfig.btnType === 8

      const isBatchEdit = false
      const extKey = record ? (record.id + btnConfig.id) : btnConfig.id
      const reloadKey = this.props.formCode + '_' + extKey + '_reload'
      const data = {
        isShow: isShow,
        record: record || {},
        isBatchEdit,
        reloadKey,

      }
      if (this.props.data?.Filter) {
        data.record[this.props.data.Filter] = this.props.data.ID
      }
      const extraSaveData = {}
      if (this.props.data?.customParams) {
        extraSaveData[this.props.data.customParams] = this.props.data.ID
      }
      const id = btnConfig.btnType !== 10 && record ? (btnConfig.btnType === -1 ? record.parent_id : record.id) : ''
      const copySrcId = btnConfig.btnType === 10 && record ? record.id : ''
      return (
        <EditModal
          key={record ? (record.id + btnConfig.id) : btnConfig.id}
          formCode={this.props.formCode}
          id={id}
          copySrcId={copySrcId}
          data={data}
          extraSaveData={extraSaveData}
          title={btnConfig.label}
          formParam={formParam}
          parentId={btnConfig.btnType === -1 ? record.parent_id : record.id}
          isAddH={btnConfig.btnType === 3 || btnConfig.btnType === -1}
          onSave={saveData => {
            this.updateTreeDataBySave(saveData)
          }}
          click={this.click}>
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </EditModal>
      )
    }
    // 节点删除
    else if (btnConfig.btnType === 4) {
      return (
        <Popconfirm
          title="是否确定删除？"
          onConfirm={this.deleteTreeNode.bind(this, params)}
          onVisibleChange={visible => this.setState({ showModal: visible })}
          icon={<Icon type="exclamation-circle" style={{ color: '#faad14' }} />}
        >
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </Popconfirm>
      )
    }
    // 列表查看
    else if (btnConfig.btnType === 12) {
      return (
        <TableModal
          key={record ? (record.id + btnConfig.id) : btnConfig.id}
          formCode={btnConfig.formCode}
          id={record.id}
          customParams={btnConfig.customParams}
          formParam={formParam}
          data={record}
          title={btnConfig.label}
          parentId={btnConfig.btnType === -1 ? record.parent_id : record.id}
          click={this.click}>
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </TableModal>
      )
    }
    // 组合表单
    else if (btnConfig.btnType === 14) {
      return (
        <CombinationModal
          key={record ? (record.id + btnConfig.id) : btnConfig.id}
          formCode={btnConfig.formCode}
          id={record.id}
          customParams={btnConfig.customParams}
          formParam={formParam}
          data={record}
          title={btnConfig.label}
          parentId={btnConfig.btnType === -1 ? record.parent_id : record.id}
          click={this.click}>
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </CombinationModal>
      )
    }
    // 自定义弹窗
    else if (btnConfig.btnType === 0) {
      return (
        <FormModal
          key={record ? (record.id + btnConfig.id) : btnConfig.id}
          formCode={btnConfig.formCode}
          id={record.id}
          customParams={btnConfig.customParams}
          formParam={formParam}
          data={record}
          title={btnConfig.label}
          parentId={btnConfig.btnType === -1 ? record.parent_id : record.id}
          click={this.click}>
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </FormModal>
      )
    }
    // 无树数据时，新增顶级节点
    else {
      const data = {}
      if (this.props.data?.Filter) {
        data.record = {
          [this.props.data.Filter]: this.props.data.ID
        }
      }
      const extraSaveData = {}
      if (this.props.data?.customParams) {
        extraSaveData[this.props.data.customParams] = this.props.data.ID
      }
      return (
        <EditModal
          formCode={this.props.formCode}
          title='新增'
          isAddH={true}
          data={data}
          onSave={saveData => {
            this.updateTreeDataBySave(saveData)
          }}
          extraSaveData={extraSaveData}
          click={this.click}>
          {
            btnConfig.btnType === -1
              ? <Icon type={btnConfig.icon} title={btnConfig.label} />
              : <Button type="primary" icon="plus">添加</Button>
          }
        </EditModal>
      )
    }
  }

  deleteTreeNode = (params) => {
    const { treeCode = this.defaultTreeCode, record } = params
    const treeConfig = this.getTreeConfig({ treeCode })
    if (treeConfig) {
      const { deleteApi } = treeConfig
      if (deleteApi) {
        this.props.dispatch({
          type: 'app/deleteItemBatch',
          payload: {
            ids: record.id
          },
          url: deleteApi,
          onComplete: (ret) => {
            if (ret) {
              message.success('删除成功')
              this.updateTreeDataBySave()
            }
          }
        })
      }
    }
  }

  updateTreeDataBySave = () => {
    this.onLoadTreeData({ treeCode: this.defaultTreeCode })
  }

  /*
  根据树编号渲染树
   */
  getRenderTreeByConfig (treeCode) {
    if (treeCode === undefined) {
      treeCode = this.defaultTreeCode
    }
    const treeConfig = this.getTreeConfig({ treeCode })
    if (treeConfig) {
      const treeData = this.getTreeData({ treeCode })
      const { formCode, queryCode } = treeConfig
      if (treeConfig.showModel == 1) {
        return (
          <>
            <Search
              formCode={formCode}
              formParam={this.props.formParam}
              code={queryCode}
              onSearch={(value) => this.onLoadTreeData({ treeCode, searchValue: value })}
            />
            {
              treeData && treeData.length
                ? (
                  <VPage
                    treeData={treeData}
                    treeConfig={treeConfig}
                    formParam={formParam}
                    treePicFilter={this.state.picFilter}
                    getRenderBtn={this.getRenderBtn}
                    onSave={this.updateTreeDataBySave}
                  />
                )
                : null
            }
            {
              treeData && treeData.length === 0 && treeConfig.canAddNode
                ? <div className={styles.treeVBox}>{this.getRenderBtn()}</div>
                : (
                  treeData && treeData.length === 0
                    ? <div className={styles.treeVBox}><Empty style={{ position: 'relative', top: '50%', transform: 'translateY(-50%)' }} /></div>
                    : (!treeData ? <div className={styles.treeVBox}><DataLoading /></div> : null)
                )
            }
          </>
        )
      }
      return (
        <>
          <Search
            formCode={formCode}
            formParam={this.props.formParam}
            code={queryCode}
            onSearch={(value) => this.onLoadTreeData({ treeCode, searchValue: value })}
          />
          <div className={styles.treeHBox}>
            {
              (treeData || []).map(item => {
                return (
                  <OrganizationTree
                    key={`${item.node.id}--rootTree`}
                    data={item}
                    node={{
                      id: 'node.id',
                      label: 'node.name',
                      expand: 'expand',
                      children: 'children'
                    }}
                    expandLevel={treeConfig.expandLevel}
                    renderContent={this.MyNode}
                  />
                )
              })
            }
            {
              treeData && treeData.length === 0 && treeConfig.canAddNode
                ? this.getRenderBtn()
                : (
                  treeData && treeData.length === 0
                    ? <Empty style={{ position: 'relative', top: '50%', transform: 'translateY(-50%)' }} />
                    : (!treeData ? <DataLoading /> : null)
                )
            }
          </div>
        </>
      )
    }
    return <div />
  }
}

export default TreeBaseComponent