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 { getNewList } from "../../utils/tools";

import {
  getRestrictProjectUser
} 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,
      userList: props.userList,
      modifyType: 2,
      // colors: "primary",
      // color: "secondary",
      type: 0,
      visibles: true,
      // newList: getNewList(props.dtails.uids, props.dtails.userNames),
      newList: [],
      jsList: [],
    };
    this.submit = this.submit.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onVisible = this.onVisible.bind(this);
    this.onListChange = this.onListChange.bind(this);
    this.getValue = this.getValue.bind(this);
  }

  getValue(arr, key) {
    return arr.map(obj => { return obj[key]; }).join(",")
  }

  getRestrictProjectUser() {
    getRestrictProjectUser({
      ids: this.getValue(this.state.newList, "id"),
    })
      .then((v) => {
        if (v.error.length === 0) {
          this.setState({
            userList: v.data
          })
        } else {
          Taro.showToast({
            title: v.error[0].message,
            icon: "none",
          });
        }
      })
      .catch((err) => {

      });
  }

  submit() {
    // if (this.state.type == 1) {
    //   Taro.showToast({ title: "技术公出请直接点击公出企业", icon: "none" });
    //   return;
    // } else if (this.state.length == 0) {
    //   Taro.showToast({ title: "请先选择公出的企业", icon: "none" });
    //   return;
    // }
    // 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;
    // }
    let obj = {}
    if (this.state.type != 1) {
      if (this.state.newList.length == 0) {
        Taro.showToast({
          title: "请先选择公出企业",
          icon: 'none'
        })
        return
      }
      this.getRestrictProjectUser()
      obj = {
        uids: this.getValue(this.state.newList, "id"),
        userNames: this.getValue(this.state.newList, "name"),
        type: this.state.type,
        newList: this.state.newList
      }
    } else {
      let contractNo = ""
      let orderNo = ""
      for (var i = 0; i < this.state.jsList.length; i++) {
        if (!!this.state.jsList[i].contractNo) {
          contractNo = this.state.jsList[i].contractNo
          orderNo = this.state.jsList[i].orderNo
        }
      }
      if (this.state.jsList.length == 0) {
        Taro.showToast({
          title: "必须选择一个派单编号",
          icon: 'none'
        })
        return
      }
      obj = {
        uids: this.getValue(this.state.jsList, "id"),
        userNames: this.getValue(this.state.jsList, "name"),
        type: this.state.type,
        contractNo,
        orderNo,
        newList: this.state.newList
      }
    }
    this.setState({
      dtails: {
        ...this.state.dtails,
        ...obj,
      },
      data: obj,
    })
    this.setState({
      modifyType: 2,
    });
  }
  onVisible() {
    this.setState({
      visibles: false,
    });
  }
  componentWillUnmount() {
    this.setState({
      data: {},
    });
  }

  onListChange(list) {
    this.setState({
      newList: list
    })
  }

  onChange(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() {
    let userInfor = Taro.getStorageSync('userInfor');
    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"
                  disabled={item.type === 1 && userInfor.type !== 3}
                  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={{ 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}
              newList={this.state.newList}
              jsList={this.state.jsList}
              onListChange={this.onListChange}
            />
          ) : (
            <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}
              userList={this.state.userList}
              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;
