import React from "react";
import { View, Text, Image, Button, Canvas } from "@tarojs/components";
import Taro from "@tarojs/taro";

import "./index.scss";

import { InputBox } from "../../component/input/index";

import right from "../../images/right.png";
import application from "../../images/application.png";
import certificate from "../../images/certificate.png";
import expert from "../../images/expert.png";

import user from "../../images/user.png";

import base from "../../config/base";

class Us extends React.Component<any, any> {
  static defaultProps = {};
  #systemInfo = Taro.getSystemInfoSync();
  constructor(props: any) {
    super(props);
    this.state = {
      height: 0,
      heightKf: 0,
      Cwidth: 0,
      Cheight: 0,
      userUrl: Taro.getStorageSync("userUrl") || "",
      userPhone: Taro.getStorageSync("userPhone") || "",
    };
  }

  getImageSize = (e: any) => {
    this.setState({
      height: (this.#systemInfo.screenWidth / e.detail.width) * e.detail.height,
    });
  };

  getImageKf = (e: any) => {
    this.setState({
      heightKf:
        ((this.#systemInfo.screenWidth * 0.92) / e.detail.width) *
        e.detail.height,
    });
  };

  onChooseAvatar = (e: any) => {
    Taro.setStorageSync("userUrl", e.detail.avatarUrl);
    this.setState({
      userUrl: e.detail.avatarUrl,
    });
  };

  onGetPhoneNumber = (e: any) => {
    Taro.request({
      url: base.baseAPI + "/wx/getuserphonenumber?code=" + e.detail.code,
      method: "GET",
    }).then((res: any) => {
      const {
        data: {
          code,
          data: { phoneInfo },
        },
        statusCode,
      } = res;
      if (statusCode !== 200 || code !== 0)
        return Taro.showToast({
          title: "获取手机号失败",
          icon: "none",
        });
      const { phoneNumber } = phoneInfo;
      this.setState({
        userPhone: phoneNumber || "",
      });
      Taro.setStorageSync("userPhone", phoneNumber || "");
    });
  };

  createImge = () => {
    Taro.showLoading({
      title: "下载中。。。"
    });
    const ctx = Taro.createCanvasContext("myCanvas");
    // 获取远程图片
    Taro.getImageInfo({
      src: "https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/6.jpg",
    }).then((res: any) => {
      const { width, height, path } = res;
      const h = Number(((this.#systemInfo.windowWidth / width) * height).toFixed(2));
      const rWidth = this.#systemInfo.windowWidth * this.#systemInfo.pixelRatio;
      const rHeight = h * this.#systemInfo.pixelRatio;
      this.setState({
        Cwidth: rWidth,
        Cheight: rHeight
      });
      Taro.nextTick(() => {
        ctx.drawImage(
          path,
          0,
          0,
          rWidth,
          rHeight
        );
        ctx.setFillStyle("#91725D");
        ctx.setFontSize(rWidth/20);
        ctx.fillText("李勇利", rWidth*0.33, rHeight*0.4);
        ctx.draw(false, () => {
          Taro.canvasToTempFilePath({
            canvasId: "myCanvas",
            quality: 0.8,
            success: (res: any) => {
              Taro.hideLoading();
              Taro.showToast({title: "下载成功"})
              Taro.previewImage({
                urls: [res.tempFilePath],
              });
            },

          });
        });
      });
    });
  };

  render() {
    // const {  } = this.props;
    return (
      <View className="Us">
        <Canvas
          id="myCanvas"
          canvas-id="myCanvas"
          style={`width: ${this.state.Cwidth}px;height: ${this.state.Cheight}px;`}
        ></Canvas>
        <Button
          className="user"
          open-type="chooseAvatar"
          onChooseAvatar={this.onChooseAvatar}
        >
          <Image src={this.state.userUrl || user} className="userImg"></Image>
        </Button>

        <Image
          style={`width: ${this.#systemInfo.screenWidth}px;height: ${this.state.height
            }px;`}
          src="https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/us-top.png"
          onLoad={this.getImageSize}
        />
        <InputBox>
          {!this.state.userPhone && (
            <Button
              className="login"
              openType="getPhoneNumber"
              onGetPhoneNumber={this.onGetPhoneNumber}
            >
              登录
            </Button>
          )}
          {this.state.userPhone && (
            <View className="us_cell">
              <View className="left">
                <Image src={application} className="img"></Image>
                <Text className="text">报名信息</Text>
              </View>
              <View className="right">
                <Image src={right} className="img"></Image>
              </View>
            </View>
          )}
          {this.state.userPhone && (
            <View className="us_cell" onClick={this.createImge}>
              <View className="left">
                <Image src={certificate} className="img"></Image>
                <Text className="text">证书下载</Text>
              </View>
              <View className="right">
                <Image src={right} className="img"></Image>
              </View>
            </View>
          )}
          {this.state.userPhone && (
            <View className="us_cell">
              <View className="left">
                <Image src={expert} className="img"></Image>
                <Text className="text">专家评审</Text>
              </View>
              <View className="right">
                <Image src={right} className="img"></Image>
              </View>
            </View>
          )}
        </InputBox>
        <Image
          style={`width: ${this.#systemInfo.screenWidth * 0.92}px;height: ${this.state.heightKf
            }px;display: block;margin: 0 auto`}
          showMenuByLongpress={true}
          src="https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/us-kf.png"
          onLoad={this.getImageKf}
        />
      </View>
    );
  }
}

export { Us };