import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { tree } from './mirroringDetail';
import VideoScreen from '../components/videoScreen';




const CallService = (props) => {
   const { dispatch, actions, user } = props
   const [treeData, setTreeData] = useState([])   //树形控件数据
   const [headerName, setHeaderName] = useState('dfvbfdbe')
   const [showHeader, setShowHeader] = useState(true)  //是否展示头部
   const [filterGroup, setFilterGroup] = useState([])    //筛选项数据
   const [template, setTemplate] = useState('')   //主题颜色
   const [videoPlay, setVideoPlay] = useState(true)   //视频预览

   useEffect(() => {


      dispatch(actions.openness.getMirrorList()).then((res) => {
         if (res?.success && res?.payload?.data?.some(v => v.mid == user?.mid)) {
            dispatch(actions.openness.getMirrorMid(user?.mid)).then((r) => {
               if (r?.success) {
                  let data = r?.payload?.data || {}

                  let filterGrouplist =data.filterGroup
                  for (let i = 0; i < filterGrouplist.length; i++) {
                      filterGrouplist[i].num = i
                      if (filterGrouplist[i].filters.length > 0) {
                          for (let j = 0; j < filterGrouplist[i].filters.length; j++) {
                              filterGrouplist[i].filters[j].num = j
                          }
                      }
                  }
                  setTreeData(tree(data.tree))
                  setHeaderName(data.title)
                  setShowHeader(data.showHeader)
                  setFilterGroup(filterGrouplist)
                  setTemplate(data.template)
               }
            })
         } else {
            dispatch(push('/callService'));
         }
      })

   }, [])

   return (
      <div style={{ width: '100%', height: '100%' }}>

         {treeData ? <VideoScreen
            treeData={treeData}
            headerName={headerName}
            showHeader={showHeader}
            filterGroup={filterGroup}
            template={template}
            videoPlay={videoPlay} /> : ""}
      </div>
   )
}

function mapStateToProps (state) {
   const { auth, global, members } = state;
   console.log('ccccccccccc', state)
   return {
      loading: members.isRequesting,
      user: auth.user,
      actions: global.actions,
      global: global,
      members: members.data,
   };
}

export default connect(mapStateToProps)(CallService);