import React from 'react';
import QueryWithTable from '../../../components/TableWithQuery';
import { Button } from 'antd';
import PopDelete from '../../../components/PopDelete';
import { SUPPLIER_SETTLE_TYPE_ENUM } from '../../enums/supplier_enums';
import { booleanEnumFactory } from '../../enums/common_enums';
import req_url from '../../config/req_url';

const BOOLEAN_ENUM = booleanEnumFactory();
const SETTLE_ENUM = booleanEnumFactory(
  {
    trueLabel: <span>已结算</span>,
  },
  {
    falseLabel: <span style={{ color: 'red' }}>未结算</span>,
  },
);
const month = new Date().getMonth();

class OrderSettleList extends QueryWithTable {
  constructor(props) {
    super(props);
    this.TABLE_CONFIG = {
      ...this.TABLE_CONFIG,
      PAGE_HEADER_PROPS: {
        title: false,
      },
      REQUEST_URL: req_url.settlement.order_settle_list,
      COLUMNS: [
        {
          title: '供应商编号',
          align: 'center',
          dataIndex: 'supplier_id',
        },
        {
          title: '供应商名称',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '对接人/电话',
          align: 'center',
          dataIndex: '',
          render: record => {
            const { docking_name, docking_phone } = record;
            return (
              <span>
                {docking_name}/{docking_phone}
              </span>
            );
          },
        },
        {
          title: '是否合作',
          align: 'center',
          dataIndex: 'is_cooperation',
          render: value => (BOOLEAN_ENUM.EXTRA[value] || {}).label,
        },
        {
          title: '结算方式',
          align: 'center',
          dataIndex: 'settlement_unit',
          render: value => ['-', '单结', '月结'][value] || '-',
        },
        {
          title: `${month === 0 ? '12' : month}月订单数量`,
          align: 'center',
          dataIndex: 'order_count',
        },
        {
          title: `${month === 0 ? '12' : month}月订单金额`,
          align: 'center',
          dataIndex: 'order_all_price',
        },
        {
          title: '是否结算',
          align: 'center',
          dataIndex: 'is_settlement',
          render: value => (SETTLE_ENUM.EXTRA[value] || {}).label || '-',
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: '',
          render: record => {
            return (
              <div>
                <Button
                  type="link"
                  onClick={() => {
                    // router.push('/page/settlement/supplier_detail/' + record.supplier_id);
                  }}
                >
                  查看
                </Button>
                <PopDelete
                  btnProps={{ disabled: true }}
                  confirmCB={() => {
                    // console.log('record', record);
                  }}
                />
              </div>
            );
          },
        },
      ],
    };
    this.state = {
      ...this.state,
      queryFilterArr: [
        {
          label: '供应商编号',
          name: 'supplier_id',
          span: 6,
          placeholder: '输入供应商编号',
        },
        {
          label: '供应商名称',
          name: 'supplier_name',
          span: 6,
          placeholder: '输入供应商名称',
        },
        {
          label: '对接人姓名',
          name: 'docking_name',
          span: 6,
          placeholder: '输入对接人姓名',
        },
        {
          label: '对接人电话',
          name: 'docking_phone',
          span: 6,
          placeholder: '输入对接人电话',
        },
      ],
      queryParams: {
        type: SUPPLIER_SETTLE_TYPE_ENUM.ORDER_SETTLE,
        supplier_id: '',
        supplier_name: '',
        docking_name: '',
        docking_phone: '',
      },
    };
  }
}

export default OrderSettleList;