import React, { Component } from "react";
import { Form, Input, Select, Button, DatePicker ,Spin } from "antd";
import Upload from "../Upload/Index";
import UploadImg from "../Images/upload.png";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import moment from "moment";
import "./order.css";
import Attachments from "../Upload/attachment";

import axios from "axios";

const Option = Select.Option;
class order_form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      branch_name: "",
      issue_tag_ids: "",
      fixed_version_id: "",
      tracker_id: "4",
      issue_type: "1",
      status_id: "1",
      assigned_to_id: "",
      priority_id: "2",
      done_ratio: "0%",
      issue_chosen: undefined,
      branches: undefined,
      fileList: undefined,
      description: undefined,
      isSpin: true,
      token: undefined,
      start_date: "",
      due_date: "",
      subject: "",
      get_attachments: undefined,
      show_token: false,
      cannot_edit: false,
      issue_current_user: true,
      atWhoLoginList:undefined
    };
  }
  componentDidUpdate=(prevPros)=>{
    if(prevPros && this.props && this.props.checkIfLogin()===false){
      this.props.history.push("/403")
      return
    }
  }
  componentDidMount = () => {
    this.getSelectList();
  };

  copyIssueAtWhoInit = (description) =>{
    if (description.indexOf("@") !== -1){
      this.setState({isSpin: true});
      const { projectsId, owner } = this.props.match.params;
      axios.get(`/${owner}/${projectsId}/members.json`).then(response => {
        this.setState({ isSpin: false});
        if (response.data.total_count !== 0) {
          const allUser = response.data.users;
          if (allUser && allUser.length !== 0 && description && description.indexOf("@") !== -1) {
            const list = new Set();
            allUser.map(item => {
              if (description.indexOf(`[@${item.username}](/${item.login})`) !== -1) {
                list.add(item.login);
              }
            })
            this.setState({ atWhoLoginList: Array.from(list) });
          }
        }
      })
    }
  }

  get_detail = () => {
    this.setState({
      isSpin:true
    })
    const { projectsId, orderId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/issues/${orderId}/edit.json`;
    axios.get(url).then((result) => {
      if (result) {
        let data ={
          branch_name: result.data.branch_name,
          issue_tag_ids: 
            result.data.issue_tags && result.data.issue_tags[0].id ? 
              String(result.data.issue_tags[0].id) : ""
          ,
          fixed_version_id: result.data.fixed_version_id ? String(result.data.fixed_version_id) : "",
          tracker_id: result.data.tracker_id ? String(result.data.tracker_id) : "",
          issue_type: result.data.issue_type,
          status_id: result.data.status_id ? String(result.data.status_id) : "",
          assigned_to_id: result.data.assigned_to_id ? String(result.data.assigned_to_id) : "",
          priority_id: result.data.priority_id ? String(result.data.priority_id) : "",
          done_ratio: result.data.done_ratio,
          fileList: undefined,
          description: result.data.description,
          isSpin: false,
          token: result.data.token,
          get_attachments: result.data.attachments,
          start_date: result.data.start_date,
          due_date: result.data.due_date,
          subject: result.data.subject,
        }
        if (this.props.form_type === "copy" && result.data.description){
          
          this.copyIssueAtWhoInit(result.data.description);
        }
        this.props.form.setFieldsValue({ ...data });
        this.setState({ ...data });
      }
    }).catch((error) => {
      this.setState({
        isSpin:false
      })
      console.log(error);
    });
  };
  getSelectList = () => {
    let {projectsId, owner , milepostId} = this.props.match.params;

    const url = `/${owner}/${projectsId}/issues/new.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
        this.setState({
          issue_chosen: result.data.issue_chosen,
          branches: result.data.issue_chosen.branches,
          isSpin:false
        });

        if(this.props.form_type === "feedback"){
          let data ={
            //指定指派成员，类型：缺陷，优先度：正常，issue状态：新增
            tracker_id: "1",
            assigned_to_id: window.location.host === "www.gitlink.org.cn" ? "86107":"36480",
            priority_id: "2",
            status_id: "1",
            description:"####问题描述\n\n\n####重现问题步骤\n\n\n####截图\n\n\n####建议解决办法\n",
          }
          this.setState({ ...data });
          this.props.form.setFieldsValue({ 
            ...this.state,
            fixed_version_id: milepostId || "" 
          });
          
        }else if(this.props.form_type !== "new"){
          this.get_detail();
        }else{
          this.props.form.setFieldsValue({
            ...this.state,
            fixed_version_id: milepostId || ""
          });
        }
      }
    }).catch((error) => {
      console.log(error);
    });
  };

  renderSelect = (list) => {
    if (list && list.length > 0) {
      return list.map((item, key) => {
        return (
          <Option key={key + 1} value={String(item.id)}>
            {item.color && <span className="tagColor" style={{backgroundColor:`${item.color}`}}></span>}{item.name}
          </Option>
        );
      });
    }
  };

  // 创建
  handleSubmit = () => {
    
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({
          isSpin: true,
        });
        const { form_type } = this.props;
        const { projectsId , orderId , owner } = this.props.match.params;

        const { fileList } = this.state;

        if (values.status_id === "新增") {
          values.status_id = "1";
        }
        if (values.tracker_id === "缺陷") {
          values.tracker_id = "1";
        }
        if (values.priority_id === "正常") {
          values.priority_id = "2";
        }
        if (values.done_ratio === "0%") {
          values.done_ratio = "0";
        }
        if (values.issue_tag_ids.length > 0) {
          values.issue_tag_ids = [values.issue_tag_ids];
        }
        const { description, start_date, due_date, issue_type , atWhoLoginList } = this.state;
        if (form_type !== "edit") {
          const url = `/${owner}/${projectsId}/issues.json`;
          axios.post(url, {
            ...values,
            description: description,
            attachment_ids: fileList,
            start_date: start_date,
            due_date: due_date,
            issue_type: issue_type,
            receivers_login:atWhoLoginList,
          }).then((result) => {
            if (result && result.data.id) {
              this.props.showNotification("任务创建成功！");
              this.props.history.push(`/${owner}/${projectsId}/issues/${result.data.id}`);
              const { getDetail } = this.props;
              getDetail && getDetail();
            }
            this.setState({
              isSpin: false,
            });
          })
          .catch((error) => {
            this.setState({
              isSpin: false
            });
          });
        } else {
          const url = `/${owner}/${projectsId}/issues/${orderId}.json`;
          axios.put(url, {
            description: description,
            attachment_ids: fileList,
            start_date: start_date,
            due_date: due_date,
            issue_type: issue_type,
            ...values,
            receivers_login:atWhoLoginList,
          }).then((result) => {
            if (result) {
              this.props.history.push(`/${owner}/${projectsId}/issues/${orderId}`);
              this.props.showNotification("任务更新成功！");
              const { getDetail } = this.props;
              getDetail && getDetail();
            }
            this.setState({
              isSpin: false
            });
          })
          .catch((error) => {
            this.setState({
              isSpin: false
            });
          });
        }
      }
    });
  };

  // 获取上传后的文件id数组
  UploadFunc = (fileList) => {
    this.setState({
      fileList,
    });
  };

  onContentChange = (value) => {
    this.setState({
      description: value,
    });
  };

  //issue中at谁列表（存储：login）
  changeAtWhoLoginList = (loginList) =>{
    let list = new Set(this.state.atWhoLoginList);
    loginList.map(item => list.add(item));
    this.setState({
      atWhoLoginList: Array.from(list),
    });
  };

  // 修改开始时间
  changeBeginTime = (start_date, value) => {
    this.setState({
      start_date: value,
    });
  };
  changeEndTime = (due_date, value) => {
    this.setState({
      due_date: value,
    });
  };
  // 切换完成度
  changeRatio = (e) => {
    if (e === "0") {
      this.props.form.setFieldsValue({
        status_id: "1",
      });
      this.setState({
        status_id: "1",
      });
    } else if (e === "100") {
      this.props.form.setFieldsValue({
        status_id: "3",
      });
      this.setState({
        status_id: "3",
      });
    } else {
      this.props.form.setFieldsValue({
        status_id: "2",
      });
      this.setState({
        status_id: "2",
      });
    }
  };
  //切换状态
  changeStatus = (e) => {
    if (e === "1") {
      this.props.form.setFieldsValue({
        done_ratio: "0",
      });
      this.setState({
        done_ratio: "0",
        issue_current_user: true,
      });
    } else if (e === "3") {
      this.props.form.setFieldsValue({
        done_ratio: "100",
      });
      this.setState({
        done_ratio: "100",
        issue_current_user: true,
      });
    }else if (e === "5") {
      this.setState({
        issue_current_user: false,
      });
    }
  };

  //切换是否上链操作
  change_issue_type = (e) => {
    if (e) {
      this.setState({
        issue_type: "2",
        show_token: true,
      });
    } else {
      this.setState({
        issue_type: "1",
        show_token: false,
      });
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { projectsId , owner } = this.props.match.params;
    const { orderId } = this.props.match.params;
    const { form_type } = this.props;
    const {issue_chosen,branches,description,get_attachments,isSpin,start_date,due_date} = this.state;
    return (
      <Spin spinning={isSpin}>
        <div className="ProjectListIndex issue-form-index">
          <Form className="width100 display-in" size="small">
            <div className="list-right">
              <div className="pd20">
                <h3 className="mb15">
                  {form_type === "edit" ? "编辑" :( form_type === "copy" ? "复制" : "新建")}疑修
                </h3>
                <Form.Item>
                  {getFieldDecorator("subject", {
                    rules: [
                      {
                        required: true,
                        message: "请填写疑修标题",
                      },
                    ]
                  })(<Input placeholder="标题" size="large" maxLength={200}/>)}
                </Form.Item>
                <div className="quillContent">
                  <MDEditor
                    placeholder={"请输入描述信息"}
                    height={500}
                    mdID={"order-new-description"}
                    initValue={description}
                    onChange={this.onContentChange}
                    isCanAtme = {true}
                    changeAtWhoLoginList = {this.changeAtWhoLoginList}
                    owner = {owner}
                    projectsId = {projectsId}
                  ></MDEditor>
                </div>
                {get_attachments && get_attachments.length > 0 ? (
                  <div className="mt20">
                    <Attachments
                      attachments={get_attachments}
                      showNotification={this.props.showNotification}
                      canDelete={true}
                    />
                  </div>
                ) : (
                  ""
                )}
                <Upload
                  className="commentStyle mt30"
                  isComplete={true}
                  load={this.UploadFunc}
                  icon={
                    <img
                      src={UploadImg}
                      width="58"
                      alt=""
                      style={{ marginBottom: 15 }}
                    />
                  }
                  size={100}
                  showNotification={this.props.showNotification}
                />
                <p className="clearfix mt20">
                  <Button
                    type="primary"
                    onClick={this.handleSubmit}
                  >
                    <span className="plr10">
                      {form_type === "new" || form_type === "feedback" ? "创建" : "提交"}
                    </span>
                  </Button>
                  <Button
                    type="default"
                    className="ml30"
                    onClick={()=>
                      this.props.history.push(form_type === "new" || form_type === "feedback" ? `/${owner}/${projectsId || orderId}/issues` : `/${owner}/${projectsId}/issues/${orderId}`)}
                  >
                    <span className="plr10">取消</span>
                  </Button>
                </p>
              </div>
            </div>
            <div className="list-left list-left-padding issue-edit-form-right">
              <div className="pd20 background-f issue-form-right">
                <Form.Item label="指派成员">
                  {getFieldDecorator("assigned_to_id", {rules: []})(
                    <Select 
                      showSearch
                      className="searchIcon"
                      showArrow={true}
                      suffixIcon={<i className="iconfont icon-sousuo1"></i>}
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        option.props.children[1] && option.props.children[1].toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                      placeholder="搜索成员"
                    >
                      <Option value={""}>未指派成员</Option>
                      {this.renderSelect(
                        issue_chosen && issue_chosen.assign_user
                      )}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label="状态">
                  {getFieldDecorator("status_id", {
                    rules: [{
                      required: true,
                      message: "请选择完成状态",
                    }]
                  })(
                    <Select onChange={this.changeStatus}>
                      {this.renderSelect( issue_chosen && issue_chosen.issue_status )}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label="类型">
                  {getFieldDecorator("tracker_id", {
                    rules: [{
                      required: true,
                      message: "请选择类型",
                    }]
                  })(
                    <Select>
                      {this.renderSelect(issue_chosen && issue_chosen.tracker)}
                    </Select>
                  )}
                </Form.Item>

                <Form.Item label="优先度">
                  {getFieldDecorator("priority_id", {
                    rules: [{
                      required: true,
                      message: "请选择优先度",
                    }]
                  })(
                    <Select>
                      {this.renderSelect(issue_chosen && issue_chosen.priority)}
                    </Select>
                  )}
                </Form.Item>

                <Form.Item label="里程碑">
                  {getFieldDecorator("fixed_version_id", {rules: []})(
                    <Select
                      showSearch
                      className="searchIcon"
                      showArrow={true}
                      suffixIcon={<i className="iconfont icon-sousuo1"></i>}
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        option.props.children[1] && option.props.children[1].toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                    >
                      <Option value={""}>
                        {issue_chosen && issue_chosen.issue_version.length > 0
                          ? "未选择里程碑"
                          : "请添加里程碑"}
                      </Option>
                      {this.renderSelect(
                        issue_chosen && issue_chosen.issue_version
                      )}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label="标记">
                  {getFieldDecorator("issue_tag_ids", {rules: []})(
                    <Select
                      showSearch
                      className="searchIcon"
                      showArrow={true}
                      suffixIcon={<i className="iconfont icon-sousuo1"></i>}
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        option.props.children[1] && option.props.children[1].toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                    >
                      <Option value={""}>
                        {issue_chosen && issue_chosen.issue_tag.length > 0
                          ? "未选择标记"
                          : "请在仓库设置里添加标记"}
                      </Option>
                      {this.renderSelect(issue_chosen && issue_chosen.issue_tag)}
                    </Select>
                  )}
                </Form.Item>

                <Form.Item label="开始日期">
                  <DatePicker
                    value={start_date ? moment(start_date, "YYYY-MM-DD") : null}
                    style={{ width: "100%" }}
                    placeholder="请选择开始日期"
                    onChange={this.changeBeginTime}
                  />
                </Form.Item>
                <Form.Item label="结束日期">
                  <DatePicker
                    value={due_date ? moment(due_date, "YYYY-MM-DD") : null}
                    style={{ width: "100%" }}
                    placeholder="请选择结束日期"
                    onChange={this.changeEndTime}
                  />
                </Form.Item>
                <Form.Item label="完成度">
                  {getFieldDecorator("done_ratio", {rules: []})(
                    <Select onChange={this.changeRatio}>
                      {this.renderSelect(issue_chosen && issue_chosen.done_ratio)}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label="指定分支">
                  {getFieldDecorator("branch_name", {
                    rules: []
                  })(
                    <Select
                      showSearch
                      className="searchIcon"
                      showArrow={true}
                      suffixIcon={<i className="iconfont icon-sousuo1"></i>}
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        option.props.children && option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                    >
                      <Option value={""}>分支未指定</Option>
                      {branches && branches.length > 0 && branches.map((item, key) => {
                        return (
                          <Option value={item} key={key}>
                            {item}
                          </Option>
                        );
                      })}
                    </Select>
                  )}
                </Form.Item>
              </div>
            </div>
          </Form>
        </div>
      </Spin>
    );
  }
}
const WrappedNewForm = Form.create({ name: "NewOrderForm" })(order_form);
export default WrappedNewForm;
