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: 500,
      height: 530,
      backgroundColor: '#fff',
      debug: false
    },
  }
  componentDidMount() {
    this.initConfig()
    Taro.showLoading({
      title: '海报生成中...'
    })

  }
  initConfig() {
    const { data } = this.props
    const { basicConfig } = this.state
    const texts = [

      {
        x:120,
        y: 90,
        text: data.nickname,
        fontSize:28,
        color: '#000',
        baseLine: 'middle',
        lineHeight: 48,
        width: 200,
      },
      {
        x:250,
        y: 580,
        text: data.tip,
        fontSize:20,
        color: '#999999',
        baseLine: 'middle',
        lineHeight: 48,
        width: 500,
        textAlign:'center'
      },
     
    ]
    const images = [
      
      {
        url: data.avatarurl || require('@assets/default-avatar.png'),
        width: 90,
        height: 90,
        y: 30,
        x: 20,
        borderWidth:1,
        borderRadius:20,
      },
      {
        url: data.qrcode,
        width: 400,
        height: 400,
        y: 130,
        x: 50
      }
    ]
    const blocks = [
      {
        x:300,
        y: 100,
        color: '#fff',
        baseLine: 'middle',
        lineHeight: 48,
        width: 500,
        height:530
      },
    ]
    const config = Object.assign(basicConfig, {images, texts,blocks })
    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
      })
      Taro.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success:function(res){
          Taro.showToast({
            title: '已保存到相册',
            icon: 'success',
            duration: 2000,
          });
        },fail:function(){
          Taro.showToast({
            title: '保存失败',
            icon: 'success',
            duration: 2000,
          });
        }
      });
    } else {
      // 重置 TaroCanvasDrawer 状态，方便下一次调用
      this.setState({
        canvasStatus: false,
        config: null
      })

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

    // 预览
    // Taro.previewImage({
    //   current: tempFilePath,
    //   urls: [tempFilePath]
    // })
  }
  onCreateFail = (error) => {
    Taro.hideLoading();
    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>
    )
  }
}