import React, { Component } from "react";
import {
  Table,
  Modal,
  message,
  Spin,
  Input,
  Select,
  Button,
  Form,
  Upload,
  Popconfirm,
  AutoComplete,
  DatePicker,
  Col,
  Tabs,
  Tag,
  Radio,
  Group,
  InputNumber,
} from "antd";
import SpinContainer from "../../SpinContainer";
import $ from "jquery/src/ajax";
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = AutoComplete.Option;
const confirm = Modal.confirm;
class Cities extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataView: null,
      PublicView: null,
      contentView: "",
      remarksView: "",
      hid:'none',
      contentViewLength: 0,
      contentViewLength1: 0,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function(page) {
          this.linkList(page);
          this.setState({
            selectedRowKeys: []
          });
        }.bind(this),
        showTotal: function(total) {
          return "共" + total + "条数据";
        }
      },
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          width: "80px",
        },
        {
          title: "排序",
          dataIndex: "sort",
          key: "sort",
          width: "80px",
        },
        {
          title: "链接地址",
          dataIndex: "url",
          key: "url",
          width: "100",
        },
        {
          title: "热门城市",
          dataIndex: "name",
          key: "name",
          width: "100",
        },
        // {
        //   title: "互链",
        //   dataIndex: "mutualChain",
        //   key: "mutualChain",
        //   width: "100",
        //   render: (text, record) => {
        //     return (
        //       <div>
        //       {
        //         text == 0 ? '否': '是'
        //       }
        //       </div>
        //     );
        //   },
        // },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          width: "100",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          width: "100",
          render: (text, record) => {
            return (
              <div>
              {
                text == 0 ? '正常': '冻结'
              }
              </div>
            );
          },
        },
        {
          title: "操作",
          dataIndex: "cz",
          key: "cz",
          width: "100px",
          render: (text, record) => {
            return (
              <div>
                <Popconfirm
                  title={record.status == 0 ? "确认冻结?" : "确认恢复?"}
                  onConfirm={()=>this.linksUpdate(record)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button
                    style={{background:record.status ?'#009966':''}}
                    type={record.status == 0 ? 'primary' :'primary'}
                    onClick={(e) => {
                      e.stopPropagation();
                      
                      // this.setState({
                      //   addFlag: false,
                      // });
                    }}
                  >
                    {record.status == 0 ? "冻结" : "恢复"}
                  </Button>
                </Popconfirm>
              </div>
            );
          },
        },
      ],
      dataSourceView: [],
      coorVisible: "none",
      list: [],
      visible: false,
      viewKey: 0,
      modalView: false,
      modalRecord: false,
      closable: false,
      disabledView: "none",
      loading: false,
    };
    this.formRef = {};
    this.submitOrder = this.submitOrder.bind(this);
    this.linkList = this.linkList.bind(this);
    this.linksUpdate =  this.linksUpdate.bind(this)
    this.reset =  this.reset.bind(this)
    this.tableRowClick = this.tableRowClick.bind(this)
    this.cleanAllpopularCities= this.cleanAllpopularCities.bind(this)
  }
  componentDidMount() {
    this.linkList(1)
  }
  cleanAllpopularCities() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/popularCities/cleanAllpopularCities",
      success: function (data) {
        if (data.error.length) {
          this.setState({
            loading: false,
          });
          message.warning(data.error[0].message);
        } else {
          message.success("清除成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
  // 修改链接状态
  linksUpdate(record){
    if (!this.state.sort && !record.sort) {
      message.warning("请填写排序");
      return;
    }else if(!this.state.name && !record.name) {
      message.warning("请输入城市名");
      return;
    }
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/popularCities/update",
      data: {
        sort: record.sort || this.state.sort,
        status: record.status == 0 ? '1' :'0' || this.state.status,
        // mutualChain: record.mutualChain || this.state.mutualChain,
        name: record.name || this.state.name,
        url: record.url || this.state.url,
        remarks: record.remarks || this.state.remarks,
        id: record.id || this.state.id,
      },
      success: function (data) {
        if (data.error.length) {
          this.setState({
            loading: false,
          });
          message.warning(data.error[0].message);
        } else {
          this.setState({
            visible:false,
            hid:'none'
          })
          this.linkList(1)
          message.success("修改成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
  reset() {
    this.setState({
      sortType1:undefined,
      name1:undefined,
      mutualChain1:undefined,
      status1:undefined
    },()=>{
      this.linkList();
    });
  }
  // 新增友情链接
  submitOrder() {
    if (!this.state.sort) {
      message.warning("请填写排序");
      return;
    } else if(!this.state.name) {
      message.warning("请输入城市名");
      return;
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/popularCities/add",
      data: {
        sort: this.state.sort,
        status: 0,
        // mutualChain:this.state.mutualChain,
        name:this.state.name,
        url:this.state.url,
        remarks:this.state.remarks
      },
      success: function (data) {
        if (data.error.length) {
          this.setState({
            loading: false,
          });
          message.warning(data.error[0].message);
        } else {
          this.setState({
            loading: false,
            visible:false,
            viewKey: this.state.viewKey + 1,
            sort: "",
            // mutualChain: "",
            name: '',
            url: '',
            remarks:''
          });
          this.linkList(1)
          // this.assistList();
          message.success("添加成功");
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
  linkList(page){
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/popularCities/list",
      data: {
        sortType:this.state.sortType1 || undefined,
        name: this.state.name1 || undefined,
        // mutualChain:this.state.mutualChain || undefined,
        status:this.state.status1 || undefined,
        pageNo:page || 1,
        pageSize:10
      },
      success: function (data) {
        if (data.error.length) {
          this.setState({
            loading: false,
          });
          message.warning(data.error[0].message);
        } else {
          this.setState({
            list: data.data.list,
            pagination: this.state.pagination
          });
          this.state.pagination.total = data.data.totalCount;
          this.state.pagination.current = data.data.pageNo;
          }
          if (data.data && data.data.list && !data.data.list.length) {
            this.state.pagination.total = 0;
          }  
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }
    // 双击表格弹出修改
  tableRowClick(record) {
      this.setState({
        visible:true,
        sort: record.sort,
        status: record.status,
        // mutualChain: record.mutualChain,
        name: record.name,
        url: record.url,
        remarks: record.remarks,
        id:record.id,
        hid:'block'
      })
    }
  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    return (
      <div>
        <div className="user-content">
          <div className="content-title">
            <span>热门城市</span>
          </div>
          <div className="user-search">
            <Select
              placeholder="排序从高到低"
              style={{ width: 150 }}
              value={
                this.state.sortType1
              }
              onChange={(e) => {
                this.setState({
                  sortType1: e,
                });
              }}
            >
              <Option value="0">排序从高到低</Option>
              <Option value="1">排序从低到高</Option>
            </Select>
            {/* 显示名称关键字 */}
            <Input
              style={{bottom:'6px'}}
              placeholder="请输入显示名称关键字"
              value={this.state.name1}
              onChange={(e) => {
                this.setState({ name1: e.target.value });
              }}
            />
            {/* 互链 */}
            {/* <Select
              placeholder="互链"
              style={{ width: 150 }}
              value={
                this.state.mutualChain
              }
              onChange={(e) => {
                this.setState({
                  mutualChain: e,
                });
              }}
            >
              <Option value="1">是,以互链</Option>
              <Option value="0">否,没互链</Option>
            </Select> */}
            {/*  */}
            <Select
              placeholder="状态"
              style={{ width: 150 }}
              value={
                this.state.status1
              }
              onChange={(e) => {
                this.setState({
                  status1: e,
                });
              }}
            >
              <Option value="0">正常</Option>
              <Option value="1">冻结</Option>
            </Select>
            <Button
              type="primary"
              onClick={()=>this.linkList(1)}
              style={{ marginLeft: "10px" }}
            >
              搜索
            </Button>
            <Button onClick={this.reset}>重置</Button>
            <Button
              type="primary"
              onClick={() => {
                this.setState({ 
                  visible: true ,
                  sort: "",
                  mutualChain: "",
                  name: '',
                  url: '',
                  remarks:''
                });
              }}
              style={{ marginLeft: "100px" }}
            >
              新增链接
            </Button>
            <Button
              type="primary"
              onClick={() => this.cleanAllpopularCities()}
              style={{ float: "right" }}
            >
              清除热门城市缓存
            </Button>
          </div>
          <div className="patent-table">
            <SpinContainer spinning={this.state.loading}>
              <Table
                columns={this.state.columns}
                dataSource={this.state.list}
                pagination={this.state.pagination}
                onRowClick={this.tableRowClick}
              />
            </SpinContainer>
          </div>
          <Modal
          width={'600px'}
            visible={this.state.visible}
            key={this.state.viewKey}
            title="新增/编辑热门"
            onCancel={() => {
              this.setState({
                visible: false,
                viewKey:this.state.viewKey+1
              });
            }}
            onOk={() => {}}
            footer={false}
          >
            <Form
              onSubmit={this.handleSubmit}
              ref={this.formRef}
              style={{ marginRight: "120px" }}
            >
              <Form.Item
                {...formItemLayout}
                label="排序"
                name="sort"
                hasFeedback
              >
                <InputNumber
                  value={this.state.sort}
                  min={1}
                  onChange={(e) => {
                    if(isNaN(e)) {
                      message.info("请输入数字")
                    }
                    this.setState({ sort: e });
                  }}
                />
                <span style={{ color: "red" }}>数字越大排序越前</span>
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="链接"
                name="url"
                hasFeedback
              >
                <Input
                style={{width:'140px'}}
                value={this.state.url}
                  placeholder="请输入http://地址"
                  onChange={(e) => {
                    this.setState({ url: e.target.value });
                  }}
                />
                <span style={{ color: "red",marginLeft:'10px' }}>请输入http://地址</span>
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="热门城市"
                name="name"
                hasFeedback
              >
                <Input
                value={this.state.name}
                  placeholder="请输入显示在页面的热门城市"
                  onChange={(e) => {
                    this.setState({ name: e.target.value });
                  }}
                />
              </Form.Item>
              {/* <Form.Item
                {...formItemLayout}
                label="是否互链"
                name="mutualChain"
                hasFeedback
              >
                <RadioGroup onChange={(e) => {this.setState({
                  mutualChain:e.target.value
                })}} value={this.state.mutualChain}>
                  <Radio value={0}>是</Radio>
                  <Radio value={1}>否</Radio>
                </RadioGroup>
              </Form.Item> */}
              <Form.Item
                {...formItemLayout}
                label="备注"
                name="remarks"
                hasFeedback
              >
               <TextArea
                value={this.state.remarks}
                maxLength={500}
                placeholder="请输入备注..."
                rows={4}
                onChange={(e) => {
                    this.setState({
                      remarks: e.target.value,
                    })
                  }}
               />
              </Form.Item>
            </Form>
            <div
              style={{
                display: "flex",
                justifyContent: "center",
              }}
            >
              <Button
              style={{display:this.state.hid == 'none' ? 'block' :'none'}}
                onClick={this.submitOrder}
                type="primary"
                loading={this.state.loading}
              >
                保存并发布
              </Button>
              <Button
                style={{display:this.state.hid}}
                onClick={this.linksUpdate}
                type="primary"
                loading={this.state.loading}
              >
                完成修改
              </Button>
              <Button
                type="dashed"
                style={{ marginLeft: "15px" }}
                onClick={() => {
                  this.setState({
                    visible: false,
                    viewKey: this.state.viewKey + 1,
                    sort: "",
                    // mutualChain: "",
                    name: '',
                    url: '',
                    remarks:''
                  });
                }}
              >
                取消
              </Button>
            </div>
          </Modal>
        </div>
      </div>
    );
  }
}

export default Cities;
