import React, { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View, Image, Input, Picker, LivePlayer } from '@tarojs/components'
import request from '@/services/request'
import './index.scss'
import '../patrolView/index.scss'
import patrolIcon from '../../static/img/patrolView/patrol.svg'
import patrolActiveIcon from '../../static/img/patrolView/patrol-active.svg'
import conserveIcon from '../../static/img/patrolView/conserve.svg'
import conserveActiveIcon from '../../static/img/patrolView/conserve-active.svg'
import chevronDown from '../../static/img/patrolView/chevron-down.png'
import searchIcon from '../../static/img/patrolView/search.png'

function Index() {
  const [isBus, setIsBus] = useState(true)
  const [filterText, setFilterText] = useState('')
  const [videoList, setVideoList] = useState([])
  
  useEffect(() => {
    getVideoList()
  }, [])

  const getVideoList = () => {
    let nextVideoList = []
    for (let i = 0; i < 10; i++) {
      nextVideoList.push({ title: '视频' + i, url: '链接' + i })
    }
    setVideoList(nextVideoList)
  }

  const onTypeChange = bool => {
    setIsBus(bool)
  }

  const handleConfirm = e => {

  }

  const handleInput = e => {

  }

  return (
    <View>
      <View className='type-box'>
        <View className='item' onClick={() => onTypeChange(true)}>
          <Image className='type-img' src={isBus ? patrolActiveIcon : patrolIcon} />
          <View style={{ color: isBus ? '#346FC2' : '#999999' }}>公交</View>
        </View>
        <View className='line'></View>
        <View className='item' onClick={() => onTypeChange(false)}>
          <Image className='type-img' src={isBus ? conserveIcon : conserveActiveIcon} />
          <View style={{ color: isBus ? '#999999' : '#346FC2' }}>道路</View>
        </View>
      </View>
      <View className='filter-box'>
        <View className='filter-item'>
          <View style={{ float: 'left', marginLeft: '20rpx', color: '#333' }}>路段：</View>
          <Picker>
            <View className='filter-name'>{'请选择'}</View>
            <Image className='filter-img' src={chevronDown} />
          </Picker>
        </View>
        <View class='head-search'>
          <Image className='search-img' src={searchIcon} />
          <Input class='heard-search-input' value={filterText} placeholder='请输入道路名称' onConfirm={handleConfirm} onInput={handleInput} />
        </View>
      </View>
      <View className='video-box'>
        {
          videoList && videoList.map(v => {
            return (
              <View className='video-card'>
                <View className='title'>{v.title}</View>
                  <LivePlayer className='video' src={v.url} mode='live' />
              </View>
            )
          })
        }
      </View>
    </View>
  )
}

export default Index