import React, { useEffect, useState } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import ContainerLayout from "../../compents/container/index";
import icon from "../../assets/icon.png";
import "./index.scss";
import userRloe from "../../util/userRole";
import { useSelector } from "react-redux";
import request, { uploadFiles } from "@/util/request";
import uploadicon from "../../assets/uploadicon.png";
// import copy from '../../assets/copy.png'

const guide = props => {
  const user = useSelector(state => state.user);
  // const guide = useSelector(state => state.guide)

  const { value, houseId, ...prop } = props;
  const [state, setState] = useState(1);

  const [imgurl, setImgurl] = useState("");
  // const [detail, setDetail] = useState({})
  const detail = props.dataSource || {};

  const onOpenLocation = lngLat => {
    const [latitude, longitude] = lngLat.split(",");

    wx.openLocation({
      latitude: latitude ? latitude - 0 : undefined,
      longitude: longitude ? longitude - 0 : undefined,
      scale: 18,
      fail: err => {
        console.log(err);
      }
    });
  };

  const handleCopy = v => {
    wx.setClipboardData({
      data: v,
      success(res) {}
    });
  }

  const onToMap = type => {
    if (user.role == userRloe.customer) return;
    switch (type) {
      case "address":
        Taro.navigateTo({
          url: `/pages/map/index?houseId=${houseId}&type=${type}`
        });
        break;
      case "park":
        Taro.navigateTo({
          url: `/pages/map/index?houseId=${houseId}&type=${type}`
        });
        break;
      case "wifi":
        Taro.navigateTo({ url: `/pages/wifi/index?houseId=${houseId}` });
        break;

      case "housename":
        Taro.navigateTo({ url: `/pages/housename/index?houseId=${houseId}` });
        break;

      case "image": {
        if (user.role == userRloe.customer) return;
        wx.chooseImage({
          count: 1,
          sizeType: ["original", "compressed"],
          sourceType: ["album"],
          success: res => {
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths;

            uploadFiles(tempFilePaths)
              .then(res => {
                console.log(res, "uploadFiles");
                // setImgUrl(res[0])
                setImgurl(res[0]);
                request({
                  url: `/taHouse/${houseId}`,
                  method: "put",
                  data: { ...detail, desc: res[0] }
                }).then(res => {});
              })
              .catch(e => {
                console.log(e, "err");
              });

            // setImgurl(tempFilePaths[0])
          }
          // success: (res) => {
          //     // tempFilePath可以作为img标签的src属性显示图片

          //     console.log(res)
          //     const tempFilePaths = res.tempFilePaths
          //     setImgurl(tempFilePaths[0])

          // }
        });
        break;
      }
    }
    // Taro.navigateTo({ url: `/pages/map/index?type=${type}` })
  };
  //  const [addressName,addressDetail] = (detail.address||'').split('____')
  //  const [parkingName,parkingDetail] = (detail.parking||'').split('____')
  return (
    <View className="guide">
      {!!houseId && (
        <View>
          <View className="guide-view">
            <Text className="guide-view-info">房屋名称</Text>
            <ContainerLayout
              className="guide-view-layout guide-view-wifi"
              onClick={() => onToMap("housename")}
            >
              <View className="guide-view-layout-text1" style={{ margin: 0 }}>
                {detail.title}
              </View>
            </ContainerLayout>
          </View>
          <View className="guide-view">
            <Text className="guide-view-info">房屋位置</Text>
            <ContainerLayout
              className="guide-view-layout"
              style={{ display: "flex", justifyContent: "space-between" }}
              onClick={() => onToMap("address")}
            >
              <View>
                <View className="guide-view-layout-text1">
                  {detail.shortAddress}
                </View>
                <View className="guide-view-layout-text2">
                  {detail.address}
                </View>
              </View>
              {user.role == userRloe.customer && (
                <View
                  style={{
                    float: "right",
                    display: "flex",
                    justifyContent: "center",
                    flexDirection: "column"
                  }}
                  onClick={() => onOpenLocation(detail.lngLat)}
                >
                  <Image className="icon" src={icon} />
                  <View className="icontext">去这里</View>
                </View>
              )}
            </ContainerLayout>
          </View>
          {
            detail.parking &&
            (
              <View className="guide-view">
                <Text className="guide-view-info">停车位置</Text>
                <ContainerLayout
                  className="guide-view-layout"
                  style={{ display: "flex", justifyContent: "space-between" }}
                  onClick={() => onToMap("park")}
                >
                  <View>
                    <View className="guide-view-layout-text1">
                      {detail.shortParking}
                    </View>
                    <View className="guide-view-layout-text2">
                      {detail.parking}
                    </View>
                  </View>
                  {user.role == userRloe.customer && (
                    <View
                      style={{
                        float: "right",
                        display: "flex",
                        justifyContent: "center",
                        flexDirection: "column"
                      }}
                      onClick={() => onOpenLocation(detail.parkLngLat)}
                    >
                      <Image className="icon" src={icon} />
                      <View className="icontext">去这里</View>
                    </View>
                  )}
                </ContainerLayout>
              </View>
            )
          }
          { detail.wifiName &&
            (
              <View className="guide-view">
                <Text className="guide-view-info">wifi信息</Text>
                <ContainerLayout
                  className="guide-view-layout guide-view-wifi"
                  onClick={() => onToMap("wifi")}
                >
                  <View>
                    <Text>名称：</Text>
                    <Text>{detail.wifiName}</Text>
                  </View>
                  <View onClick={() => handleCopy(detail.wifiPassword)}>
                    <Text>密码：</Text>
                    <Text style="display: inline-block; margin-right: 6px">{detail.wifiPassword}</Text>
                    <mp-icon icon="copy" size={12}></mp-icon>
                  </View>
                </ContainerLayout>
              </View>
            )
          }
          <View className="guide-view">
            <Text className="guide-view-info">其他指引</Text>
            {/* <ContainerLayout className='guide-view-layout guide-view-img'> */}
            {(detail.desc || imgurl) && (
              <Image
                className="guide-view-img"
                mode="widthFix"
                onClick={() => onToMap("image")}
                src={imgurl || detail.desc}
              ></Image>
            )}
            {!detail.desc && !imgurl && (
              <View style={{ padding: "300rpx" }}>
                <Image
                  className="guide-view-img"
                  mode="widthFix"
                  onClick={() => onToMap("image")}
                  src={uploadicon}
                ></Image>
              </View>
            )}
          </View>
        </View>
      )}
      {!houseId && (
        <View
          className="recommend-noorder"
          style={{ marginTop: "calc(40vh)", textAlign: "center" }}
        >
          <Text>哎呀</Text>
          <Text>暂时没发现您的入住订单呢~</Text>
        </View>
      )}
    </View>
  );
};

export default guide;