import React, { useState } from 'react'
import './index.scss'
import Button from '../../../../../components/Button'
import { Icon } from '../../../../../components/icons'

interface FlowRecordProps {
}

const FlowRecords: React.FC<FlowRecordProps> = (props) => {

  const userIcon = (val: any) => {
    switch (val) {
      case 1:
        // 创建者
        return <Icon icon={'newlyadded'} className='icon'  ></Icon>
      case 2:
        //签收签核
        return <Icon icon={'signIn'} className='icon' ></Icon>
      case 3:
        // 添加
        return <Icon icon={'edit'} className='icon' ></Icon>
      case 4:
        // 标记
        return <Icon icon={'fistribution'} className='icon' ></Icon>
      case 5:
        // 添加用户
        return //<Icon icon={'examine'} className='icon' ></Icon>
      case 6:
        // 新增用户
        return <Icon icon={'adduser'} className='icon' ></Icon>
      default:
        return
    }
  }
  const daer: any = {
    name: "唐舞麟",
    //t2： 1是拒绝2.驳回，3是同意
    // conent：备注内容
    // ent:1为提交者，0为审批着
    // 
    first: [
      { name: '唐舞麟', ent: '1', icon: 1, conents: '文件', time: '2022-12-22 23:59:59' },
      { name: '唐三', t2: 1, conent: '同意请求，', ent: '0', icon: 2, time: '2022-12-22 23:59:59' },
      { name: '唐浩', t2: 1, conent: '同意请求，', ent: '0', icon: 3, time: '2022-12-22 23:59:59' },
      { name: '宁荣荣', t2: 3, conent: '同意请求', ent: '0', icon: 4, time: '2022-12-22 23:59:59' },
      { name: '唐舞麟', ent: '1', icon: 6, conents: '文件', time: '2022-12-22 23:59:59' },
      { name: '唐三', t2: 3, conent: '同意请求，', ent: '0', icon: 6, time: '2022-12-22 23:59:59' },
    ],
  }

  return (
    <div className='process_information'>
      <div className='process_flow_chart'>
        {/*图标线 */}
        <div className='process_icon'>
          <div className='process_icon_icon'>
            <Icon icon={'newlyadded'} className='icon' ></Icon>
          </div>
          <div className='process_icon_line'></div>
        </div>
        {/* 内容 */}
        <div className='process_cosntent'>
          {/* 头部 */}
          <div className='process_head_area'>
            <div className='process_head_area_head'>
              <div className='process_head_area_constent'>
                <span className='process_head_area_name'>唐舞麟</span>
                {/* 干了什么事标题 */}
                <span className='process_head_operation'>创建</span>
              </div>
              {/* 下拉图标 */}
              <span className='process_head_demand_button' >
                <Button level='link' onClick={() => {
                  // setCollpased(!collpased) 
                }}>
                  {/* <Icon icon={'more'} className='icon' /> */}
                </Button>
              </span>
            </div>
            <div className='process_head_time'>
              2022-12-22 23:59:59
            </div>
          </div>
          {/* 下拉内容*/}
          <div className='process_drop_down_area'>


          </div>
        </div>

      </div>
      {

        daer.first.map((item: any) => {
          const [collpased, setCollpased] = useState<boolean>(false)
          return <div className='process_flow_chart'>
            {/*图标线 */}
            <div className='process_icon'>
              <div className='process_icon_icon'>
                {
                  userIcon(item.icon)
                }
              </div>
              <div className='process_icon_line'></div>
            </div>
            {/* 内容 */}
            <div className='process_cosntent'>
              {/* 头部 */}
              <div className='process_head_area'>
                <div className='process_head_area_head'>
                  <div className='process_head_area_constent'>
                    {/* 名字 */}
                    <span className='process_head_area_name'>{item.name}</span>
                    {/* 干了什么事标题 */}

                    {item.ent == 0 &&
                      < span className='process_head_operation' style={{ color: '#red' }}>
                        {item?.t2 == 1 ?
                          '同意'
                          :
                          item?.t2 == 2 ?
                            '驳回'
                            :
                            '拒绝'
                        }
                      </span>}

                    {/* 什么人干了什么事 */}
                    <span className='process_head_action'>新增</span>
                    {/* 添加提示 */}

                    {/* <span className='process_head_demand'>内容</span> */}
                    <span className='process_head_demand'>审批人</span>

                    <span className='process_head_demand'>并添加</span>
                    <span className='process_head_demand'>备注</span>
                  </div>

                  {/* 下拉图标 */}
                  <span className='process_head_demand_button' >
                    <Button level='link' onClick={() => { setCollpased(!collpased) }}  >
                      <Icon icon={'more'} className='icon' />
                    </Button>
                  </span>
                </div>
                <div className='process_head_time'>
                  {item.time}
                </div>
              </div>

              {/* 下拉内容*/}
              {
                collpased && <div className='process_drop_down_area'>
                  <div className='process_drop_down_area_div'>
                    <div className='process_drop_down_area_conteng'>
                      <p>
                        新增审批人:<span>唐梧桐</span><span>唐笑</span>
                      </p>

                    </div>
                    <div className='process_drop_down_area_conteng'>
                      <p>
                        同意申请
                      </p>
                    </div>
                  </div>

                </div>
              }
            </div>

          </div>
        })

      }
      <div className='process_flow_chart'>
        {/*图标线 */}
        <div className='process_icon'>
          <div className='process_icon_icon'>
            <Icon icon={'signIn'} className='icon' ></Icon>
          </div>
        </div>
        {/* 追后一个 */}
        <div className='process_cosntent'>
          {/* 头部 */}
          <div className='process_head_area'>
            <div className='process_head_area_head'>
              <div className='process_head_area_constent'>
                {/* 名字 */}
                <span className='process_head_area_name'>唐舞麟</span>
                {/* 干了什么事标题 */}
                <span className='process_head_operation'>结束</span>
              </div>
            </div>
            <div className='process_head_time'>
              2022-12-22 23:59:59
            </div>
          </div>
        </div>
      </div>
    </div >
  )
}
// 名字 ：干了什么事 ：什么事情的内容
export default FlowRecords