import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Row, Col, Select, Spin, Table, Input, Button, Space, Tooltip, Popconfirm, notification } from 'antd';
import { SyncOutlined, PlusOutlined, ArrowUpOutlined, EditTwoTone, DeleteOutlined, VideoCameraOutlined, ZoomInOutlined, CaretUpFilled, CaretDownFilled } from '@ant-design/icons';
import { GetVideoConfigList, deleteInsertVideoConfig } from '@/services/platform/videoManger';
import AddModal from './AddModal';
import CheckModal from './CheckModal';
import VideoModal from './VideoModal';
import voca from 'voca';

const videoManager = () => {
    const [configurationType, setConfigurationType] = useState('1')
    const [loading, setLoading] = useState(false); // 加载
    const [searchWord, setSearchWord] = useState(''); // 关键字
    const { Search } = Input;
    const [addVisible, setAddVisible] = useState(false)
    const [checkVisible, setCheckVisible] = useState(false)
    const [videoVisible, setVideoVisible] = useState(false)
    const [type, setType] = useState('萤石云')//视频厂商类型
    const [type1, setType1] = useState('bb')//表单样式
    const [kind, setKind] = useState('')
    const [tableData, setTableData] = useState('')
    const [flag, setFlag] = useState(0)
    const [obj, setObj] = useState({})
    const [show1, setShow1] = useState('block')
    const [show2, setShow2] = useState('none')

    const columns = [
        {
            title: '名称',
            dataIndex: 'Name',
            key: 'Name',
            width: 200,
            align: 'center'
        }, {
            title: '视频厂商',
            dataIndex: 'VideoManufacturer',
            key: 'VideoManufacturer',
            width: 150,
            align: 'center'
        }, {
            title: '登录名',
            dataIndex: 'LoginName',
            key: 'LoginName',
            width: 350,
            align: 'center'
        }, {
            title: '登录密码',
            dataIndex: 'LoginPwd',
            key: 'LoginPwd',
            width: 350,
            align: 'center'
        }, {
            title: '设备编码',
            dataIndex: 'EquipmentCode',
            key: 'EquipmentCode',
            width: 150,
            align: 'center'
        }, {
            title: '通道ID',
            dataIndex: 'PassageId',
            key: 'PassageId',
            width: 100,
            align: 'center'
        }, {
            title: '刻录机名称',
            dataIndex: 'RecorderName',
            key: 'RecorderName',
            width: 100,
            align: 'center'
        }, {
            // title: '录入时间',
            dataIndex: 'CreateTime',
            key: 'CreateTime',
            width: 150,
            align: 'center',
            title: (
                      <div>录入时间<Tooltip title="点击降序"><CaretUpFilled style={{display:show1,color:'#1890ff',marginTop: '-13px', marginLeft: '60%'}} onClick={()=> shengxu()}/></Tooltip><Tooltip title="点击升序"><CaretDownFilled style={{display:show2,color:'#1890ff',marginTop: '-13px', marginLeft: '60%'}} onClick={()=> jiangxu()}/></Tooltip></div>
                )
        }, {
            title: '操作',
            dataIndex: '',
            key: '',
            align: 'center',
            render: record => (
                <Space size="middle">
                  <Tooltip title="编辑">
                    <EditTwoTone
                      onClick={() => edit(record)}
                      style={{ fontSize: '16px' }}
                    />
                  </Tooltip>
                  <Tooltip title="预览">
                    <VideoCameraOutlined
                      onClick={() => preView(record)}
                      style={{ fontSize: '16px', color: '#1890FF' }}
                    />
                  </Tooltip>
                  <Tooltip title="查看">
                    <ZoomInOutlined
                      onClick={() => check(record)}
                      style={{ fontSize: '16px', color: '#1890FF' }}
                    />
                  </Tooltip>
                  <Tooltip title="删除">
                    <Popconfirm
                      placement="bottomRight"
                      title={
                        <p>
                          即将删除{' '}
                          <span className={styles.redText}>
                            {voca.stripTags(record.Name)}
                          </span>
                          ，是否确认删除？
                        </p>
                      }
                      okText="确认"
                      cancelText="取消"
                      onConfirm={() => delete1(record)}
                    >
                      <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
                    </Popconfirm>
                  </Tooltip>
                </Space>
              ),
        }
    ]

    const edit = record =>{
       setAddVisible(true)
       setKind('edit')
       setObj(record)
    }
    const preView = record =>{
        setVideoVisible(true)
        setObj(record)
    }
    const check = record =>{
        setCheckVisible(true)
        setObj(record)
        console.log(record)
    }
    const delete1 = record =>{
        deleteInsertVideoConfig({Id:record.Id}).then(res =>{
            if (res.msg === 'Ok') {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '删除成功',
                });
                setFlag(flag + 1);
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }
        })
    }
    const shengxu =()=>{
        setShow1('none')
        setShow2('block')
        setLoading(true)
        GetVideoConfigList({
            VideoType: type,
            pageIndex: 1,
            pageSize: 1000,
            IsAsc:true
        }).then(res=>{
            setLoading(false)
            if(res.msg ==='Ok'){
               setTableData(res.data.list)
            }
        })
    }
    const jiangxu =()=>{
        setShow2('none')
        setShow1('block')
        setLoading(true)
        GetVideoConfigList({
            VideoType: type,
            pageIndex: 1,
            pageSize: 1000,
            IsAsc:false
        }).then(res=>{
            setLoading(false)
            if(res.msg ==='Ok'){
               setTableData(res.data.list)
            }
        })
    }
    useEffect(()=>{
        setLoading(true)
        getData()
    },[])

    useEffect(()=>{
        setLoading(true)
        getData()
    },[type,flag])

    const getData =() =>{
        GetVideoConfigList({
            VideoType: type,
            pageIndex: 1,
            pageSize: 1000
        }).then(res=>{
            setLoading(false)
            if(res.msg ==='Ok'){
               setTableData(res.data.list)
            }
        })
    }
    const selectChange = value => {
        setConfigurationType(value)
        switch (value) {
            case '1':
                setType('萤石云')
                setType1('bb')
                break;
            case '2':
                setType('海康')
                setType1('bb')
                break;
            case '3':
                setType('海康1.2')
                setType1('aa')
                break;
            case '4':
                setType('海康NVR')
                setType1('aa')
                break;
        }
    }

    // 获取搜索框的值
    const handleSearch = e => {
        setSearchWord(e.target.value);
    };
    //搜索
    const submitSearchUser = () => {
        GetVideoConfigList({
            VideoType: type,
            pageIndex: 1,
            pageSize: 1000,
            QueryWhere: searchWord
        }).then(res=>{
            if(res.msg ==='Ok'){
               setTableData(res.data.list)
            }
        })
    }
    //重置
    const handleReset = () => {
        setConfigurationType('1')
        setSearchWord('')
        setType('萤石云') 
        setType1('bb')
        setFlag(flag+1)
    }

    //新增
    const addVideo = () => {
        setAddVisible(true)
        setKind('add')
    }

    const onSubmit =()=>{
        setAddVisible(false)
        setFlag(flag+1)
    }
    return (
        <div className={styles.videoManagerContainer}>
            <Row className={styles.head}>
                <Col span={24}>
                    <span>配置类型：</span>
                    <Select
                        defaultValue="莹石云"
                        value={configurationType}
                        onChange={selectChange}
                        className={styles.sel}
                    >
                        <Option value="1">莹石云</Option>
                        <Option value="2">海康</Option>
                        <Option value="3">海康1.2</Option>
                        <Option value="4">海康NVR</Option>
                    </Select>
                    <span style={{ marginLeft: '50px' }}>快速搜索：</span>
                    <Search
                        style={{ width: 260 }}
                        placeholder="请输入名称，登录名，设备编码查询"
                        onSearch={submitSearchUser}
                        onChange={e => handleSearch(e)}
                        enterButton
                        value={searchWord}
                    />
                    <Button icon={<SyncOutlined className={styles.icon} />} onClick={handleReset} style={{ marginLeft: '30px', verticalAlign: 'middle', marginTop: '-3px' }}>
                        重置
                    </Button>
                    <Button icon={<PlusOutlined className={styles.icon} />} onClick={addVideo} style={{ marginLeft: '49%', verticalAlign: 'middle', marginTop: '-3px' }}>
                        新增
                    </Button>
                </Col>
            </Row>
            <Spin spinning={loading} tip="loading">
                <div className={styles.table}>
                    <Table
                        size="small"
                        bordered
                        rowKey={record => record.Id}
                        columns={columns}
                        dataSource={tableData}
                        scroll={{y: 'calc(100vh - 210px)' }}
                        onRow={record => {
                            return {
                              onDoubleClick: event => {event.stopPropagation(); edit(record)}, //双击
                            };
                          }}
                        pagination={{
                            showTotal: (total, range) =>
                                `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                            pageSizeOptions: [10, 20, 50, 100],
                            defaultPageSize: 20,
                            showQuickJumper: true,
                            showSizeChanger: true,
                        }}
                    />
                </div>
            </Spin>
            <AddModal
                visible={addVisible}
                onCancel={() => {
                    setAddVisible(false)
                }}
                okText="确认"
                cancelText="取消"
                type={type}
                type1={type1}
                kind={kind}
                obj={obj}
                callBackSubmit={onSubmit}
            />
            <CheckModal
                visible={checkVisible}
                onCancel={() => {
                    setCheckVisible(false)
                }}
                okText="确认"
                cancelText="取消"
                type={type}
                type1={type1}
                obj={obj}
            />
            <VideoModal
                visible={videoVisible}
                onCancel={() => {
                    setVideoVisible(false)
                }}
                obj={obj}
            />
           
        </div>
    )
};

export default videoManager;