/*
 * @Author: your name
 * @Date: 2021-07-26 10:13:13
 * @LastEditTime: 2021-08-28 19:31:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /TracerMethodology_PC/src/pages/UserMana/index.js
 */

// import { PlusOutlined } from '@ant-design/icons';
import {Form,Button} from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {
  ProFormDatePicker,
} from '@ant-design/pro-form';
import { getCostShareList,startAllocation,cancelAllocation } from './service';

import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';

const CostShare = () => {

  const [currentTime, setCurrentTime] = useState(moment(new Date()).subtract(1,'months').format('YYYY-MM'));

  const columns = [
    {
      title: '选择年月',
      key: 'date',
      hideInTable: true,
      dataIndex: 'date',
      renderFormItem: (item, {type, defaultRender,formItemProps, fieldProps, ...rest }, form) => {
       
        if (type === 'form') {
          return null;
        }
        return (
          <Form.Item >
             <ProFormDatePicker initialValue={currentTime} 
             fieldProps={{
               picker:'month',format:(value)=>{return value.format('YYYY-MM')},locale:locale,
               onChange:(val)=>{console.log({val});setCurrentTime(val)}
             }}  
             name="date" />
          </Form.Item>
        )
      },
    },
    {
      title: '年份',
      dataIndex: 'year',
      key: 'year',
      hideInSearch: true,
    },
    {
      title: '月份',
      dataIndex: 'month',
      key: 'month',
      hideInSearch: true,
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      hideInSearch: true,
    },
    {
      title: '是否分摊',
      dataIndex: 'isAllocation',
      key: 'isAllocation',
      hideInSearch: true,
      render:bool=>bool?'已分摊':'未分摊'
    },
    {
      title:'操作',
      dataIndex: 'option',
      valueType: 'option',
      key: 'option',
      width: '15%',
      render: (_, record) =>{
          const {isAllocation} = record;
          return [
            <Button
              key="config"
              size='small'
              // disabled={isAllocation}
              type={isAllocation?'default':'primary'}
              onClick={() => {
                setCurrentRow(record);
                optionBtnGroupshandle(isAllocation,record);
              }}
            >
                <span style={{fontSize:12}}>{isAllocation?'撤销分摊':'开始分摊'}</span>
            </Button>
          ]
      },
    },
  ];


  const actionRef = useRef();
  const [currentRow,setCurrentRow] = useState(undefined);
  
  //获取列表
  const getList = async (params = {}, sort, filter) => {
    const {date,pageSize,current}  = params;
 
    const res = await getCostShareList({pageSize,current,date:moment(date).format('YYYY-MM-DD')});
    if(res&&res.status){
     
      return {
        data: res.data.list,
        total: res.data.totalCount,
        success: res.success,
      };
    }
    
  };


  const optionBtnGroupshandle = async (isAllocation,record)=>{
      if(!isAllocation){
        //开始分摊
        await startAllocation({year:currentTime.format('YYYY'),month:currentTime.format('MM')});
      }
      if(isAllocation){
        //撤销分摊
        await cancelAllocation({year:currentTime.format('YYYY'),month:currentTime.format('MM')});
      }
      
      actionRef?.current?.reload();
  }




  return (
    <PageContainer>
      <ProTable
        columns={columns}
        request={getList}
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={() => [
        ]}

        pagination={{
          pageSize: 10,
        }}
        search={{
          defaultCollapsed: false,
          labelWidth: 'auto',
        }}
      />
    </PageContainer>
  );
};

export default CostShare;