import React, { 
  Component
} from 'react';
import { 
  inject, 
  observer, 
} from "mobx-react";
import {
  WeaTab,
  WeaLocaleProvider,
  WeaButtonIcon,
} from "ecCom";
import { 
  WeaTableNew, 
} from "comsMobx";
import {
  getAdvancedItem,
  getSearchBtns,
  getForm,
  onCheck,
  checkUnique,
  doConfirm,
} from "../../util/IntegrationUtil";
import DataShowDialog from "./DataShowDialog";

const {getLabel} = WeaLocaleProvider;
const {WeaTable} = WeaTableNew;

@inject("dataShowStore")
@observer
export default class CacheDataManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchType: ["base", "advanced"],
      showSearchAd: false,
    };
  }
  
  componentWillReceiveProps(nextProps) {
    this.setState({
      showSearchAd: false,
    })
  }

  componentWillMount() {
    this.setState({
      showSearchAd: false,
    })
  }

  // 详情页面
  handleChange = (form, allParams, fields) => {
    const key = fields.domkey[0];

    if("keyid" === key) {
      this.checkFlagUnique();  
    }
  }

  checkFlagUnique = (callBack) => {
    const {
      dataShowStore,
    } = this.props, {
      newForm,
      status,
    } = dataShowStore, {
      cacheDataDetailOperateInfo={},
      cacheDataDialogTitle,
    } = status, {
      id,
    } = cacheDataDetailOperateInfo;

    let func = () => {
      if(callBack && typeof(callBack) === "function") {
        callBack();
      }
    };

    let fieldValue = newForm.getFormParams().keyid.replace(/^(\s*)|(\s*)$/g, '');
    if(fieldValue) {
      checkUnique({
        tableName: cacheDataDialogTitle,
        fieldName: 'keyid',
        fieldValue,
        idName: 'id',
        idValue: id 
      }, newForm, "keyid", "8", "", func);
    }
  }

  onDetailMenuClick = (type) => {
    const {
      dataShowStore,
    } = this.props, {
      newForm,
      status,
    } = dataShowStore, {
      cacheDataDetailOperateInfo,
    } = status;

    if("BTN_SAVE" === type) {
      onCheck(newForm, () => this.checkFlagUnique(() => {
        dataShowStore.getDataShowCacheOperation({
          ...newForm.getFormParams(), 
          operate: cacheDataDetailOperateInfo ? "updateCache" : "addCache",
          id: cacheDataDetailOperateInfo ? cacheDataDetailOperateInfo.id : "",
        });
      }));
    }
  }

  // Table的一些操作
  onOperatesClick = (record, index, operate, flag) => {
    this.onMenuClick(operate.index, record);
  };

  getColumnsInfo = (datas=[]) => {
    return datas && datas.map(item => {
      if("keyid" === item.dataIndex) {
        item.render = (text, record) => <a onClick={() => this.onMenuClick("0", record)}>{text}</a>;
      }

      return item;
    })
  }

  getTabButtonsAd = () => {
    return getSearchBtns(
      this.handleSearchFun,
      () => this.props.dataShowStore.cacheDataSearchForm.reset(),
      () => this.setState({ showSearchAd: false }),
      this && this.props && this.props.ecId || '', 
      "integrationDatashowCacheDataManage"
    );
  }

  // 高级搜索的搜索方法  
  handleSearchFun = () => {
    const {
      dataShowStore,
    } = this.props;

    dataShowStore.getCacheDataManageInfo();
    this.setState({ showSearchAd: false });
  }

  getAdvancedSearch = () => {
    const { 
      dataShowStore,
    } = this.props, {
      cacheDataSearchForm,
      status,
    } = dataShowStore, {
      cacheDataSearchCondition,
    } = status;
    return getAdvancedItem(cacheDataSearchForm, cacheDataSearchCondition, this.handleSearchFun, false, this && this.props && this.props.ecId || '', "integrationDatashowCacheDataManage");
  };

  onSearchChange = (value) => {
    const {
      dataShowStore,
    } = this.props, {
      cacheDataSearchForm,   
    } = dataShowStore;

    cacheDataSearchForm.updateFields({key: value});
  }

  getSearchBaseValue = () => {
    const {
      dataShowStore,
    } = this.props, {
      cacheDataSearchForm,
    } = dataShowStore, {
      key,
    } = cacheDataSearchForm.getFormParams();

    return key;
  }

  setShowSearchAd = bool => this.setState({showSearchAd: bool});

  hideSearchAd = () => this.setState({showSearchAd: false});

  onMenuClick = (type, record) => {
    const {
      dataShowStore,
    } = this.props, {
      cacheDataTableStore,
      status,
    } = dataShowStore, {
      selectedRowKeys,
    } = cacheDataTableStore, {
      cacheDataOperateInfo={},
    } = status;

    let id = record ? record.id : selectedRowKeys;

    if("BTN_NEW" === type) {
      dataShowStore.setState({
        cacheDataManageDetailVisible: true,
        cacheDataDetailOperateInfo: "",
      });

      dataShowStore.getDataShowCacheDataForm({browsertype: cacheDataOperateInfo ? cacheDataOperateInfo.showname : ""});
    } else if("BTN_DEL" === type || "1" === type) {
      let title = getLabel(385625, '确定要删除选择的记录吗？');

      if("1" === type) {
        title = getLabel(15097, '确定要删除吗？');
      }
      doConfirm(title, dataShowStore.getDataShowCacheOperation, {operate: "delCache", id, browsertype: cacheDataOperateInfo ? cacheDataOperateInfo.showname : ""});
    } else if("BTN_COLUMN" === type) {
      cacheDataTableStore.setColSetVisible(true);
      cacheDataTableStore.tableColSet(true);
    } else if("0" === type) {
      dataShowStore.setState({
        cacheDataManageDetailVisible: true,
        cacheDataDetailOperateInfo: record,
      });

      dataShowStore.getDataShowCacheDataForm({
        browsertype: cacheDataOperateInfo ? cacheDataOperateInfo.showname : "", 
        id,
        browsertype: cacheDataOperateInfo ? cacheDataOperateInfo.showname : "", 
      });
    }
  }

  getRightMenus = (datas=[]) => {
    const {
      dataShowStore,
    } = this.props, {
      selectedRowKeys,
    } = dataShowStore.cacheDataTableStore;  

    let rightMenus = datas && datas.map(item => {
      if(item.type === "BTN_DEL") {
        item.disabled = selectedRowKeys.length === 0;
      }
      
      return {
        ...item,
        key: item.type,
        icon: <i className={item.menuIcon} />,
        content: item.menuName,
        onClick: () => this.onMenuClick(item.type),
      };
    });

    rightMenus.push({
      key: "BTN_COLUMN",
      icon: <i className="icon-coms-Custom" />,
      content: getLabel(32535, "显示列定制"),
      onClick: () => this.onMenuClick("BTN_COLUMN"),
    })

    return rightMenus || [];
  }

  getButtons = (datas=[]) => {
    const {
      dataShowStore,
    } = this.props, {
      selectedRowKeys,
    } = dataShowStore.cacheDataTableStore;

    return datas && datas.map(item => <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@q5dgm5@DatashowCacheDetail${item.type}`} 
      disabled={item.type === "BTN_DEL" && selectedRowKeys.length === 0} 
      buttonType={item.type === "BTN_NEW" ? "add" : item.type === "BTN_DEL" ? "del" : ""} 
      type="primary" 
      onClick={() => this.onMenuClick(item.type)}  
    />);
  }

  onCancel = () => {
    const {
      dataShowStore,
    } = this.props;

    dataShowStore.setState({
      cacheDataManageVisible: false,
      cacheDataOperateInfo: "",
    });
  }

  render() {
    const {
      dataShowStore,
    } = this.props, {
      status,
      cacheDataTableStore,
      newForm,
      cleanCacheDetailDialogStore,
    } = dataShowStore, {
      cacheDataManageVisible,
      menus=[],
      cacheDataDialogTitle,
      cacheDataSearchAdvancedHeight,
      cacheDataManageDetailVisible,
      cacheDetailMenus=[],
      cacheDataDetailOperateInfo,
      dataShowFormFields,
      tabButtonDisabled,
    } = status, {
      searchType,
      showSearchAd,
    } = this.state;

    return (
      <DataShowDialog ecId={`${this && this.props && this.props.ecId || ''}_DataShowDialog@drxedj`}
        title={`【${cacheDataDialogTitle}】` + getLabel('525809','缓存数据管理')}
        visible={cacheDataManageVisible}
        menus={[]}
        rightMenus={this.getRightMenus(menus)}
        onCancel={this.onCancel}
      >
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@y8o09n`} 
          buttons={this.getButtons(menus)}
          searchType={searchType}
          searchsBaseValue={this.getSearchBaseValue()}
          advanceHeight={cacheDataSearchAdvancedHeight}
          searchsAd={this.getAdvancedSearch()}
          buttonsAd={this.getTabButtonsAd()}
          showSearchAd={showSearchAd}
          setShowSearchAd={this.setShowSearchAd}
          hideSearchAd={this.hideSearchAd}
          onSearch={this.handleSearchFun}
          onSearchChange={this.onSearchChange}
        />
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@az504w`} 
          comsWeaTableStore={cacheDataTableStore}
          hasOrder={true}
          needScroll={true}
          onOperatesClick={this.onOperatesClick}
          getColumns={this.getColumnsInfo}
        />
        <DataShowDialog ecId={`${this && this.props && this.props.ecId || ''}_DataShowDialog@apbrry`}
          title={cacheDataDetailOperateInfo ? getLabel('527403','编辑缓存数据') : getLabel('527402','新建缓存数据')}
          visible={cacheDataManageDetailVisible}
          disabled={tabButtonDisabled}
          style={{width: 600, height: 400}}
          menus={cacheDetailMenus}
          onMenuClick={this.onDetailMenuClick}
          onCancel={cleanCacheDetailDialogStore}
        >
          {getForm(newForm, dataShowFormFields, true, this.handleChange)}
        </DataShowDialog>
      </DataShowDialog>
    )
  }
}
