text: import Taro, { Component } from '@tarojs/taro'
  import { View, Text, Canvas } from '@tarojs/components'
  import { AtButton, AtCard } from 'taro-ui'
  import './index.scss'
  import menusData from './data'
  
  export default class Location extends Component {
  
    config = {
      navigationBarTitleText: '网络相关API展示页'
    }
  
    state = {
      componentName: '界面',
      currentIndex: 0,
      animationObj: '',
      resultText: '',
      animationObj: {
        transformOrigin: 'left top 0',
        duration: 2000,
        timingFunction: 'linear',
        delay: 100,
      },
      animationOprate: [
        {
          name: '旋转',
          type: 'rotate'
        },
        {
          name: '缩放',
          type: 'scale'
        },
        {
          name: '移动',
          type: 'translate'
        },
        {
          name: '展示全部',
          type: 'all'
        },
        {
          name: '还原',
          type: 'reset'
        }
      ]
    }
  
    componentWillMount () { }
  
    componentDidMount () {
  
    }
  
    componentWillUnmount () { }
  
    componentDidShow () { }
  
    componentDidHide () { }
  
    handleMenuItem (methods, type, env, obj={}) {
      const nowEnv = Taro.getEnv()
      if (env.indexOf(nowEnv) === -1) {
        Taro.showToast({
          icon: 'none',
          title: `该api暂不支持${nowEnv}环境`
        })
        this.setState({
          resultText: ` 该 api 暂不支持 ${nowEnv} 环境 `
        })
        return
      }
      if (type === 'animation') {
        this.handleAnimation('scale')
      } else if (type === 'selector') {
        let query = Taro.createSelectorQuery()
        switch (methods) {
          case 'createSelectorQuery':
            this.setState({
              resultText: ` 成功创建了 SelectorQuery 对象实例 `
            })
            break
          case 'in':
            query = query.in(this.$scope)
            this.setState({
              resultText: ` 选取范围更改为自定义组件 component 内，（注：在 h5 中不起作用）`
            })
            break
          case 'select':
            query
              .select('.common_title')
              .boundingClientRect( rect => {
                this.setState({
                  resultText: ` 选取的是标题节点的相关信息； \n ${JSON.stringify(rect, 2)}`
                })
              })
              .exec()
            break
          case 'selectAll':
            query
              .selectAll('.common_menu_title')
              .boundingClientRect( rect => {
                this.setState({
                  resultText: ` 匹配出. common_menu_title 的所有节点； \n ${JSON.stringify(rect, 2)}`
                })
              })
              .exec()
            break
          case 'selectViewport':
            query
              .selectViewport()
              .boundingClientRect( rect => {
                this.setState({
                  resultText: ` 当前显示区域相关信息； \n ${JSON.stringify(rect, 2)}`
                })
              })
              .exec()
            break
          case 'boundingClientRect':
            query
              .select('.common_title')
              .boundingClientRect( rect => {
                this.setState({
                  resultText: ` 返回节点信息的位置 left、right 等字段描述； \n ${JSON.stringify(rect, 2)}`
                })
              })
              .exec()
            break
          case 'scrollOffset':
            query
              .selectViewport()
              .scrollOffset( rect => {
                this.setState({
                  resultText: ` 节点的滚动位置 ${rect.scrollTop}${rect.scrollLeft}`
                })
              })
              .exec()
            break
          case 'exec':
            query
              .selectViewport()
              .scrollOffset( rect => {
                this.setState({
                  resultText: ` 执行了 exec 方法； 获得了节点的滚动位置 ${JSON.stringify(rect, 2)}`
                })
              })
              .exec()
            break
  
        }
      } else if (type === 'canvas') {
        switch (methods) {
          case 'createCanvasContext':
            let context = Taro[methods]('canvasTest')
            context.setStrokeStyle("#00ff00")
            context.setLineWidth(5)
            context.rect(0, 0, 200, 200)
            context.stroke()
            context.setStrokeStyle("#ff0000")
            context.setLineWidth(2)
            context.moveTo(160, 100)
            context.arc(100, 100, 60, 0, 2 * Math.PI, true)
            context.moveTo(140, 100)
            context.arc(100, 100, 40, 0, Math.PI, false)
            context.moveTo(85, 80)
            context.arc(80, 80, 5, 0, 2 * Math.PI, true)
            context.moveTo(125, 80)
            context.arc(120, 80, 5, 0, 2 * Math.PI, true)
            context.stroke()
            context.draw()
            break
          case 'createContext':
            let context2 = Taro.createContext()
  
            context2.rect(10, 10, 150, 75)
            context2.fill()
            context2.stroke()
            Taro.drawCanvas({
              canvasId: 'canvasTest',
              actions: context2.getActions()
            })
            Taro.showToast({
              icon: 'none',
              title: '不推荐使用'
            })
            break
          case 'drawCanvas':
            Taro.showToast({
              icon: 'none',
              title: '不推荐使用'
            })
            let context3 = Taro.createContext()
  
            context3.rect(10, 10, 150, 75)
            context3.setFillStyle('red')
            context3.fill()
            context3.stroke()
            Taro.drawCanvas({
              canvasId: 'canvasTest',
              actions: context3.getActions()
            })
            break
          default :
            console.warn('type传值有误')
        }
  
      } else if (type === 'obj') {
        Taro[methods](obj)
      } else {
        Taro[methods]()
      }
  
    }
    handleMenu (index) {
      this.setState({
        currentIndex: this.state.currentIndex === index ? -1 : index
      })
    }
    goMenu = () => {
      Taro.navigateTo({url: '/pages/index/index'})
    }
    handleAnimation = (type='reset') => {
      const nowEnv = Taro.getEnv()
      if (nowEnv !== 'WEAPP') {
        Taro.showToast({
          icon: 'none',
          title: `该api暂不支持${nowEnv}环境`
        })
        this.setState({
          resultText: ` 该 api 暂不支持 ${nowEnv} 环境 `
        })
        return
      }
      let animationObj = Taro.createAnimation(this.state.animationObj)
      switch (type) {
        case 'rotate':
          animationObj.rotate(Math.random() * 720 - 360).step()
          break
        case 'scale':
          animationObj.scale(Math.random() * 2).step()
          break
        case 'translate':
          animationObj.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
          break
        case 'all':
          animationObj.rotate(Math.random() * 720 - 360).step()
            .scale(Math.random() * 2).step()
            .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
            .skew(Math.random() * 90, Math.random() * 90).step()
          break
        case 'reset':
          animationObj.rotate(0, 0)
            .scale(1)
            .translate(0, 0)
            .skew(0, 0)
            .step({ duration: 0 })
          break
        default:
          console.warn('暂无该操作')
      }
  
  
      this.setState({
        animationObj: animationObj.export()
      })
    }
    render () {
      const {
        componentName,
        currentIndex,
        animationObj,
        resultText,
        animationOprate
      } = this.state
      return (
        <View className='interface'>
          <View className='common_tips'>
            <Text className='common_tip_text'>这里展示的是Taro官方端能力，将展示基本API的调用方式及效果</Text>
          </View>
          <View className='common_header'>
            <Text className='common_title'>{componentName}</Text>
          </View>
  
          <View className='interface_menu'>
            {
             menusData.map((menu, index) => {
                return (
                  <View className={currentIndex === index ? 'menu active' : 'menu'} key={index}>
  
                    <View
                      className='menu_title'
                      onClick={this.handleMenu.bind(this, index)}
                    >
                      <Text className='menu_title_name'>{menu.name}</Text>
                      <Text className='menu_title_icon'></Text>
                    </View>
                    {
                      currentIndex === index && menu.type === 'selector' &&
                      <View>
                        <AtCard title='API 效果展示'>
                          <View style='word-wrap: break-word'>
                            {resultText}
                          </View>
                        </AtCard>
                       </View>
                    }
                    {
                      currentIndex === index && menu.type === 'canvas' &&
                      <View>
                        <AtCard title='API 效果展示'>
                          <View style='word-wrap: break-word'>
                            <Canvas style='width: 300px; height: 200px;' canvas-id='canvasTest'></Canvas>
                          </View>
                        </AtCard>
                     </View>
  
                    }
                    {
                      currentIndex === index && menu.type === 'animation' &&
                      <View>
                        <AtCard title='API 效果展示'>
                          <View className='animation'>
                            <View className='animation_content' animation={animationObj}>看我表演~</View>
                          </View>
                        </AtCard>
                      </View>
                    }
                    {
                      currentIndex === index && menu.children.map((item, ind) => {
                        return (
                          <View
                            key={ind}
                            className='menu_item'
                          >
                            <AtButton
                              type='primary'
                              onClick={this.handleMenuItem.bind(this, item.methods, item.type, item.env, item.obj)}
                            >
                              {item.name}
                            </AtButton>
                            {
                              item.type === 'animation' &&
                              <View className='animation_oprate'>
                                {
                                  animationOprate.map((oprate, oprateIndex) => {
                                    return (
                                      <View key={oprateIndex} className='animation_oprate_btn'>
                                        <AtButton
                                          type='secondary'
                                          size='small'
                                          onClick={this.handleAnimation.bind(this, oprate.type)}
                                        >
                                          {oprate.name}
                                        </AtButton>
                                      </View>
                                    )
                                  })
                                }
                              </View>
                            }
                          </View>
                        )
                      })
                    }
  
                  </View>
                )
              })
            }
          </View>
          <View className={Taro.getEnv() === 'H5' ? 'go_menu_btn' : 'go_menu_btn h5'} onClick={this.goMenu}>
              返回首页
          </View>
  
        </View>
      )
    }
  }
  
  