import React, { Component } from 'react';
import {
  Modal,
  Tooltip,
} from "antd";
import './index.less';
import TabelContent from "../../../../common/tabelContent";
import {
  getApprovedState,
  getLiquidationStatus,
  getNewOrderStatus,
  getProcessStatus,
} from "../../../../tools";

import Details from './details';

class DetailedList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: "编号",
          dataIndex: "key",
          key: "key",
          width: 120,
        },
        {
          title: "省份",
          dataIndex: "provinceName",
          key: "provinceName",
          width: 120,
        },
        {
          title: "跟进人",
          dataIndex: "name",
          key: "name",
          width: 320,
        },
        {
          title: "高新总数",
          dataIndex: "quantity",
          key: "quantity",
          width: 120,
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              visible1: true,
              aid: record.aid
            })
          }
        },
        {
          title: "已通过高新数",
          dataIndex: "pass",
          key: "pass",
          width: 120,
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              visible1: true,
              aid: record.aid
            })
          }
        },
        {
          title: "已签回",
          dataIndex: "signBacks",
          key: "signBacks",
          width: 120,
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              visible1: true,
              aid: record.aid
            })
          }
        },
        {
          title: "未通过高新数",
          dataIndex: "notPass",
          key: "notPass",
          width: 120,
          className: 'projectTable',
          onCellClick: (record, event) => {
            event.stopPropagation();
            this.setState({
              visible1: true,
              aid: record.aid
            })
          }
        },
      ],
      columns1: [
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo",
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          render: text => {
            return (
              <Tooltip title={text}>
                <div
                  // style={{
                  //   maxWidth: '150px',
                  //   overflow: 'hidden',
                  //   textOverflow: "ellipsis",
                  //   whiteSpace: 'nowrap',
                  // }}
                >{text}</div>
              </Tooltip>
            )
          }
        },
        {
          title: "订单部门",
          dataIndex: "depName",
          key: "depName",
        },
        {
          title: "下单时间",
          dataIndex: "createDate",
          key: "createTime",
        },
        {
          title: "合同签订时间",
          dataIndex: "signDate",
          key: "signDate",
        },
        {
          title: "流程状态",
          dataIndex: "processStatus",
          key: "processStatus",
          render: (text, record) => {
            return getProcessStatus(text, record.examineName, record.approval);
          },
        },
        {
          title: "签单金额(万元)",
          dataIndex: "totalAmount",
          key: "totalAmount",
        },
        {
          title: "开票金额(万元)",
          dataIndex: "invoiceAmount",
          key: "invoiceAmount",
        },
        {
          title: "已收款(万元)",
          dataIndex: "settlementAmount",
          key: "settlementAmount",
        },
        {
          title: "结算状态",
          dataIndex: "liquidationStatus",
          key: "liquidationStatus",
          render: (text) => {
            return getLiquidationStatus(text);
          },
        },
        {
          title: "是否特批",
          dataIndex: "approval",
          key: "approval",
          render: (text) => {
            return getApprovedState(text);
          },
        },
        {
          title: "订单状态",
          dataIndex: "orderStatus",
          key: "orderStatus",
          render: (text) => {
            return getNewOrderStatus(text);
          },
        },
        {
          title: "财务负责人",
          dataIndex: "financeName",
          key: "financeName",
        },
      ],
      searchList: [
        {
          type: 'newDepartmentSelect',
          dataKey: 'deps',
          placeholder: '请选择部门'
        },
        {
          type: 'autoComplete',
          dataTitle: 'aName',
          dataKey: 'aid',
          api: '/api/admin/customer/listAdminByName',
          search: 'adminName',
          placeholder: '请输入跟进人'
        },
        {
          type: 'select',
          dataKey: 'sort',
          placeholder: '请选择排序',
          selectList: [
            {
              value: '0',
              label: '按总金额排序'
            },
            {
              value: '1',
              label: '按数量排序'
            },
          ]
        },
        {
          type: 'times',
          title: '时间',
          dataKey: ['startDate', 'endDate'],
        },
      ],
      searchList1: [
        {
          type: 'text',
          placeholder: '请输入订单编号',
          dataKey: 'orderNo',
        },
        {
          type: 'text',
          placeholder: '请输入客户名称',
          dataKey: 'name',
        },
        {
          type: 'text',
          placeholder: '请输入合同编号',
          dataKey: 'contractNo',
        },
        {
          type: 'select',
          dataKey: 'liquidationStatus',
          placeholder: '请选择结算状态',
          selectList: [
            {
              value: '0',
              label: '首付待付请'
            },
            {
              value: '1',
              label: '尾款待付清'
            },
            {
              value: '2',
              label: '已付清'
            },
          ]
        },
        {
          type: 'select',
          dataKey: 'approval',
          placeholder: '请选择特批状态',
          selectList: [
            {
              value: '0',
              label: '非特批'
            },
            {
              value: '1',
              label: '特批'
            },
          ]
        },
        {
          type: 'select',
          dataKey: 'amountStatus',
          placeholder: '请选择签单金额',
          selectList: [
            {
              value: '0',
              label: '10万元以下'
            },
            {
              value: '1',
              label: '10~20万元'
            },
            {
              value: '2',
              label: '20~30万元'
            },
            {
              value: '3',
              label: '30~40万元'
            },
            {
              value: '4',
              label: '40万元以上'
            },
          ]
        },
      ],
      searchConfig: {},
    }
  }

  render() {
    return (
      <div>
        <Modal
          maskClosable={false}
          visible={this.props.visible}
          onOk={this.props.onCancel}
          onCancel={this.props.onCancel}
          width='1200px'
          title={this.props.recordInfor.provinceName + '需复审详细'}
          footer=''
          className="admin-desc-content">
          <div className="user-content">
            <TabelContent
              scroll={{ x: 0, y: 500 }}
              searchList={this.state.searchList}
              columns={this.state.columns}
              searchConfig={this.props.searchConfig}
              onRowClick={() => { }}
              searchOperation={(value) => {
                for (let i of Object.keys(value)) {
                  if (i === 'sort' || i === 'pageNo' || i === 'pageSize') {
                    delete value[i]
                  }

                }
                this.setState({ searchConfig: value })
              }
              }
              tabelApi={'/api/admin/orderProject/highNewRetrialList'}
              exportApi={'/api/admin/orderProject/highNewRetrialList/export'}
              query={{
                province: this.props.recordInfor.province,
              }}
              dataProcessing={(data) => {
                let theArr = [];
                for (let i = 0; i < data.data.length; i++) {
                  let thisdata = data.data[i];
                  thisdata.key = i + 1;
                  theArr.push(thisdata);
                }
                return theArr;
              }}
            />
          </div>
          {this.state.visible1 && <Modal
            maskClosable={false}
            visible={this.state.visible1}
            onOk={() => {
              this.setState({
                visible1: false,
                aid: '',
              })
            }}
            onCancel={() => {
              this.setState({
                visible1: false,
                aid: '',
              })
            }}
            width='1600px'
            title='客户订单列表'
            footer=''
            className="admin-desc-content">
            <div className="user-content">
              <TabelContent
                scroll={{ x: 1200 }}
                searchConfig={JSON.parse(JSON.stringify(this.state.searchConfig))}
                searchList={this.state.searchList1}
                columns={this.state.columns1}
                tabelApi={'/api/admin/newOrder/orderNewList'}
                query={{
                  aid: this.state.aid,
                  specially: 9,
                }}
                onRowClick={(obj) => {
                  this.setState({
                    detailsVisible: true,
                    orderNo: obj.orderNo
                  })
                }}
                dataProcessing={(data) => {
                  let theArr = [];
                  for (let i = 0; i < data.data.list.length; i++) {
                    let thisdata = data.data.list[i];
                    thisdata.key = (data.data.pageNo - 1) * data.data.pageSize + i + 1;
                    theArr.push(thisdata);
                  }
                  return theArr;
                }}
              />
            </div>
          </Modal>}
        </Modal>
        {this.state.detailsVisible && <Details
          orderNo={this.state.orderNo}
          visible={this.state.detailsVisible}
          onCancel={() => {
            this.setState({
              detailsVisible: false,
              orderNo: ''
            })
          }}
        />}
      </div>
    )
  }
}

export default DetailedList;