import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Table, Button, Modal, Row, Col, Switch, Popconfirm, Icon } from 'antd'
import { required, maxLength, allNumber } from '../../components/widget/reduxForm/validate'
import { Field, reduxForm, change, reset, formValueSelector, getFormValues, initialize, submit, FieldArray } from 'redux-form'

import BreadcrumbWarp from '../../components/commondComponents/newBreadcrumbWarp'
import InputField from '../../components/widget/reduxForm/InputField'
import NoDataNew from '../../components/widget/prompt/NoDataNew'
import { sortData } from '../../utils/commonUtils'

import cx from 'classnames'
import s from '../employee/employee.les'
import SearchForm from '../../components/widget/reduxForm/SearchForm'
import SearchInputGroupWrap from '../../components/widget/reduxForm/SearchInputGroupWrap'
import SearchFormInputField from '../../components/widget/reduxForm/SearchFormInputField'
import PaginationWrap from '../../components/widget/reduxForm/PaginationWrap'
import NoData from '../../components/widget/prompt/NoData'
import {
    loadNailApprovalListAction, loadNailApprovalDetailAction
} from '../../redux/actions/recruit'
import {
    selectCompanyList
} from '../../redux/actions/amoeba'
import x from '../salary/financial.les';
import moment from 'moment';

const crumbsData = [
    { name: '钉钉审批流程', link: 'javascript:;', isLink: false },
    { name: '审批列表', link: '#/container/customer', isLink: true }
]
const fieldTypeOptions = [
    { 'id': 'text', "name": '文本' },
    { 'id': 'number', "name": '数值' },
    { 'id': 'date', "name": '日期' },
    { 'id': 'range', "name": '时间段' },
    { 'id': 'select', "name": '下拉列表' }
]
const statusOption = [
    { 'id': 'RUNNING', 'name': '审核中' },
    { 'id': 'COMPLETED', 'name': '已同意' },
    { 'id': 'TERMINATED', 'name': '已拒绝' },
]
const categoryOptions = [
    { 'id': '客户', 'name': '客户' },
    { 'id': '客户-共享', 'name': '客户-共享' },
    { 'id': '客户-公共池申领', 'name': '客户-公共池申领' },
    { 'id': '服务合同', 'name': '服务合同' },
    { 'id': '服务合同-合同新增', 'name': '服务合同-合同新增' },
    { 'id': '服务合同-合同续签', 'name': '服务合同-合同续签' },
    { 'id': '服务合同-合同规则', 'name': '服务合同-合同规则' },
    { 'id': '服务合同-协议审批', 'name': '服务合同-协议审批' },
    { 'id': '服务合同-终止合同', 'name': '服务合同-终止合同' },
    { 'id': '返利', 'name': '返利' },
    { 'id': '返利-规则添加', 'name': '返利-规则添加' },
    { 'id': '返利-返利单提交', 'name': '返利-返利单提交' },
    { 'id': '开票-垫款', 'name': '开票-垫款' }
]
class NailApproval extends Component {
    constructor(props) {
        super(props)
        this.searchGrid = this.searchGrid.bind(this)
        this.renderDetailModal = this.renderDetailModal.bind(this)
        this.linkBackDetail = this.linkBackDetail.bind(this)
        this.state = {
            showDetail: false
        }
    }

    componentDidMount() {
        const { dispatch } = this.props
        dispatch(loadNailApprovalListAction(`?offset=0&limit=10`))
        dispatch(selectCompanyList())
    }
    searchGrid(values) {
        const { dispatch } = this.props;
        let params = [];
        if (values.offset) {
            params.push(`?offset=${values.offset}`)
        } else {
            params.push(`?offset=0`)
        }
        if (values.limit) {
            params.push(`&limit=${values.limit}`)
        }
        if (values.category) {
            params.push(`&category=${values.category}`)
        }
        if (values.status) {
            params.push(`&status=${values.status}`)
        }
        if (values.belong_org_id) {
            params.push(`&belong_org_id=${values.belong_org_id}`)
        }
        if (values.apply_at) {
            params.push(`&apply_at=${values.apply_at}`)
        }
        dispatch(loadNailApprovalListAction(params.join('')))
    }
    columnWidth(arr) {
        let num = 0;
        arr.map(cl => {
            num += cl.width
        })
        return num
    }
    lookDetail(r) {
        const { dispatch, change } = this.props;
        this.setState({
            showDetail: true,
            nail_record: r
        })
        dispatch(loadNailApprovalDetailAction(r.process_instance_id))
    }
    getColumns() {
        return [
            {
                title: '项目类型',
                dataIndex: 'category',
                key: 'category',
                width: 160,
            }, {
                title: '明细',
                dataIndex: 'Name',
                key: 'Name',
                width: 160,
            }, {
                title: '审批状态',
                dataIndex: 'status',
                key: 'status',
                width: 120,
                render: (t, r) => {
                    return (
                        <span>
                            {
                                t == 'AUDITING' ? '待审核' :
                                    t == 'RUNNING' ? '审核中' :
                                        t == 'COMPLETED' ? '已同意' :
                                            t == 'TERMINATED' ? '已拒绝' :
                                                null
                            }
                        </span>
                    )
                }
            }, {
                title: '阿米巴',
                dataIndex: 'belong_org',
                key: 'belong_org',
                width: 140,
            }, {
                title: '审批人',
                dataIndex: 'approvers',
                key: 'approvers',
                width: 120,
            }, {
                title: '备注',
                dataIndex: 'comment',
                key: 'comment',
                width: 200,
            }, {
                title: '申请人',
                dataIndex: 'apply_by',
                key: 'apply_by',
                width: 120,
            }, {
                title: '申请时间',
                dataIndex: 'apply_at',
                key: 'apply_at',
                width: 160,
                render: (t, r) => {
                    return (
                        <span>{moment(t * 1000).format('YYYY-MM-DD HH:mm')}</span>
                    )
                }
            }, {
                title: '申请理由',
                dataIndex: 'apply_for',
                key: 'apply_for',
                width: 180,
            }, {
                title: '操作',
                dataIndex: 'opt',
                key: 'opt',
                width: 120,
                render: (t, r) => {
                    return (
                        <a onClick={this.lookDetail.bind(this, r)}>审批记录</a>
                    )
                }
            },
        ]
    }
    linkBackDetail() {
        this.setState({
            showDetail: false
        })
    }
    renderDetailModal() {
        const { nail_approval_detail = {} } = this.props;
        const { nail_record } = this.state
        return (
            <div className={cx(x.detail_warp_f)}>
                <b className={cx(x.detail_warp_opacity)}></b>
                <div className={cx(x.detail_modal_select)}>
                    <div className={cx(x.detail_warp)}>
                        <div className={cx(x.text_title)} style={{ width: '60px' }} onClick={this.linkBackDetail}><Icon type="left-circle" style={{ fontSize: '17px', marginRight: '8px' }} />返回</div>
                        <div className={cx(x.detail_text_warp)}>
                            <Row className={cx(x.detail_text)}>
                                <Col span={13} >
                                    <span className={cx(s.title)}>申请人：</span>
                                    <span className={cx(s.data)}>{nail_approval_detail && nail_approval_detail.user_name}</span>
                                </Col>
                                <Col span={13} >
                                    <span className={cx(s.title)}>状态：</span>
                                    <span className={cx(s.data)}>{nail_approval_detail && nail_approval_detail.status == 'COMPLETED' ? '已同意' : nail_approval_detail.status == 'RUNNING' ? '审核中' : nail_approval_detail.status == 'TERMINATED' ? '已拒绝' : null}</span>
                                </Col>
                                <Col span={13} >
                                    <span className={cx(s.title)}>申请时间：</span>
                                    <span className={cx(s.data)}>{nail_approval_detail && nail_approval_detail.create_time}</span>
                                </Col>
                                <Col span={13} >
                                    <span className={cx(s.title)}>审批类型：</span>
                                    <span className={cx(s.data)}>{nail_record && nail_record.category}</span>
                                </Col>
                                <Col span={13} >
                                    <span className={cx(s.title)}>审批内容：</span>
                                    <span className={cx(s.data)}>{nail_approval_detail && nail_approval_detail.title}</span>
                                </Col>
                                {
                                    nail_approval_detail && nail_approval_detail.operation_records && nail_approval_detail.operation_records.length > 0 && nail_approval_detail.operation_records.map(cl => {
                                        return (
                                            <Col span={24} >
                                                <Row>
                                                    <Col span={12}>
                                                        <span className={cx(x.title)}>{cl.user}({cl.operation_result == 'AGREE' ? '已同意' : cl.operation_result == 'REFUSE' ? '已拒绝' : null})</span>
                                                        {/* <span className={cx(s.data)}>{nail_approval_detail&&nail_approval_detail.title}</span> */}
                                                    </Col>
                                                    <Col span={12}>
                                                        <span className={cx(x.title)}>{cl.date}</span>
                                                    </Col>
                                                </Row>
                                                <div className={s.divider_line}></div>
                                            </Col>
                                        )
                                    })
                                }
                            </Row>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    render() {
        const { nail_approval_list = [], departmentName, admin_orgs, nail_approval_detail = {} } = this.props;
        const { showDetail } = this.state;
        return (
            <div>
                <div style={{ marginBottom: '20px' }}>
                    <BreadcrumbWarp crumbsData={crumbsData} />
                </div>
                <div style={{ padding: '0 20px' }}>
                    <SearchForm
                        formName='nail_approval_search_form'
                        enableKeys={[]}
                        ref="role_search_form"
                        search={this.searchGrid}
                    >
                        <SearchInputGroupWrap>
                            <div>
                                <SearchFormInputField
                                    label='审批类型'
                                    name='category'
                                    type="select"
                                    placeholder={`请选择审批类型`}
                                    inputStyle={{ width: '100%' }}
                                    options={categoryOptions}
                                />
                            </div>
                            <div>
                                <SearchFormInputField
                                    label='状态'
                                    name='status'
                                    type="select"
                                    placeholder={`请选择状态`}
                                    inputStyle={{ width: '100%' }}
                                    options={statusOption}
                                />
                            </div>
                            <div>
                                <SearchFormInputField
                                    label={departmentName}
                                    name='belong_org_id'
                                    type="select"
                                    placeholder={`请选择${departmentName}`}
                                    inputStyle={{ width: '100%' }}
                                    options={admin_orgs}
                                />
                            </div>
                            <div>
                                <SearchFormInputField
                                    label='申请时间'
                                    name='apply_at'
                                    type="date"
                                    unix
                                    inputStyle={{ width: '100%' }}
                                />
                            </div>
                        </SearchInputGroupWrap>
                        {
                            nail_approval_list && nail_approval_list.length > 0 ? <div className='resetTableStyleWrap'>
                                <Table pagination={false} dataSource={nail_approval_list} scroll={{ x: this.columnWidth(this.getColumns()) }} columns={this.getColumns()} />
                                <PaginationWrap style={{ marginTop: '20px' }} formName='nail_approval_search_form' onChange={this.searchGrid} />
                            </div> : <NoData />
                        }
                    </SearchForm>

                </div>
                {
                    showDetail && this.renderDetailModal()
                }
            </div>
        )
    }
}

const submitForm = (values, dispatch, props) => {

}

const selector = formValueSelector('nail_approval_form')

NailApproval = reduxForm({
    form: 'nail_approval_form',
    onSubmit: submitForm,
})(NailApproval)

const mapState = (state) => {
    const {
        recruit: { nail_approval_list, nail_approval_detail },
        custome: { departmentName },
        amoeba: { admin_orgs }
    } = state
    return {
        nail_approval_list,
        departmentName,
        admin_orgs,
        nail_approval_detail
    }
}

export default connect(mapState)(NailApproval)