import Taro, { Component } from '@tarojs/taro';
import { TaroCanvasDrawer } from '@components/taro-plugin-canvas';
import dayjs from 'dayjs'
/**
 * 文档参考
 * http://taro-ext.jd.com/plugin/view/5d23051670a0f46a87c9785b
 */
export default class Index extends Component {
  static defaultProps = {
    data: {}
  }
  state = {
    // 绘制的图片
    shareImage: null,
    canvasStatus: false,
    config: null,
    basicConfig: {
      width: 640,
      height: 1136,
      backgroundColor: '#ffffff',
      debug: false
    },
  }
  componentDidMount() {
    this.initConfig()
    Taro.showLoading({
      title: '海报生成中...'
    })

  }
  initConfig() {
    const { data } = this.props
    const { basicConfig } = this.state
    const texts = [
      {
        x:170,
        y: 780,
        text: data.nickname+' 邀您阅读'||'',
        fontSize: 28,
        color: '#666',
        baseLine: 'middle',
        lineHeight: 48,
        // textAlign: 'left',
        width: 260,
        zIndex: 999
      },
      {
        x:480,
        y: 780,
        text: dayjs(data.createDate).format('YYYY-MM-DD') || '',
        fontSize: 25,
        color: '#666',
        baseLine: 'middle',
        lineHeight: 48,
        // textAlign: 'left',
        width: 200,
        zIndex: 999
      },
      {
        x:110,
        y: 880,
        text: data.title,
        fontSize: 32,
        color: 'black',
        baseLine: 'middle',
        lineHeight: 48,
        width: 500,
        zIndex: 999
      },
      {
        x:240,
        y: 1000,
        text: '长按识别小程序码',
        fontSize: 26,
        color: '#999',
        baseLine: 'middle',
        lineHeight: 48,
        width: 200,
      },
      {
        x:240,
        y: 1055,
        text: '进入',
        fontSize: 26,
        color: '#999',
        baseLine: 'middle',
        lineHeight: 48,
        width: 50,
      },
      {
        x:300,
        y: 1055,
        text: '橙蕉',
        fontSize: 28,
        color: 'black',
        baseLine: 'middle',
        lineHeight: 48,
        width: 120,
      },
      {
        x:440,
        y: 1055,
        text: '阅读全文',
        fontSize: 26,
        color: '#999',
        baseLine: 'middle',
        lineHeight: 48,
        width: 150,
      },
    ]
    const images = [
      {
        url: data.poster,
        width: 640,
        height: 736,
        y: 0,
        x: 0
      },
      {
        url: data.qrcode,
        width: 160,
        height: 160,
        y: 940,
        x: 50
      },
      {
        url: data.avatarurl || require('@assets/default-avatar.png'),
        width: 130,
        height: 130,
        y: 680,
        x: 20,
        borderRadius:130
      }
    ]
    const config = Object.assign(basicConfig, { images, texts })
    this.setState({
      config,
      canvasStatus: true
    })
  }

  onCreateSuccess = (result) => {
    const { tempFilePath, errMsg } = result;
    Taro.hideLoading();
    if (errMsg === 'canvasToTempFilePath:ok') {
      this.setState({
        shareImage: tempFilePath,
        // 重置 TaroCanvasDrawer 状态，方便下一次调用
        canvasStatus: false,
        config: null
      })
    } else {
      // 重置 TaroCanvasDrawer 状态，方便下一次调用
      this.setState({
        canvasStatus: false,
        config: null
      })

      Taro.showToast({ icon: 'none', title: errMsg || '出现错误' });
      console.log(errMsg);
    }
    
    this.props.toggleMakePosterModal(false)

    // 预览
    Taro.previewImage({
      current: tempFilePath,
      urls: [tempFilePath]
    })
  }
  onCreateFail = (error) => {
    Taro.hideLoading();
    this.props.toggleMakePosterModal(false)
    console.log(error);
  }

  // 保存图片至本地
  saveToAlbum = () => {
    const res = Taro.saveImageToPhotosAlbum({
      filePath: this.state.shareImage,
    });
    if (res.errMsg === 'saveImageToPhotosAlbum:ok') {
      Taro.showToast({
        title: '保存图片成功',
        icon: 'success',
        duration: 2000,
      });
    }
  }

  render() {
    return (
      <View>
        {
          this.state.canvasStatus && (
            <TaroCanvasDrawer
              config={this.state.config}
              onCreateSuccess={this.onCreateSuccess}
              onCreateFail={this.onCreateFail}
            />
          )
        }
      </View>
    )
  }
}