import React, { Component } from "react";
import {
  AtCalendar,
  AtModal,
  AtModalAction,
  AtModalContent,
  AtButton,
} from "taro-ui";
import { Button, View } from "@tarojs/components";
import Enterprise from "./enterprise";
import PublicContent from "./publicContent";

import { updatePublicRelease } from "../../utils/servers/servers";

import "taro-ui/dist/style/components/modal.scss";
import Taro from "@tarojs/taro";

class Modify extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      dtails: props.dtails,
      modifyType: 2,
      // colors: "primary",
      // color: "secondary",
      type: 0,
      visibles: true,
    };
    this.submit = this.submit.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onVisible = this.onVisible.bind(this);
  }

  submit() {
    if (Object.keys(this.state.data).length === 0) {
      Taro.showToast({ title: "请先选择公出的企业", icon: "none" });
      return;
    } else if (this.state.type == 1) {
      Taro.showToast({ title: "技术公出请直接点击公出企业", icon: "none" });
      return;
    }
    this.setState({
      modifyType: 2,
    });
  }
  onVisible() {
    this.setState({
      visibles: false,
    });
  }
  componentWillUnmount() {
    this.setState({
      data: {},
    });
  }

  onChange(value, visi) {
    // console.log("----", value, visi);
    value.type = this.state.type;
    this.setState({
      dtails: {
        ...this.state.dtails,
        ...value,
      },
      data: value,
      modifyType: 2,
    });
    //判断不明确暂时注释，明确后再行修改
    // if (visi == 0) {
    //   this.setState({
    //     dtails: {
    //       ...this.state.dtails,
    //       ...value,
    //     },
    //     data: value,
    //   });
    // } else {
    //   value.type = this.state.type;
    //   this.setState({
    //     dtails: {
    //       ...this.state.dtails,
    //       ...value,
    //     },
    //     data: value,
    //     modifyType: 2,
    //   });
    // }
  }

  render() {
    return (
      <AtModal isOpened={this.props.isOpened} onClose={this.props.onModalClose}>
        {this.state.modifyType === 1 ? (
          <View
            style={{ display: "flex", margin: "10px 0 0 0", padding: "0 5px" }}
          >
            {[
              { type: 0, title: "业务公出" },
              { type: 1, title: "技术公出" },
              { type: 2, title: "行政公出" },
            ].map((item) => (
              <View style={{ margin: "0 5px" }} key={item.type}>
                <AtButton
                  circle
                  size="small"
                  type={this.state.type == item.type ? "primary" : "secondary"}
                  onClick={() => {
                    this.setState({
                      type: item.type,
                    });
                    item.type != 1 &&
                      this.setState({
                        visibles: true,
                      });
                  }}
                >
                  {item.title}
                </AtButton>
              </View>
            ))}
            {/* <View style={{ margin: '0 10px' }}>
              <AtButton circle size='small' type={this.state.colors} onClick={() => {
                this.setState({
                  colors: 'primary',
                  color: 'secondary',
                  type: 0,
                  visibles:true
                })
              }}>业务/行政公出</AtButton>
            </View>
            <AtButton type={this.state.color} circle size='small' onClick={() => {
              this.setState({
                colors: 'secondary',
                color: 'primary',
                type: 1,
              })
            }}>技术公出</AtButton> */}
            <View style={{ flex: "1" }}></View>
          </View>
        ) : (
          ""
        )}

        <AtModalContent>
          {this.state.modifyType === 1 ? (
            <Enterprise
              type={this.state.type}
              isOpened={this.props.isOpened}
              isVerify={this.props.isVerify} //判断是否在审核中修改
              onChange={this.onChange}
            />
          ) : (
            <PublicContent
              permission={this.props.permission}
              index={this.props.index}
              type={this.state.type}
              onClose={() => {
                this.props.onClose();
              }}
              locationInfor={this.props.locationInfor}
              dtails={this.state.dtails}
              isOpened={this.props.isOpened}
              isVerify={this.props.isVerify}
              reason={this.props.reason}//修改原因
              onChange={this.onChange}
              onBack={() => {
                this.setState({
                  modifyType: 1,
                });
              }}
            />
          )}
        </AtModalContent>
        {this.state.modifyType === 1 ? (
          <AtModalAction>
            <Button
              onClick={() => {
                this.props.onClose();
              }}
            >
              取消
            </Button>
            <Button onClick={this.submit}>下一步</Button>
          </AtModalAction>
        ) : null}
      </AtModal>
    );
  }
}

export default Modify;
