import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import './index.scss'
export default class QA extends Component {
  constructor (props) {
    super(props)
    this.state = {
      itemList: [],
    }
  }


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

  getData = (list) => {
    this.setState({
      itemList: list
    })
  }

  getQA () {
    Taro.api.other.qalist().then(res => {
      this.setState({
        itemList: res.list || []
      })
    })
  }

  linkMore () {
    Taro.navigateTo({
      url: '/pagesMore/qa/list'
      // url: '/pagesMore/news/index?nav=1'
    })
  }

  render () {
    const { itemList } = this.state
    let newsArr = []
    if (itemList.length > 1) newsArr = [itemList[0], itemList[1]]
    const ls_ba = require('./img/ls_ba.gif')
    const ls_luo = require('./img/ls_luo.gif')
    const ls_hu = require('./img/ls_hu.gif')
    const ls_kang = require('./img/ls_kang.gif')
    let newsbg = ls_ba
    const num = Math.round(Math.random() * 1000)
    if (num > 750) {
      newsbg = ls_ba
    } else if (num > 500)  {
      newsbg = ls_luo
    } else if (num > 250)  {
      newsbg = ls_hu
    } else if (num > 0)  {
      newsbg = ls_kang
    }
    const iconQ = require('@img/qa_q.png')
    const iconA = require('@img/qa_a.png')
    const btnMores = require('./img/qa_i_more.png')
    const curItems = newsArr.map((item, index) => {
      let curStr = item.question_cont || ''
      if (curStr) {
        item.titleStr = curStr.length > 17 ? `${curStr.substring(0, 17)}...` : curStr
      }
      let curStr2 = item.answer_cont || ''
      if (curStr2) {
        item.titleStr2 = curStr2.length > 17 ? `${curStr2.substring(0, 17)}...` : curStr2
      }
      return (
        <Navigator url={'/pagesMore/qa/list'} className="sq-item" key={index}>
          {/* url={'/pagesMore/news/indexDtl?id=' + item.id} */}
          <View className="q">
            <Image className="img" src={iconQ} />
            <View className="t">{item.titleStr}</View>
          </View>
          <View className="a">
            <View className="t">{item.titleStr2}</View>
            <Image className="img" src={iconA} />
          </View>
        </Navigator>
      )
    })
    return (
      <View className="scoped-qa">
        <Image src={newsbg} className="sq-top" onClick={this.linkMore.bind(this)} />
        <View className="sq-main">
          {curItems}
        </View>
        <View className="sq-footer">
          <Image className="img" src={btnMores} onClick={this.linkMore.bind(this)} />
        </View>
      </View>
    )
  }
}