import React, { useState, useEffect } from 'react'
import { Row, Col, Form, Input, Select, Pagination, Empty } from 'antd';
import { useIntl, connect, history, Link, getLocale } from 'umi';
import { SearchOutlined } from '@ant-design/icons';
import Header from '@/components/UserHeader'
import UserBanner from '@/components/UserBanner'
import { debounce } from 'lodash';
import styles from './index.less'
import { GetTargetGroupSelect, GetUserLearningJourneyList } from '@/services/journeyList';
import NoData from '@/components/NoData';


export default (props) => {
    const intl = useIntl()
    const { Item } = Form
    const { Option } = Select
    const [form] = Form.useForm()
    const [current, setCurrentPage] = useState(1)
    const [perItemPage, setperItemPage] = useState(10)
    const [searchWord, setSearchWord] = useState('')
    const [souceData, setSouceData] = useState([])
    const [basicData, setBasicData] = useState({});
    const { Function, Level } = basicData;
    useEffect(() => {
        GetTargetGroupSelect({}).then(res => {
            if (!!res) {
                setBasicData(res)
            }
        })
    }, [])

    const [currentFormValue, setCurrentFormValue] = useState({
        Function: '',
        StaffLevel: '',
    })

    useEffect(() => {
        getTableData2({ ...currentFormValue })
    }, [current, perItemPage, searchWord])

    const getTableData2 = ({
        StaffLevel = '',
        Function = '',
    } = {}) => {
        GetUserLearningJourneyList(
            {
                StaffLevel,
                Function,
                Keywords: searchWord,
                Page: current,
                ItemsPerPage: perItemPage,
            }
        ).then(res => {
            if (res.ReturnCode == 1001 && res.Data.length > 0) {
                setSouceData(res)
            } else {
                setSouceData([])
            }
        })
    }

    // 表单数据变动触发表格数据更新
    const onFormValuesChange = debounce((changedValues, allValues) => {
        const data = {
            "Function": allValues.Function,
            "StaffLevel": allValues.Level,
        }
        setCurrentFormValue(data)//把对象存入 hook
        if (changedValues.hasOwnProperty('keyword')) return//手动输入触发onFormValuesChange事件（搜索框） 不发请求
        getTableData2({ ...data })//打散 筛选改变的参数
        setSearchWord('')
        setCurrentPage(1)//发2次请求，这里在最下面，保证后一次请求 页码重置为1

        form.setFieldsValue({
            keyword: ''
        });

    }, 300)

    // 关键词搜索
    const searchParamsChange = (value) => {
        setSearchWord(value)
        setCurrentPage(1)
    };


    const initialValues = {
        Function: '1005001',
        Level: '1007001',
    };

    const handleLink = (Id) => {
        history.push({
            pathname: '/userInterface/learningJourneyDetails',
            search: `?id=${Id}`,
        })
    }

    const onPageChange = (current, pageSize) => {
        setCurrentPage(current)
        setperItemPage(pageSize)
        if (showOne) {
            setCurrentPage(1)
        }
    }
    let showOne = false
    const handlePageSizeChange = (page, pageSize) => {
        showOne = true
    }

    return (
        <>
            <Header isActive={false} tabOr={true} />
            <UserBanner />
            <div className={styles.Box}>
                <Form
                    form={form}
                    initialValues={initialValues}
                    onValuesChange={onFormValuesChange}
                    name="basic"
                >
                    <Row className={styles.RowBox}>

                        <Col span={8}>
                            <Item
                                labelCol={{ span: 6, offset: 0 }}
                                wrapperCol={{ span: 16, offset: 0 }}
                                label={<span style={{ fontWeight: 'normal', fontSize: '16px' }}>{intl.formatMessage({ id: 'UserLearJ.Level' })}</span>}//职位级别
                                name="Level"
                            >
                                <Select>
                                    {!!Level && Level.length ? Level.map(item => (
                                        <Option value={item.Code} key={item.Code}> {getLocale() == 'zh-CN' ? item.ValueCN : item.Value}</Option>
                                    )) : ""}
                                </Select>
                            </Item>
                        </Col>
                        <Col span={6}>

                            <Item
                                label={<span style={{ fontWeight: 'normal', fontSize: '16px' }}>{intl.formatMessage({ id: 'UserLearJ.Function' })}</span>}//业务部门
                                name="Function"
                            >
                                <Select>
                                    {!!Function && Function.length ? Function.map(item => (
                                        <Option value={item.Code} key={item.Code}> {getLocale() == 'zh-CN' ? item.ValueCN : item.Value}</Option>
                                    )) : ""}
                                </Select>
                            </Item>
                        </Col>

                        <Col span={8}>

                            <Item
                                labelCol={{ span: 8, offset: 0 }}
                                wrapperCol={{ span: 14, offset: 0 }}
                                label={<span style={{ fontWeight: 'normal', fontSize: '16px' }}>{intl.formatMessage({ id: 'UserLearJ.Search' })}</span>}
                                name="keyword"
                            >

                                <Input.Search
                                    placeholder={intl.formatMessage({ id: 'UserLearJ.path' })}
                                    allowClear
                                    onSearch={(value) => searchParamsChange(value)}
                                />
                            </Item>
                        </Col>
                    </Row>

                </Form>
                <div className={styles.line}></div>
                <Row className={styles.RowBoxDown}>

                    {!!souceData.Data ? souceData.Data.map((item, index) => {
                        return (
                            <div className={styles.imgTxtBox}>
                                {item.IsNewIindicator ? <div className={styles.triangle}><span>NEW</span></div> : null}
                                <img onClick={() => { handleLink(item.Id) }} className={styles.img} src={`${ATTACHMENT_URL}${item.ImageUrl}`} alt="Network error" />
                                <h1 className={styles.txt}>{item.Title}</h1>
                            </div>
                        )
                    }) : <div className={styles.Empty}> <NoData></NoData> </div>}

                </Row>

                {!!souceData.Data ?
                    <Pagination
                        className={styles.Pagination}
                        total={souceData.TotalCount}
                        defaultPageSize={perItemPage}
                        defaultCurrent={current}
                        current={current}
                        showSizeChanger
                        size={'small'}
                        onChange={onPageChange}
                        onShowSizeChange={handlePageSizeChange}
                    />
                    : null}
            </div>
        </>
    )
}

.Box {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  margin: 10px auto 120px;

  .line {
    width: 100%;
    background: #eeeeee;
    height: 10px;
  }

  div {
    margin: 0;
  }

  .RowBox {
    padding: 14px 0;
    margin: 10px 0 0;
  }

  .RowBoxDown {
    // padding: 14px 0;
    // margin: 10px 0;
    display: flex;
    justify-content: start // justify-content: space-evenly
      // justify-content: space-between
  }

  .Empty{
    width: 100%;
  }

  .imgTxtBox {
    width: 200px;
    text-align: center;
    position: relative;
    margin: 20px;

    .img {
      width: 200px;
      height: 150px;
      margin: 0 1%;
    }

    .txt {
      margin-top: 10px;
      font-weight: normal;
      font-size: 16px;
      display: inline-block;
    }

    .triangle {
      position: absolute;
      right: -2px;
      top: 0;
      width: 0;
      height: 0;
      border-top: 46px solid #86bc25;
      border-left: 66px solid transparent;

      span {
        color: #fff;
        position: absolute;
        right: 5px;
        top: -40px;
        font-size: 12px;
        display: inline-block;
      }
    }
  }

  .Pagination{
      width: 100%;
      display: inline-block;
      margin: 80px auto 50px;
      text-align: center;
  }


  .ColFlexBox {
    display: flex;
    align-items: center;
    padding: 14px 0;
  }

 :global{
    .ant-pagination-item-active{
        background: #86bc25;
        border-color: #86bc25;
    }

    .ant-pagination-item-active a {
        color: #fff;
    }
  }
}