// import { MpSplashDetail, WCUserLogin } from "../../utils/Interface";
import { Component } from "react";
import Taro from "@tarojs/taro";
// 引入 Swiper, SwiperItem 组件
import {
  Block,
  View,
  Text,
  Image,
  Video,
  Swiper,
  SwiperItem,
  Textarea,
} from "@tarojs/components";
import Navbar from "@/components/navbar/navbar";
import { go, msg } from "@/utils/traoAPI";
import {
  InstrumentInfo,SaveMessage
} from "../../utils/Interface";
import { WaterfallFlow, Popup } from '@antmjs/vantui'
import PopupAlert from "@/components/popup/popup-alert";

import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "./detect.less";

import type CustomTabBar from "../../custom-tab-bar";
import PopupDrawer from "@/components/popup/popup-drawer";

export default class Detect extends Component<any, any> {
  pageCtx = Taro.getCurrentInstance().page;
  constructor(props) {
    super(props);
    this.state = {
      name: "detect",
      isNotRegister: false, // 是否未注册
      show: false,
      messageCount: Taro.getStorageSync("messageCount") || 0,
      isRegisterBoolean: false,
      carouselList: [],
      strategyList: [],
      isShow: false,
      messageInfo: ''
    };
  }

  async onLoad() {

  }

  showInit = async () => {
    // 判断是否登录
    let mobile = Taro.getStorageSync("mobile");
    if (mobile) {
      this.setState({ isRegisterBoolean: true });
    }
  };
  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() {
    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
    tabbar?.setSelected(2);
    this.showInit()
    this.getCarouselList()
    this.getStrategyList()
  }

  componentDidHide() { }

  async initData() { }

  // 是否已注册
  isRegister(type = "") {
    if (type === "addNewDevice") {
      Taro.setStorageSync("isInstrumentJump", "true"); // 判断是否点击新增设备按钮，用于信息完善页判断跳转逻辑
    } else {
      Taro.setStorageSync("isInstrumentJump", "false"); // 重置
    }
    if (!this.state.isRegisterBoolean) {
      this.alertRegister();
      return false;
    }
    return true;
  }
  async getCarouselList() {
    let res = await InstrumentInfo.find.CarouselList();
    this.setState({ carouselList: res.data.rows })
  }

  async getStrategyList() {
    let res = await InstrumentInfo.find.StrategyList();
    this.setState({ strategyList: res.data.rows })

  }

  public alertRegister = () => {
    this.setState({ isNotRegister: true }); // 打开弹窗
  };

  gourl = async (e) => {
    console.log("添加新设备", e);

    const { url } = e.currentTarget.dataset;
    console.log(url);

    if (this.isRegister()) {
      if (url === "/instrument/pages/instrument/instrument") {
        let { data } = await InstrumentInfo.unbindingInstrumentInfoList();
        console.log(data, "查看未绑定设备");
        if (data.data.length === 0) {
          this.setState({
            show: true,
          });
          setTimeout(() => {
            this.setState({ show: false });
          }, 1000); // 2秒后将 show 变量置为 false
        } else {
          go(url);
        }
      } else {
        console.log(url, 22222222);

        go(url);
      }
    }
  };
  close() {
    this.setState({ isShow: false })
  }
  onChange() {
    this.setState({ isShow: true })

  }

  submit = () => {
    let { messageInfo } = this.state;
    if (messageInfo.length) {
      this.postSaveMessage();
      this.close();
    } else {
      msg("留言内容不能为空！");
      // Toast_.fail({
      //   message: "留言内容不能为空！",
      // });
    }
  };
  postSaveMessage = async () => {
    let { messageInfo } = this.state;
    let params = {
      source: 1,
      messageInfo: messageInfo,
    };
    let res = await SaveMessage(params);
    if (res.data.code === 200) {
      msg("提交成功！");
    } else {
      msg("提交失败！");
    }
  };
  closeAlert = () => {
    this.setState({ isNotRegister: false });
  };
  onInputTextarea = (e) => {
    this.setState({ messageInfo: e.detail.value });
  };
  render() {
    let { isNotRegister, messageCount, carouselList, strategyList, isShow } = this.state;
    return (
      <Block>
        <PopupAlert
          isShow={isNotRegister}
          isClose
          title='提示'
          content='暂未授权注册，请点击注册'
          confirmButtonText='确定'
          textAlgin='center'
          type='1'
          close={this.closeAlert}
          confirm={this.closeAlert}
        />
        <Navbar
          titleSlot=' '
          leftSlot={
            <Block>
              <View
                className='message'
                onClick={this.gourl}
                data-url='/pages/message/message'
              >
                <Image
                  className='message-img'
                  src={require("@/img/index/message.png")}
                  mode='aspectFill'
                />
                {messageCount ? <View className='tip' /> : ""}
              </View>
            </Block>
          }
          transparent
        />
        <Swiper className='banner_list' autoplay circular >
          {
            carouselList.map(item => (
              <SwiperItem className='banner_item' key={item.id} >
                <Image className='banner_img' src={item.fileUrl} mode='aspectFill'></Image>
              </SwiperItem>
            ))
          }

        </Swiper>
        <View className='main'>
          {/* <View className='creation_box'>
            <View className='flex sb aitems'>
              <View className='creation_title'>产品共创</View>
              <View className='creation_more flex aitems' >
                <View>更多</View>
                <Image className='more_icon' src='/img/index-right.png'></Image>
              </View>
            </View>
            <Swiper className='creation_content'>
              {
                carouselList.map(item => (
                  <SwiperItem className='creation_item' key={item.id}>
                    <Image className='creation_cover' mode='aspectFill' src={item.fileUrl}></Image>
                    <View className='creation_text ellipsis1'></View>
                  </SwiperItem>
                ))
              }
            </Swiper>
            <View className='indicator'>
              <View className='dot' style='width: {{180 / carouselList.length}}rpx; transform: translateX({{100 * current}}%)'></View>
            </View>
          </View> */}
          <View className='heart_box'>
            <View className='heart_title'>产品攻略</View>
            <View className='container'>
              <WaterfallFlow
                dataSource={strategyList}
                columnNum={2}
                gutter={12}
                renderItem={(item) => {
                  return (
                    <View className='column'>
                      <View className='waterfall_item'>
                        <Image className='item_image' mode='widthFix' src={item.fileUrl}></Image>
                        <View className='item_text'>
                          <View className='ellipsis2'>
                            {item.title}
                          </View>
                        </View>
                      </View>
                    </View>
                  )
                }}
              />
            </View>
            <View style='display: none'>
              <Image src='{{util.getHttpsUrl(item.banner)}}' />
            </View>
          </View>
          <View className='feed_back'>
            <View className='title'>留言箱</View>
            <View className='ui-feedBack__text'>如果以上内容没能解决您的问题，或您有其他的建议，可以在留言箱给小助理留言噢！</View>
            <View className='btn' onClick={this.onChange.bind(this)}>点击留言</View>
          </View>
        </View>

        {/* <Popup
          show={isShow}
          position='bottom'
          closeable
          root-portal
          custom-style='height: 625rpx; border-radius: 30rpx 30rpx 0 0'
          onClose={this.close.bind(this)}
        >
          <View className='popup-box'>
            <View className='popup_title'>留言箱</View>
            <Textarea
              className='service-textarea'
              maxlength={100}
              showCount
              placeholder='请在此处写下您的意见与反馈'
              placeholderStyle='font-weight: 400;font-size:28rpx;'
              onInput={this.onInputTextarea}
            ></Textarea>
            <View className='popup_btn' onClick={this.submit.bind(this)}>提交</View>
          </View>
        </Popup> */}


        <PopupDrawer
          isShow={isShow}
          isClose
          title='留言反馈'
          content={
            <Block>
              <Textarea
                className='service-textarea'
                maxlength={100}
                showCount
                placeholder='请在此处写下您的意见与反馈'
                placeholderStyle='font-weight: 400;font-size:28rpx;'
                onInput={this.onInputTextarea}
              ></Textarea>
            </Block>
          }
          confirmButtonText='提交'
          textAlgin='left'
          close={this.close}
          confirm={this.submit.bind(this)}
        />
      </Block>
    );
  }
}