import { Component } from 'react'
import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
import * as api from '../../../../service/index'
import tool from '../../../../common/tool'
import Taro, { getCurrentInstance } from '@tarojs/taro'

import './index.less'

export default class collection extends Component {
  $instance = getCurrentInstance()
  state = {
    booksinfo: {},
    is_collect: 0,//是否加入书架，0|1
    likeBookList: [],
    lastTime: 0
  }

  componentWillMount () {
    this.getBookinfo()
    this.getBookLike()
  }
  componentDidShow () {
  }
  getBookLike () {
    api.getBookLike().then(res => {
      if (res.code == 200) {
        this.setState({
          likeBookList: res.data.book_like
        })
      }
    })
  }
  getBookinfo () {
    let routers = this.$instance.router.params
    api.getBookinfo({ book_id: routers.book_id }).then(res => {
      if (res.code == 200) {
        this.setState({
          booksinfo: res.data.book_info[0],
          is_collect: res.data.is_collect
        })
      }
    })
  }
  bookCollect () {
    if (this.state.is_collect == 1) return
    let routers = this.$instance.router.params
    api.bookCollect({ book_id: routers.book_id }).then(res => {
      if (res.code == 200) {
        this.getBookinfo()
      }
    })
  }
  onReachBottom () {
    // if (!this.state.total) {
    //   this.setState({
    //     page: this.state.page + 1
    //   })
    // }
  }
  toDetail (item, index) {
    Taro.navigateTo({
      url: '/pages/index/subpages/novel/index'
    })
  }
  toNovelText () {
    Taro.navigateTo({
      url: `/pages/index/subpages/novelText/index?book_id=${this.state.booksinfo.id}`
    })
  }
  toDirectory () {
    Taro.navigateTo({
      url: `/pages/index/subpages/directory/index?book_id=${this.state.booksinfo.id}`
    })
  }
  toLikeBooks (item, index) {
    Taro.navigateTo({
      url: `/pages/index/subpages/novel/index?book_id=${item.id}`
    })
  }
  copyCode () {
    let lastTime = this.state.lastTime;
    let now = new Date().getTime();
    if (now - lastTime < 2000) return
    this.setState({
      lastTime: now
    }, () => {
      api.getCommand({ book_id: this.state.booksinfo.id }).then(res => {
        if (res.code == 200) {
          let text = res.data
          // if (process.env.TARO_ENV == 'tt') {
          //   text = res.data
          // }
          Taro.setClipboardData({
            data: text,
            success: function (res) {
              Taro.showModal({
                title: '口令复制成功',
                content: "是否前往了解赚钱计划？",
                success: function (res) {
                  if (res.confirm) {
                    Taro.navigateTo({
                      url: `/pages/mine/subpages/moneyPlay/index`
                    })
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                }
              })
            }
          })

        }
      })
    })
  }

  render () {
    return (
      <View className='mine'>
        <View className='mine-content'>
          <View className='book-top'>
            <Image className='book-img' src={this.state.booksinfo.img}></Image>
            <View className='top-right'>
              <View className='book-title'>{tool.ellipsis(this.state.booksinfo.name, 15)}</View>
              <View className='book-visit-num'>{this.state.booksinfo.paly_cnt}游览</View>
            </View>
            <View className='share update-active' onClick={e => (this.copyCode())}>
              <Image className='share-img' mode='widthFix' src='https://video-img.fyshark.com/1684206675357shykahfgl.png'></Image>
            </View>
          </View>
          <View className='book-tips'>
            <View className='book-tips-title'>书籍简介</View>
            <View className='book-tips-content'>{this.state.booksinfo.intro} </View>
          </View>
          <View className='directory' onClick={e => (this.toDirectory())}>
            <View className='directory-left'>
              <Image className='directory-icon' src='https://video-img.fyshark.com/1683618704652dadda%20.png'></Image>
              <View className='derectory-title'>查看目录</View>已更新到{this.state.booksinfo.album_cnt}章
            </View>
            <Image className='directory-right-icon' src='https://video-img.fyshark.com/1683618693594ddada%20.png'></Image>
          </View>
          <View className='like'>
            <View className='like-tips'>
              <View className='lick-title'>猜你喜欢</View>
              <View className='lick-change' onClick={e => (this.getBookLike())}>
                换一换
                <Image className='like-img' src='https://video-img.fyshark.com/1683619412847dada%20.png'></Image>
              </View>
            </View>
            <View className='lick-list'>
              {
                this.state.likeBookList.map((item, index) => (
                  <View className='lick-info' key={index} onClick={e => (this.toLikeBooks(item, index))}>
                    <Image className='like-img' src={item.img}></Image>
                    <View className='like-title'>{tool.ellipsis(item.name, 4)}</View>
                  </View>
                ))
              }
            </View>
          </View>
          <View className='selected'>
            <View className='selected-title'>精选内容</View>
            <View className='selected-text'>{this.state.booksinfo.short_name}</View>
          </View>
          <View className='console'>
            <View className='console-content'>
              <View className='console-left'
                style={this.state.is_collect == 1 ? 'opacity:0.3' : ''}
                onClick={e => (this.bookCollect())}>
                <Image className='console-left-img' src='https://video-img.fyshark.com/1683620721580adda.png'></Image>
                <View className='console-left-title'>{this.state.is_collect == 0 ? '加入书架' : '已在书架'}</View>
              </View>
              <View className='console-right' onClick={e => (this.toNovelText())}>
                继续阅读
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}