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: 950,
        text: '手机号：',
        fontSize:26,
        color: 'black',
        baseLine: 'middle',
        lineHeight: 48,
        width: 500,
        zIndex: 999
      },
      {
        x:280,
        y: 950,
        text: data.phone,
        fontSize: 26,
        color: '#ff4740',
        baseLine: 'middle',
        lineHeight: 48,
        width: 500,
        zIndex: 999
      },
      {
        x:170,
        y: 1010,
        text: '我的推荐码：',
        fontSize: 26,
        color: '#000',
        baseLine: 'middle',
        lineHeight: 48,
        width: 200,
      },
      {
        x:330,
        y: 1010,
        text: data.code,
        fontSize:26,
        color: '#ff4740',
        baseLine: 'middle',
        lineHeight: 48,
        width: 200,
      },
     
    ]
    const images = [
      {
        url: data.poster,
        width: 640,
        height: 836,
        y: 0,
        x: 0
      },
      {
        url: data.codeImg,
        width: 110,
        height: 110,
        y: 930,
        x: 500
      },
      {
        url: data.avatarurl || require('@assets/default-avatar.png'),
        width: 120,
        height: 120,
        y: 915,
        x: 20,
        borderWidth:1,
        borderRadius:120,
        borderColor:'#999'
      }
    ]
    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
      })
      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);
    }
    
    // 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>
    )
  }
}