import React from 'react';
import '../../leftTab.less';
import ReactDom from 'react-dom';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import Editors from '../../../richTextEditors'
import '../content.less';
import moment from 'moment';
import { citySelect,provinceList,areaSelect,provinceSelect,addressList} from '../../../NewDicProvinceList';
import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload,Popconfirm,AutoComplete,Tabs,Checkbox,Tree,Cascader} from 'antd';
import {patternOrganization,conditionOrganization,intentionalService,messageType,designatedObjects,socialAttributeS,industry,socialAttribute,industryS,designatedObjectse,auditStatusL} from '../../../dataDic.js';
import {
  beforeUpload,
  getBase64,
  getprovince,
  getauditStatus,
  ShowModal
} from "../../../tools.js";
const TabPane = Tabs.TabPane;
const TreeNodet = Tree.TreeNode;
const CheckboxGroup = Checkbox.Group;
import ShowModalDiv from "@/showModal.jsx";
const Avatar = React.createClass({
    getInitialState() {
        return {
            imageUrl: ''
        }
    },
    handleChange(info) {
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
            this.props.urlData(info.file.response.data);
        }
    },
    componentWillReceiveProps(nextProps) {
        if (this.props.visible && !nextProps.visible) {
            this.state.imageUrl = null;
        };
    },
    render() {
        const imageUrl = this.state.imageUrl;
        return (
            <Upload
                className="avatar-uploader"
                name={this.props.name}
                showUploadList={false}
                action={globalConfig.context + "/api/admin/news/upload"}
                data={{ 'sign': 'news_title_picture' }}
                beforeUpload={beforeUpload}
                onChange={this.handleChange} >
                {
                    (imageUrl || this.props.imageUrl) ?
                        <img src={imageUrl || this.props.imageUrl} role="presentation" id={this.props.name} /> :
                        <Icon type="plus" className="avatar-uploader-trigger" />
                }
            </Upload>
        );
    }
});
const Inquiry=React.createClass({
	loadData(pageNo, theType) {
        this.setState({
            loading: true,
            ispage:pageNo,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/news/list',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                type: theType || 1, //新闻类型
                title: this.state.searchTitle,
                author: this.state.searchAuthor,
                startCreateTime: this.state.startDate, //新闻开始时间 yyyy-MM-dd
                endCreateTime: this.state.endDate, //新闻结束时间 yyyy-MM-dd
                source: this.state.searchSource,
                hot: this.state.searchHot, //是否放在首页
            },
            success: function (data) {
                ShowModal(this);
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            id: thisdata.id ? thisdata.id.toString() : null,
                            createTime: thisdata.createTime,
                            editTime: thisdata.editTime,
                            title: thisdata.title,
                            titleImg: thisdata.titleImg,
                            author: thisdata.author,
                            type: thisdata.type,
                            hot: thisdata.hot,
                            source: thisdata.source,
                            sourceUrl: thisdata.sourceUrl,
                            summary: thisdata.summary,
                            content: thisdata.content,
                            createTimeFormattedDate: thisdata.createTimeFormattedDate,
                            auditStatus:thisdata.auditStatus,
                        });
                    };
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                };
                this.setState({
                    tableData: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadDetailData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/news/detail',
            data: {
                id: this.state.RowData.id //新闻主键ID(数字类型,非字符串)
            },
            success: function (data) {
                let theObj = {};
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    theObj = data.data;
                  if(theObj.provinceId==null||theObj.provinceId==''){
                 	theObj.provinceId=11
                 }
                };
                this.setState({
                    RowData: theObj,

                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            visible: false,
            callnub:'1',
            selectedRowKeys: [],
            selectedRows: [],
            keysObj: {},
            RowData: {},
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page,this.state.callnub);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            columns: [
                {
                    title: '标题',
                    dataIndex: 'title',
                    key: 'title',
                    width: '20%'
                }, {
                    title: '发布时间',
                    dataIndex: 'createTimeFormattedDate',
                    key: 'createTimeFormattedDate',
                }, {
                    title: '作者',
                    dataIndex: 'author',
                    key: 'author',
                }, {
                    title: '审核状态',
                    dataIndex: 'auditStatus',
                    key: 'auditStatus',
                    render: text => { return getauditStatus(text) }
                }, {
                    title: '来源',
                    dataIndex: 'source',
                    key: 'source',
                }, {
                    title: '简介',
                    dataIndex: 'summary',
                    key: 'summary',
                    width: '50%'
                }
            ],
            list:provinceList,
            tableData: []
        };
    },
    tableRowClick(record, index) {
        this.state.RowData = record;
        this.loadDetailData();
        this.setState({
            visible: true
        });
    },
    componentWillMount() {
        this.loadData(1,1);
    },
    componentWillReceiveProps(nextProps) {
        if (this.props.newsType != nextProps.newsType) {
            this.state.searchTitle = undefined;
            this.state.searchAuthor = undefined;
            this.state.startDate = undefined;
            this.state.endDate = undefined;
            this.state.searchSource = undefined;
            this.state.searchHot = undefined;
            this.loadData(1, nextProps.newsType);
        };
    },
    callback(e) {
		this.setState({
			callnub: e,
		})
		if(e == 1) {
			this.setState({

			})
			this.reset();
			this.loadData(1,1);
		}
		if(e == 2) {
			this.setState({

			})
			this.reset();
			this.loadData(1,2);
		}
		if(e == 3) {
			this.setState({

			})
			this.reset();
			this.loadData(1,3);
		}
		if(e == 4) {
			this.setState({

			})
			this.reset();
			this.loadData(1,4);
		}
		if(e == 5) {
			this.setState({

			})
			this.reset();
			this.loadData(1,5);
		}
	},
	submit() {
        if (!this.state.RowData.title) {
            message.warning('必须填写一个标题！');
            return;
        };
        if (!this.state.RowData.createTimeFormattedDate) {
            message.warning('必须选择一个发布时间！');
            return;
        };
        if (!this.state.RowData.author) {
            message.warning('必须填写一个作者！');
            return;
        };
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + (this.state.RowData.id ? '/api/admin/news/update' : '/api/admin/news/add'),
            data: {
                id: this.state.RowData.id || null, //主键，如果不填主键则为新增记录，填主键则为更新
                title: this.state.RowData.title,
                titleImg: this.state.RowData.titleImg,
                author: this.state.RowData.author,
                type: this.state.callnub,
                hot: this.state.RowData.hot || 0,
                source: this.state.RowData.source,
                sourceUrl: this.state.RowData.sourceUrl,
                summary: this.state.RowData.summary,
                content: this.state.RowData.content,
                createTimeFormattedDate: this.state.RowData.createTimeFormattedDate,
                provinceId: this.state.RowData.provinceId,
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('保存成功!');
                    this.setState({ visible: false });
                    this.loadData(this.state.ispage,this.state.callnub);
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
	delectRow() {
        let deletedIds = [];
        for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
            let rowItem = this.state.selectedRows[idx];
            if (rowItem.id) {
                deletedIds.push(rowItem.id)
            };
        };
        this.setState({
            selectedRowKeys: [],
            loading: deletedIds.length > 0
        });
        $.ajax({
            method: "POST",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/news/delete",
            data: {
                ids: deletedIds
            }
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                message.success('删除成功！');
            };
            this.setState({
                loading: false,
            });
            this.loadData(this.state.ispage,this.state.callnub);
        }.bind(this));
    },
    reset() {
        this.state.searchTitle = undefined;
        this.state.searchAuthor = undefined;
        this.state.startDate = undefined;
        this.state.endDate = undefined;
        this.state.searchSource = undefined;
        this.state.searchHot = undefined;
    },
     cleanCache(sign) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/news/cleanCache',
            data: {
                'cacheKey': sign
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('清除缓存成功!');
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    clearCache() {
        if (!this.state.searchKey) {
            message.warning('必须选择一个位置！');
            return;
        };
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/banners/clearCache',
            data: {
                key: this.state.searchKey  // 位置标示，必填
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('更新缓存成功!');
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
	render(){
		const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows: selectedRows.slice(-1),
                    selectedRowKeys: selectedRowKeys.slice(-1)
                });
            }
        };
        const hasSelected = this.state.selectedRowKeys.length > 0;
        return (
          <div className="admin-content">
            <ShowModalDiv ShowModal={this.state.showModal} />
            <div className="admin-content-search">
              <Input
                placeholder="标题"
                style={{
                  width: 200,
                  marginBottom: "10px",
                  marginRight: "10px"
                }}
                value={this.state.searchTitle}
                onChange={e => {
                  this.setState({ searchTitle: e.target.value });
                }}
              />
              <Input
                placeholder="作者"
                style={{ width: 100, marginRight: "10px" }}
                value={this.state.searchAuthor}
                onChange={e => {
                  this.setState({ searchAuthor: e.target.value });
                }}
              />
              <Input
                placeholder="来源"
                style={{ width: 100, marginRight: "10px" }}
                value={this.state.searchSource}
                onChange={e => {
                  this.setState({ searchSource: e.target.value });
                }}
              />
              {this.props.newsType == 2 || this.props.newsType == 3 ? (
                <Select
                  placeholder="显示在首页"
                  style={{ width: 100, marginRight: "10px" }}
                  value={this.state.searchHot}
                  onChange={e => {
                    this.setState({ searchHot: e });
                  }}
                >
                  <Select.Option value="0">不显示</Select.Option>
                  <Select.Option value="1">显示</Select.Option>
                </Select>
              ) : (
                <span></span>
              )}
              <span style={{ marginRight: "10px" }}>发布时间</span>
              <DatePicker
                style={{ width: 110, marginRight: "10px" }}
                format="YYYY-MM-DD"
                placeholder="选择开始时间"
                value={
                  this.state.startDate
                    ? moment(this.state.startDate, "YYYY-MM-DD")
                    : undefined
                }
                onChange={(t, str) => {
                  this.setState({ startDate: str });
                }}
              />
              <span style={{ marginRight: "10px" }}>到</span>
              <DatePicker
                style={{ width: 110, marginRight: "10px" }}
                format="YYYY-MM-DD"
                placeholder="选择结束时间"
                value={
                  this.state.endDate
                    ? moment(this.state.endDate, "YYYY-MM-DD")
                    : undefined
                }
                onChange={(t, str) => {
                  this.setState({ endDate: str });
                }}
              />
              <Button
                type="primary"
                onClick={() => {
                  this.loadData(1, this.state.callnub);
                }}
                style={{ marginRight: "10px" }}
              >
                搜索
              </Button>
              <Button onClick={this.reset} style={{ marginRight: "10px" }}>
                重置
              </Button>
              <Button type="ghost" onClick={this.clearCache}>
                清除缓存
              </Button>
            </div>
            <div className="clearfix" style={{ marginLeft: "20px" }}>
              <Tabs
                onChange={this.callback}
                type="card"
                activeKey={this.state.callnub}
                style={{
                  paddingLeft: "15px",
                  paddingRight: "15px",
                  marginRight: "20px"
                }}
              >
                <TabPane tab="科技快讯" key="1"></TabPane>
                <TabPane tab="交易问题" key="2"></TabPane>
                <TabPane tab="技淘动态" key="3"></TabPane>
                <TabPane tab="国家政策" key="4"></TabPane>
                <TabPane tab="地方政策" key="5"></TabPane>
              </Tabs>
            </div>
            <Spin spinning={this.state.loading}>
              <Table
                size="middle"
                className="no-all-select"
                columns={this.state.columns}
                dataSource={this.state.tableData}
                pagination={this.state.pagination}
                rowSelection={rowSelection}
                style={{
                    cursor: 'pointer',
                }}
                onRowClick={this.tableRowClick}
              />
            </Spin>
            <Modal
              title="新闻详情"
              width={1000}
              className="news-modal"
              visible={this.state.visible}
              maskClosable={false}
              footer={null}
              afterClose={() => {
                this.state.RowData = {};
              }}
              onCancel={() => {
                this.setState({ visible: false });
              }}
            >
              <Spin spinning={this.state.loading}>
                <div className="clearfix">
                  <div className="modal-box">
                    <span className="modal-box-title">新闻标题 : </span>
                    <div className="modal-box-detail">
                      <span>{this.state.RowData.title}</span>
                    </div>
                  </div>
                  <div className="modal-box">
                    <span className="modal-box-title">简介 : </span>
                    <div className="modal-box-detail">
                      <span>{this.state.RowData.summary}</span>
                    </div>
                  </div>
                  <div className="modal-box">
                    <span className="modal-box-title">来源:</span>
                    <div className="modal-box-detail">
                      <span>{this.state.RowData.source}</span>
                    </div>
                  </div>
                  <div className="modal-box">
                    <span className="modal-box-title">来源链接 : </span>
                    <div className="modal-box-detail">
                      <span>{this.state.RowData.sourceUrl}</span>
                    </div>
                  </div>
                  <div
                    className="modal-box"
                    style={{ position: "absolute", right: "0", width: "480px" }}
                  >
                    <span className="modal-box-title">标题图片</span>
                    <div
                      className="modal-box-detail clearfix"
                      style={{ width: "360px" }}
                    >
                      <Avatar
                        sign={"news_title_picture"}
                        visible={this.state.visible}
                        imageUrl={
                          this.state.RowData.titleImg
                            ? globalConfig.avatarHost +
                              "/upload" +
                              this.state.RowData.titleImg
                            : null
                        }
                        urlData={url => {
                          this.state.RowData.titleImg = url;
                        }}
                      />
                    </div>
                  </div>
                </div>
                <div className="clearfix">
                  <div className="modal-box news-box">
                    <span className="modal-box-title">作者 : </span>
                    <div className="modal-box-detail">
                      <span>{this.state.RowData.author}</span>
                    </div>
                  </div>
                  <div className="modal-box news-box">
                    <span className="modal-box-title">发布时间 : </span>
                    <div className="modal-box-detail">
                      <span>{this.state.RowData.createTimeFormattedDate}</span>
                    </div>
                  </div>
                  {this.props.newsType == 2 || this.props.newsType == 3 ? (
                    <div className="modal-box news-box">
                      <span className="modal-box-title">发布在首页</span>
                      <div className="modal-box-detail">
                        <Radio.Group
                          value={this.state.RowData.hot}
                          onChange={e => {
                            this.state.RowData.hot = e.target.value;
                            this.setState({ RowData: this.state.RowData });
                          }}
                        >
                          <Radio value={0}>否</Radio>
                          <Radio value={1}>是</Radio>
                        </Radio.Group>
                      </div>
                    </div>
                  ) : (
                    <div></div>
                  )}
                </div>
                <div className="modal-box">
                  <span className="modal-box-title">选择省份 : </span>
                  <span>{getprovince(this.state.RowData.provinceId)}</span>
                </div>
                <Editors
                  textContent={this.state.RowData.content}
                  uploadUrl={"/api/admin/news/upload"}
                  uploadSign={"news_content_picture"}
                  handleRichText={value => {
                    this.state.RowData.content = value;
                  }}
                  visible={this.state.visible}
                  readonly
                />
              </Spin>
            </Modal>
          </div>
        );
	}
})

export default Inquiry;