import React, { PureComponent } from 'react';
import { routerRedux } from 'dva/router';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import { connect } from 'dva';
import { Spin, Popover, Badge, Table, Radio, Card, Form, Input, Icon, Button, Select } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ResourceSelectSortModal from './modal';
import { Codes, resourceType } from '../../../utils/config';

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

@Form.create()
@connect(state => ({
  wareDetail: state.wareDetail,
  resource: state.resource,
}))
export default class WareDetail extends PureComponent {
  static propTypes = {
    wareDetail: PropTypes.object,
  };

  // 展示模态框 - 加载第一页数据
  handleModalShow = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'wareDetail/showModal' });
    dispatch({
      type: 'resource/query',
      payload: {
        pageNo: 1,
        pageSize: 10,
      }
    });
  }

  // 取消/关闭 - 隐藏模态框
  handleModalCancel = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'wareDetail/hideModal' });
  }

  // 提交 - 保存选择和排序完的数据到model中
  handleModalOk = (data) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'wareDetail/saveSortResult',
      payload: { resourceList: data }
    });
  }

  // 搜索
  handleModalSearch = (data) => {
    const { dispatch } = this.props;
    const newData = { ...data };
    if (newData.keyword) {
      newData[newData.field] = newData.keyword;
      delete newData.field;
      delete newData.keyword;
    } else {
      delete newData.field;
      delete newData.keyword;
    }
    dispatch({
      type: 'resource/query',
      payload: { ...newData, pageNo: 1, pageSize: 10 },
    });
  }

  // 翻页 - 资源列表
  handleModalTableOnChange = (pagination, filterArgs, filters) => {
    const { dispatch } = this.props;
    const newFilters = { ...filters };
    if (newFilters.keyword) {
      newFilters[newFilters.field] = newFilters.keyword;
      delete newFilters.field;
      delete newFilters.keyword;
    } else {
      delete newFilters.field;
      delete newFilters.keyword;
    }
    const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
    const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filterArgs[key]);
      return newObj;
    }, {});

    const data = { ...newFilters, ...tableFilters, pageNo: pagination.current, pageSize: pagination.pageSize };
    Object.keys(data).map(key => data[key] ? null : delete data[key]);
    dispatch({ type: 'resource/query', payload: data });
  }

  handlePageSubmit = (e) => {
    e.preventDefault()
    const {
      dispatch,
      form: {
        validateFields,
        getFieldsValue,
        resetFields
      },
      wareDetail: {
        operType,
        currentItem,
        filters,
      }
    } = this.props;
    validateFields((errors) => {
      if (errors) { return; }
      const data = {
        ...currentItem,
        ...getFieldsValue(),
      };
      dispatch({
        type: `wareDetail/${operType}`,
        payload: data,
        callback: () => {
          dispatch(
            routerRedux.push({
              pathname: '/product/ware',
              search: queryString.stringify(filters),
            })
          );
        }
      })
      resetFields();
    });
  }

  handlePageCancel = () => {
    const { dispatch, wareDetail: { filters } } = this.props;
    dispatch({ type: 'wareDetail/clearPage' });
    dispatch(
      routerRedux.push({
        pathname: '/product/ware',
        search: queryString.stringify(filters),
      })
    );
  }

  render() {
    const { dispatch, form: { getFieldDecorator }, wareDetail, resource } = this.props;
    const { itemLoading, currentItem, filters, modalVisible } = wareDetail;
    const { resourceList, name, code, digest } = currentItem;
    const { list, listLoading, pagination } = resource;

    // 待选表格去掉分页的跳转及变换页码
    if (pagination) {
      delete pagination.showQuickJumper;
      delete pagination.showSizeChanger;
    }

    const subTableColumns = [{
      title: '缩略图',
      dataIndex: 'url',
      key: 'url',
      render: (text, record) => (
        record.type !== Codes.CODE_IMAGE ? <Icon type="video-camera" style={{ fontSize: 40}} /> :
          <Popover
            content={<img alt="" src={record.url} width={350} />}
            title={record.name}
          >
            <img alt="" src={record.url} width={70} />
          </Popover>
      ),
    },{
      title: '资源编号',
      dataIndex: 'code',
      key: 'code',
    },{
      title: '资源名称',
      dataIndex: 'name',
      key: 'name',
    },{
      title: '资源类型',
      dataIndex: 'type',
      key: 'type',
      render: (text, record) => (resourceType[record.type]),
    }];

    const formItemLayout = {
      labelCol: {
        span: 7,
      },
      wrapperCol: {
        span: 12,
      },
    };
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderLayout>
        <Spin spinning={itemLoading}>
          <Card>
            <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
              <FormItem label="课件编号：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('code', {
                  rules: [{ required: true, type: 'string', message: "编号为必填项!" }],
                  initialValue: code,
                })(<Input />)}
              </FormItem>
              <FormItem label="课件名称：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('name', {
                  rules: [{ required: true, type: 'string', message: "名称为必填项!" }],
                  initialValue: name,
                })(<Input />)}
              </FormItem>
              <FormItem label="课件简述：" hasFeedback {...formItemLayout}>
                {getFieldDecorator('digest', {
                  initialValue: digest,
                })(<TextArea />)}
              </FormItem>
              {/*内容提供商暂不用选择
              <FormItem label="提供商" hasFeedback {...formItemLayout}>
                {getFieldDecorator('groupId', {
                  rules: [{ required: true, type: 'string', message: "标签组为必选项!" }],
                  initialValue: groupId,
                })(
                  <Select
                    showSearch
                    allowClear
                    placeholder="请输入标签组编号或者名称进行筛选"
                    optionFilterProp="children"
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    {list.map(item => <Option value={item.id} key={item.id}>{`${item.code}/${item.name}`}</Option>)}
                  </Select>
                )}
              </FormItem>
              */}
              <FormItem label="选择资源" {...formItemLayout}>
                <Button onClick={this.handleModalShow} type="primary" size="small" icon="edit">编辑</Button>
              </FormItem>
              <FormItem wrapperCol={{ offset: 7, span: 12 }}>
                <Table
                  locale={{
                    emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
                      该课件下不包含任何内容，请选择图片或视频!</span>
                  }}
                  dataSource={resourceList}
                  columns={subTableColumns}
                  rowKey={record => record.id}
                  bordered
                  pagination={false}
                />
              </FormItem>
              <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
                <Button onClick={this.handlePageCancel}>取消</Button>
                <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
              </FormItem>
            </Form>
            <ResourceSelectSortModal
              rowKeyName="id"
              modalVisible={modalVisible}
              style={{ top: 20 }}
              width={600}
              onCancel={this.handleModalCancel}
              onOk={this.handleModalOk}
              onSearch={this.handleModalSearch}
              selTableData={resourceList || []}
              fsTableDataSource={list}
              fsTableLoading={listLoading}
              fsTablePagination={pagination}
              fsTableOnChange={this.handleModalTableOnChange}
            />
          </Card>
        </Spin>
      </PageHeaderLayout>
    );
  }
}