import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

import Header from './../../components/header/header';
import ListItem from './../../components/ListItem/ListItem';

export default class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }

  state = {
  }

  componentWillMount() { }

  componentDidMount() {
    this.setState({
      componentList: [
        {
          name: 'blockTitle',
        },
        {
          name: 'curtain',
        },
        {
          name: 'header',
        },
        {
          name: 'modal',
        },
        {
          name: 'noData',
        },
        {
          name: 'price',
        },
        {
          name: 'progressBar',
        },
        {
          name: 'skeleton',
        },
        {
          name: 'timer',
        },
      ]
    })
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  tickHandler(time) {
    console.log(time)
  }

  timeupHandler() {
    console.log('timeup')
  }

  /**
   * handleListItemClick
   */
  handleListItemClick = (componentType, e) => {
    Taro.navigateTo({
      url: `/pages/demos/${componentType}`
    })
  }

  render() {
    const { componentList } = this.state
    return (
      <View className='index'>
        <Header pageTitle="演示" visible={true} bordered />
        {
          componentList &&
          componentList.map((item,index)=>{
            return (
              <ListItem
                name={item.name}
                size='normal'
                goto={true}
                gotoDesc='查看'
                bordered
                handleClick={this.handleListItemClick.bind(this, item.name)}
              />
            )
          })
        }
        {/* <Curtain visible={true} >
          <View className="curtain-content">
            这是内容
          </View>
        </Curtain> */}
      </View>
    )
  }
}