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

import "./index.scss";

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

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

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

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

  render() {
    // const {  } = this.props;

    return (
      <View className="Us">
        <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>123</InputBox>
        <Image
          style={`width: ${this.#systemInfo.screenWidth - 60}px;height: ${
            this.state.heightKf
          }px;display: block;margin: 0 auto`}
          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 };