import Taro, { Component } from '@tarojs/taro'
import EChart from '@EChart/index'
import './EchartMap.scss'
import * as echarts from '@EChart/echarts'
import { View } from '@tarojs/components'
export default class EchartLine extends Component {
  constructor (props) {
    super(props)
    this.state = {
      exportedImg: '',
      cList: [
        { name: '凤凰州', value: 'fhz'},
        { name: '红中区', value: 'hzq'},
        { name: '红角州', value: 'hjz'},
        { name: '东湖区', value: 'dhq'},
        { name: '西湖区', value: 'xhq'},
        { name: '青云谱', value: 'qyp'},
        { name: '象湖新城', value: 'xhxc'},
      ],
      isAllSelect: false,
    }
  }

  componentWillMount () {
    this.props.onRef(this)
  }



  setChartRef = node => {
    this.chart = node
  }

  componentDidMount() {
    const dictData = Taro.getStorageSync('dictData')
    const dictAreaArr = dictData.area_type || []
    let cList = dictAreaArr.map(item => {
      return {
        name: item.key,
        value: item.val,
      }
    })
    this.setState({
      cList
    })
    this.changeChart()
  }
  
  changeChart () {
    const curOption = {
      series: [
        {
          name: '测试',
          type: 'map',
          map: 'test',
          top: 10,
          right: 10,
          bottom: 10,
          left: 10,
          layoutCenter: ["50%", "50%"],
          layoutSize: "100%",
          label: {
            show: true,
            color: '#666',
            fontSize: 8
          },
          itemStyle: {
            areaColor: '#c1d7ef',
            borderColor: '#eff3f6',
            borderWidth: 2
          },
          selectedMode: 'multiple',
          emphasis: {
            label: {
              show: true,
              color: '#fff',
              // backgroundColor: '#369af7',
              // padding: 6,
              // borderRadius: 6,
              // borderWidth: 2
            },
            itemStyle: {
              areaColor: '#369af7'
            },
          },
          select: {
            label: {
              show: true,
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#999'
            },
          },
          data: this.cList,
          // 自定义名称映射
          // nameMap: {
          //   'fhz': '凤凰州',
          //   'hzq': '红中区',
          //   'hjz': '红角州',
          //   'dhq': '东湖区',
          //   'xhq': '西湖区',
          //   'qyp': '青云谱',
          //   'xhxc': '象湖新城',
          //   'xh': '象湖',
          // }
        }
      ]
    }

    setTimeout(() => {
      if (!this.chart) return
      const geoJson = require('./test.json')
      echarts.registerMap('test', geoJson)
      this.chart.setOption(curOption)

      const curChart = this.chart.chart

      curChart.on('mapselectchanged', (params) => {
        console.log(params)
      })

      // curChart.on('click', (params) => {
      //   console.log(params)
      //   curChart.dispatchAction({
      //     type: 'mapSelect',
      //     dataIndex: 1,
      //     // type: 'highlight',
      //     // seriesIndex: 0,
      //     // dataIndex: 1
      //   })
      //   // console.log(this.chart)
      // })


    }, 500)
  }


  testHandle () {
    const curChart = this.chart.chart
    const { cList, isAllSelect } = this.state
    if (isAllSelect) {
      cList.forEach((item, index) => {
        curChart.dispatchAction({
          type: 'mapUnSelect',
          dataIndex: index,
        })
      })
      this.setState({
        isAllSelect: false
      })
    } else {
      cList.forEach((item, index) => {
        curChart.dispatchAction({
          type: 'mapSelect',
          // name: '凤凰州',
          dataIndex: index,
        })
      })
      this.setState({
        isAllSelect: true
      })
    }
  }
  renderSelectMap () {
    const { isAllSelect } = this.state
    return (
      <View className="">
        <View style="position: absolute;top: 0;left: 0;" onClick={this.testHandle.bind(this)}>{isAllSelect ? '全部取消' : '全部选中'}</View>
      </View>
    )
  }

  render () {
    const { exportedImg } = this.state
    return (
      <View style="height: 400px">
        {
          exportedImg
          ? <Image className="icon" src={exportedImg} style="width: 100%;height: 100%;"></Image>
          : <EChart ref={this.setChartRef} echarts={echarts} />
        }
        {this.renderSelectMap()}
      </View>
    )
  }
}