import React, { useState, useEffect, useMemo,useRef } from 'react'
import usePageTable from '../../components/crud/usePageTable2';
import { createCrudService } from '../../components/crud/_';
import apiurl from '../../service/apiurl';
import { httppost2,httpget2 } from '../../utils/request';
import CryptoJS from 'crypto-js';
import { Card,Table,Button,Radio,Input,Select,Modal,message  } from "antd"
import ToolBar from "./toolbar"
import "./index.less"
export default function Gbyj() {
    const [searchValue, setSearchVal] = useState()
    const [switchVisible, setSwitchVisible] = useState(false);
    const [bbParams, setBbParams] = useState({})
    const [addOpen, setAddOpen] = useState(false)
    const [mbParams, setMbParams] = useState({})
    const columns = [
        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
        { title: '广播站名称', key: 'name', dataIndex: 'name', width: 200, ellipsis: true },
        {
          title: '告警内容', key: 'warnContent', dataIndex: 'warnContent', width: 300,ellipsis: true 
        },
        { title: '播报时间', key: 'createTime', dataIndex: 'createTime', width: 200 },
        {
          title: '播报人员', key: 'createUserName', dataIndex: 'createUserName', width: 200,ellipsis: true
        },
    ];
    const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gbyj.page).find_noCode);
    //广播站
    const [jh, setJh] = useState([])
    const getJhList = async () => {
      try {
        const res = await httppost2(apiurl.gbyj.list)
        if (res.code == 200) {
          setJh(res.data.map(item => ({label:item.name,value:item.id})))
        }
      } catch (error) {
        console.log(error);
        
      }
    }
    const [mbList, setMbList] = useState([])

    const getMbList = async () => {
        try {
            const res = await httppost2(apiurl.gbyj.mblist);
            if(res.code === 200){
                setMbList(res.data.map(item=>({label:item.content, value:item.id})));
            }
        } catch (error) {
            console.log(error);
        }
      
    }


    // 右边添加模版
    const addMb = async () => {
        try {
            const res = await httppost2(apiurl.gbyj.mbsave, { content: bbParams.warnContent });
            if (res.code == 200) {
                message.success('添加成功');
                getMbList();
            }
        } catch (error) {
            console.log(error);
        }
    }

    // 左边添加模版
    const saveMb = async () => {
        try {
            const res = await httppost2(apiurl.gbyj.mbsave, mbParams);
            if (res.code == 200) {
                message.success('添加成功');
                getMbList();
                setAddOpen(false)
            }
        } catch (error) {
            console.log(error);
        }
    }

    // 删除模版
    const delMb = async () => {
        try {
            const res = await httpget2(apiurl.gbyj.mbDel + `/${bbParams.checkId}`);
            if (res.code == 200) {
                message.success('删除成功');
                getMbList();
                setBbParams({...bbParams,warnContent:'' })
            }
        } catch (error) {
            console.log(error);
        }
    }
    const handleCheck = (e) => {
        const text = mbList.find(item => item.value == e.target.value)?.label
        setBbParams({ ...bbParams, warnContent:text,checkId:e.target.value })
    }

    const gbzChange = (e) => {
        setBbParams({...bbParams,stationIds:e})
    }

    const textChange = (e) => {
        setBbParams({ ...bbParams, warnContent: e.target.value })
    }

    // 播报
   
    const playGb = () => {
        setSwitchVisible(true);
        
    }

    
       //md5加密
    const encryptData = (data) => {
      const encryptedData = CryptoJS.MD5(data).toString();
      return encryptedData;
    }
    // 确认播报
    const confirmBb = async () => {
        const name = localStorage.getItem('userName')
        const id = localStorage.getItem('userId')
        const params = {
            ...bbParams,
            ctrlPass: encryptData(bbParams?.ctrlPass),
            createUserId: id,
            createUserName: name
        }
        try {
            const res = await httppost2(apiurl.gbyj.bb,params);
            if (res.code == 200) {
                setSwitchVisible(false);
                message.success('播报成功');
                refresh()
            }
        } catch (error) {
            console.log(error);
        }
        

    }
    useEffect(()=>{
        const params = {
          search: {
            ...searchValue,
          }
        };
        search(params)
    }, [searchValue])
    
    useEffect(() => {
        getMbList()
        getJhList()
    }, [])
    
  return (
      <div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
          <div className='gb-top'>
              <div className='gb-top-title'>
                  <span className='gb-top-icon'></span>
                   <span style={{fontSize:18}}>广播预警信息查询</span>         
            </div>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              jh={jh}
            />
          </Card>
          <div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
            <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 700px )"}}/>
          </div>
         </div>
          <div className='gb-bottom'>
              <div className='gb-bottom-left'>
                 <div className='gb-top-title'>
                  <span className='gb-top-icon'></span>
                   <span style={{fontSize:18,marginRight:20}}>广播模板</span>  
                   <Button type="primary" onClick={() => setAddOpen(true)}>添加</Button>       
                   <Button type="primary" onClick={delMb}>删除</Button>       
                  </div>
                  <div className='mb-content'>
                      <Radio.Group
                          style={{display: 'flex', flexDirection: 'column'}}
                          options={mbList}
                          onChange={handleCheck}
                      />
                  </div>
              </div>
              <div className='gb-bottom-right'>
               <div className='gb-top-title'>
                  <span className='gb-top-icon'></span>
                   <span style={{fontSize:18,marginRight:20}}>编辑播报内容</span>
                   <Button type="primary" onClick={addMb}>添加为模板</Button>          
                  </div>
                  <div className='right-content'>
                      <div style={{marginRight:10}}>
                      <Input.TextArea
                              style={{ width: '100%', minHeight: '150px' }}
                              allowClear
                              placeholder='请输入播报内容，或者选择广播模板'
                              value={bbParams.warnContent}
                              onChange={textChange}
                      />
                      </div>
                      <div style={{ marginTop: 20 }}>
                         <div className='gb-top-title'>
                          <span className='gb-top-icon'></span>
                           <span style={{fontSize:18,marginRight:20}}>选择广播预警站</span>      
                          </div>
                          <div className='station-content'>
                              <span>已选择：</span>
                              <Select
                                mode="tags"
                                style={{
                                    width: '70%',
                                }}
                                onChange={gbzChange}
                                options={jh}
                              />
                              <Button type="primary" style={{width:"16%"}} onClick={playGb}>播报</Button>   
                          </div>
                      </div>
                    </div>
              </div>
          </div>
          {/* 校验密码 */}
          <Modal
        open={switchVisible}
        width={500}
        title="输入校验密码"
        onCancel={()=>{setSwitchVisible(false);}}
        destroyOnClose
        onOk={confirmBb}
      >
        <div>
          <div style={{marginBottom:"10px"}}>请输入二次校验密码</div>
          <div>
            <Input.Password placeholder='请输入密码' allowClear onChange={(e)=>{setBbParams({...bbParams,ctrlPass:e.target.value})
            }} />
          </div>
        </div>
          </Modal>
          {/* 添加模版 */}
          <Modal
        open={addOpen}
        width={500}
        title="新增"
        onCancel={()=>{setAddOpen(false);}}
        destroyOnClose
        onOk={saveMb}
      >
        <div>
          <div style={{marginBottom:"10px"}}>请输入模版</div>
          <div>
            <Input  allowClear onChange={(e)=>{setMbParams({...mbParams,content:e.target.value})
            }} />
          </div>
        </div>
      </Modal>
      </div>
  )
}