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

import "./index.scss";

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

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

class Home extends React.Component<any, any> {
  static defaultProps = {};

  constructor(props: any) {
    super(props);
    this.state = {
      height: 0,
      data: {},
    };
    this.getData();
  }

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

  getData = () => {
    Taro.showLoading({
      title: "加载中",
    });
    Taro.request({
      url:
        base.baseUrlEle +
        "/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/home.json?data=" +
        Date.now(),
      method: "GET",
      success: (res: any) => {
        if (res.statusCode !== 200)
          return Taro.showToast({
            title: "请求失败",
            icon: "none",
          });
        this.setState({
          data: res.data || {},
        });
        Taro.hideLoading();
      },
      fail: (error: any) => {
        Taro.hideLoading();
        Taro.showToast({
          title: JSON.stringify(error),
        });
      },
    });
  };

  render() {
    // const {  } = this.props;
    const systemInfo = Taro.getSystemInfoSync();
    const w = systemInfo.screenWidth - 60;
    const h = (w / 16) * 9;
    const sonEle = (item) => (
      <View>
        <Text className="label">· {item.title} </Text>
        <View className="content">{item.content}</View>
      </View>
    );
    return (
      <View className="home">
        <Image
          style={`width: ${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/home_top.jpg"
          onLoad={this.getImageSize}
        />

        <InputBox>
          <View className="mian">
            {h && this.state.data.baseVideoUrl && (
              <Video
                src={this.state.data.baseVideoUrl || ""}
                controls={false}
                style={`width: ${w}px;height: ${h}px;`}
                autoplay={true}
                loop
                muted
                show-fullscreen-btn={true} show-play-btn={true}
                id="video"
              />
            )}

            {this.state.data?.textList?.map((item: any) => (
              <View className="body">
                <View className="btn">{item.title}</View>
                {item.content?.map((p: any) => sonEle(p))}
              </View>
            ))}
          </View>
        </InputBox>
      </View>
    );
  }
}

export { Home };