import React, { Component } from "react";
import {Table,Modal,Button} from "antd";
import PicturesWall from "./changeComponent/picturesWall.js";
import ImgList from "../../../common/imgList";
import $ from "jquery/src/ajax";
class contentUrl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataView: null,
      rotateDeg: 0,

    };
    this.formRef = {};
    this.downImg = this.downImg.bind(this);
    this.upImg = this.upImg.bind(this);
    this.rotate = this.rotate.bind(this);
  }
  downImg() {
    let num = 0;
    for (let i = 0; i < this.props.contentUrl.length; i++) {
      if (this.props.contentUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == this.props.contentUrl.length - 1) {
      return message.warning("已经是最后一张了哦");
    }
    this.state.previewImage = this.props.contentUrl[num + 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0,
    });
  }
  upImg() {
    let num = 0;
    for (let i = 0; i < this.props.contentUrl.length; i++) {
      if (this.props.contentUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == 0) {
      return message.warning("已经是第一张了哦");
    }
    this.state.previewImage = this.props.contentUrl[num - 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0,
    });
  }
  rotate() {
    let rotateDeg = this.state.rotateDeg + 90;
    this.setState({
      rotateDeg,
    });
  }
  render() {
    const contentUrl = this.props.contentUrl
    return (
      <div class="clearfix" style={{display:"flex",margin:"0 0 10px 80px"}}>
      <div style={{marginRight:"6px"}}>
      <div style={{display:"flex"}}><span style={{color:'red'}}>*</span><span style={{color:"#333"}}>服务内容:</span></div>  
      </div>
     <div>
         {this.props.processStatus == 0 ? <div> <PicturesWall
              domId={this.props.domId}
              fileList={this.props.getContentUrl}
              pictureUrl={this.props.contentUrl}
              url="/api/admin/order/uploadOrderImg"
              sign=""
            />
            <p><span style={{color:"red",display:"inline-block"}}>(请将合同中的服务内容,截图上传!含服务年限,时间节点等;)</span>图片建议:要清晰。</p></div> : contentUrl ?  <div><ImgList
                  domId={this.props.imgId}
                  fileList={this.props.contentUrl}
                  ItemWidth={"96px"}
                /><Modal
                maskClosable={false}
                footer={null}
                width={"50%"}
                visible={this.state.previewVisible}
                onCancel={() => {
                  this.setState({
                    previewVisible: false,
                    rotateDeg: 0,
                  });
                }}
              >
                <img
                  alt=""
                  style={{
                    width: "100%",
                    transform: `rotate(${this.state.rotateDeg}deg)`,
                  }}
                  src={this.state.previewImage || ""}
                />
                <Button
                  onClick={this.rotate}
                  style={{
                    position: "relative",
                    left: "50%",
                    transform: "translateX(-50%)",
                  }}
                >
                  旋转
                </Button>
                <Button
                  onClick={this.upImg}
                  style={{
                    position: "absolute",
                    left: -81,
                    top: "50%",
                    transform: "translateY(-50%)",
                  }}
                >
                  上一张
                </Button>
                <Button
                  onClick={this.downImg}
                  style={{
                    position: "absolute",
                    right: -81,
                    top: "50%",
                    transform: "translateY(-50%)",
                  }}
                >
                  下一张
                </Button>
              </Modal> </div>
                :"暂无附件!"}
                {/* <div style={{color:"red"}}>(请将合同中的服务内容,截图上传!含服务年限,时间节点等)</div> */}
      </div>
      </div>
    );
  }
}

export default contentUrl;
