import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { parse } from 'qs';
import moment from 'moment';
import { routerRedux } from 'dva/router';
import { Button, Card, Table, Input, Icon, Popover, message } from 'antd';
import StandardTable from '../../../../components/StandardTable';
import { getSampleList, getSampleVersion, editSubmission, newSubmission, getModelDetails } from '../../../../services/model';
import Ellipsis from '../../../../components/Ellipsis';
import styles from './style.less';

// 格式化时间
const formatTime = (value) => {
  return moment(value).format('YYYY/MM/DD');
};

@connect(({
  pageGlobal,
  modelManage,
  loading,
}) => ({
  pageGlobal,
  modelManage,
  loading: loading.models.modelManage,
}))


export default class Step2 extends Component {
  state = {
    SampleData: {},
    selectedRows: [],
    prevSelectedRows: null,
    tmpList: [],
    check: false,
    detailsData: [],
    searchName: '', // 存储当前查询参数，查询时保留之前过滤数据
  };
  // 初始化页面调用获取数据
  componentDidMount() {
    const { location, dispatch, pageGlobal: { modelManageEditInfo } } = this.props;
    const pageId = parse(location.search.substr(1)).recordId;
    if (!modelManageEditInfo.refresh) {
      if (pageId) {
        dispatch(routerRedux.push({
          pathname: '/modelManage/addNewModel/modelAttr',
          search: `?recordId=${pageId}`,
        }));
      } else {
        dispatch(routerRedux.push('/modelManage/addNewModel/modelAttr'));
      }
    }
    const param = {
      modelId: pageId,
      name: '',
      pageNum: 1,
    };
    this.getSampelData(param);
    this.initSelected();
    global.react = this;
  }
  getSampelData = (param) => {
    getSampleList(param).then((result) => {
      this.setState({
        SampleData: {
          list: result.records,
          pagination: {
            total: result.total,
            current: result.current,
            pageSize: result.size,
          },
        },
      });
    });
  };
  // 已选样本
  initSelected = () => {
    const { pageGlobal: { modelManageEditInfo } } = this.props;
    const { sample } = modelManageEditInfo;
    const { location } = this.props;
    const pageId = parse(location.search.substr(1)).recordId;
    const getIds = (arr) => {
      if (arr.length) {
        return arr.map((item) => {
          return item.id;
        });
      } else {
        return [];
      }
    };
    if (modelManageEditInfo && modelManageEditInfo.sample) {
      this.setState({
        ...this.state,
        tmpList: sample,
        selectedRows: getIds(sample),
      });
    } else if (pageId) {
      getModelDetails(pageId).then((result) => {
        const selectedsample = result[0].selectedFeatureSample.obj.selectedSample.records;
        if (selectedsample) {
          this.setState({
            ...this.state,
            tmpList: selectedsample,
            selectedRows: getIds(selectedsample),
          });
        }
      });
    }
  }
  handleSelectRows = (rows = [], rowKeys = []) => {
    this.setState({
      ...this.state,
      selectedRows: rowKeys, // 回显已选样式
      tmpList: rows,
    });
  }
  saveData = () => {
    const { dispatch, pageGlobal: { modelManageEditInfo } } = this.props;
    const { tmpList } = this.state;
    dispatch({
      type: 'pageGlobal/setModelManageEditInfo',
      payload: {
        ...modelManageEditInfo,
        sample: tmpList,
      },
    });
  }
  // 查看更多
  handleVisibleChange = (e, record) => {
    if (e) {
      const param = {
        sampleId: record.id,
      };
      getSampleVersion(param).then((result) => {
        this.setState({
          ...this.state,
          check: true,
          detailsData: result,
          prevSelected: record,
        });
      });
    }
  };
  detailsColumns = [
    {
      title: '样本名称',
      dataIndex: 'name',
      align: 'left',
    }, {
      title: '样本描述',
      dataIndex: 'comment',
      align: 'left',
      render: (text, record) => (
        <div>
          <p>正样本:{record.posComment}</p>
          <p>负样本:{record.negComment}</p>
          <Ellipsis lines={2}>{text}</Ellipsis>
        </div>
      ),
    }, {
      title: '版本号',
      dataIndex: 'version',
      align: 'left',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'left',
      render: text => (
        <span>{formatTime(text)}</span>
      ),
    }];
  // 列表查询方法
  search = () => {
    const { location } = this.props;
    const pageId = parse(location.search.substr(1)).recordId;
    const param = {
      modelId: pageId,
      name: this.state.searchName,
      pageNum: 1,
    };
    this.getSampelData(param);
  };
  // 搜索
  handleFormSubmit = (val) => {
    this.setState({ searchName: val }, () => {
      this.search(this.state.searchName);
    });
  };
  // 页面切换 /状态切换
  handleStandardTableChange = (pagination) => {
    const { location } = this.props;
    const pageId = parse(location.search.substr(1)).recordId;
    const param = {
      modelId: pageId,
      name: this.state.searchName,
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
    };
    this.getSampelData(param);
  };
  prev = () => {
    const { dispatch, location } = this.props;
    const pageId = parse(location.search.substr(1)).recordId;
    this.saveData();
    if (pageId) {
      dispatch(routerRedux.push({
        pathname: '/modelManage/addNewModel/selectFeature',
        search: `?recordId=${pageId}`,
      }));
    } else {
      dispatch(routerRedux.push({
        pathname: '/modelManage/addNewModel/selectFeature',
      }));
    }
  };
  // 提交
  next = () => {
    const { dispatch, location } = this.props;
    const pageId = parse(location.search.substr(1)).recordId;
    const { selectedRows } = this.state;
    if (selectedRows && selectedRows.length > 0) {
      const step1info = global.react.props.pageGlobal.modelManageEditInfo;
      // 已选样本id
      // const sampleid = this.state.data.list[0].id;
      if (pageId) {
        const param = {
          addIdList: step1info.ids,
          model: {
            id: pageId,
            analysisType: step1info.analysisType,
            comment: step1info.comment,
            deptId: step1info.deptId,
            userId: step1info.userId,
            name: step1info.name,
            sampleId: selectedRows[0],
          },
        };
        editSubmission(param).then((result) => {
          if (result) {
            dispatch(routerRedux.push('/modelManage/addNewModel/finish'));
          }
        });
      } else {
        const param = {
          addIdList: step1info.ids,
          model: {
            analysisType: step1info.analysisType,
            comment: step1info.comment,
            deptId: step1info.deptId,
            userId: step1info.userId,
            name: step1info.name,
            sampleId: selectedRows[0],
          },
        };
        newSubmission(param).then((result) => {
          if (result) {
            dispatch(routerRedux.push('/modelManage/addNewModel/finish'));
          }
        });
      }
    } else {
      message.warn('请选择样本！');
    }
  };
  render() {
    const { selectedRows, SampleData } = this.state;
    const data = {
      list: this.state.detailsData,
      pagination: false,
    };
    // 处理数据
    const displayData = (obj) => {
      const { tmpList = [] } = this.state;
      // const prevId = prevSelectedRows;
      const Id = selectedRows[0] || null;
      const newList = obj.list ? [...obj.list] : [];
      const newKeysList = newList.map((v) => {
        return v.id;
      });
      if (Id && newKeysList.indexOf(Id) < 0) { // 若当前点击的不包含在源列表中
        const lists = newList.map((v) => {
          return v.code === tmpList[0].code ? tmpList[0] : v;
        });
        return {
          ...obj,
          list: lists,
        };
      } else {
        return obj;
      }
    };
    const content = (
      <StandardTable
        onSelectRow={this.handleSelectRows}
        selectedRows={selectedRows}
        data={data}
        type="radio"
        showTitle={false}
        size="small"
        columns={this.detailsColumns}
        onChange={this.handleStandardTableChange}
        rowKey="id"
        bordered
      />
    );
    const columns = [{
      title: '样本名称',
      dataIndex: 'name',
    }, {
      title: '样本描述',
      dataIndex: 'comment',
      align: 'left',
      render: (text, record) => (
        <div>
          <p>正样本:{record.posComment}</p>
          <p>负样本:{record.negComment}</p>
          <Ellipsis lines={2}>{text}</Ellipsis>
        </div>
      ),
    }, {
      title: '版本号',
      dataIndex: 'version',
      align: 'center',
      render: text => (
        <span>v{text}</span>
      ),
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      render: text => (
        <span>{formatTime(text)}</span>
      ),
    }, {
      title: '操作',
      dataIndex: 'operate',
      align: 'left',
      render: (text, record) => (
        <Popover placement="bottomRight" trigger="click" onVisibleChange={e => this.handleVisibleChange(e, record)} content={content}>
          <a>更多<Icon className={styles.linkText} type="down" /></a>
        </Popover>
      ),
    },
    ];
    const mainSearch = (
      <Input.Search
        placeholder="请输入样本名称、样本描述"
        enterButton="搜索"
        onSearch={this.handleFormSubmit}
        style={{ width: 300 }}
      />
    );
    return (
      <Fragment>
        <Card bordered={false}>
          <div style={{ textAlign: 'right', marginBottom: 16 }}>
            {mainSearch}
          </div>
          <h3>已选样本</h3>
          <Table
            dataSource={this.state.tmpList}
            columns={columns}
            pagination={false}
            rowKey="id"
            bordered
          />
          <h3 style={{ marginTop: 16 }}>可选样本 ( 单击以下某一行即可选中您需要的样本 )</h3>
          <StandardTable
            onSelectRow={this.handleSelectRows}
            selectedRows={selectedRows}
            type="radio"
            data={displayData(SampleData)}
            columns={columns}
            onChange={this.handleStandardTableChange}
            rowKey="id"
            bordered
          />
        </Card>
        <Card bordered={false} className={styles.btnGroup}>
          <Button onClick={this.prev} >上一步</Button>
          <Button type="primary" onClick={this.next} style={{ marginLeft: 32 }}>提交</Button>
        </Card>
      </Fragment>
    );
  }
}