/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { Fragment } from "react";
import { Button, Row, Col, Icon, Steps, Card } from "antd";
import Result from "components/Result";
import PageHeaderLayout from "../../layouts/PageHeaderLayout";

const { Step } = Steps;

const desc1 = (
  <div
    style={{
      fontSize: 12,
      color: "rgba(0, 0, 0, 0.45)",
      position: "relative",
      left: 42,
    }}
  >
    <div style={{ margin: "8px 0 4px" }}>
      曲丽丽
      <Icon style={{ marginLeft: 8 }} type="dingding-o" />
    </div>
    <div>2016-12-12 12:32</div>
  </div>
);

const desc2 = (
  <div style={{ fontSize: 12, position: "relative", left: 42 }}>
    <div style={{ margin: "8px 0 4px" }}>
      周毛毛
      <Icon type="dingding-o" style={{ color: "#00A0E9", marginLeft: 8 }} />
    </div>
    <div>
      <a href="">催一下</a>
    </div>
  </div>
);

const extra = (
  <>
    <div
      style={{
        fontSize: 16,
        color: "rgba(0, 0, 0, 0.85)",
        fontWeight: "500",
        marginBottom: 20,
      }}
    >
      项目名称
    </div>
    <Row style={{ marginBottom: 16 }}>
      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
        <span style={{ color: "rgba(0, 0, 0, 0.85)" }}>项目 ID：</span>
        23421
      </Col>
      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
        <span style={{ color: "rgba(0, 0, 0, 0.85)" }}>负责人：</span>
        曲丽丽
      </Col>
      <Col xs={24} sm={24} md={24} lg={24} xl={12}>
        <span style={{ color: "rgba(0, 0, 0, 0.85)" }}>生效时间：</span>
        2016-12-12 ~ 2017-12-12
      </Col>
    </Row>
    <Steps
      style={{ marginLeft: -42, width: "calc(100% + 84px)" }}
      progressDot
      current={1}
    >
      <Step
        title={<span style={{ fontSize: 14 }}>创建项目</span>}
        description={desc1}
      />
      <Step
        title={<span style={{ fontSize: 14 }}>部门初审</span>}
        description={desc2}
      />
      <Step title={<span style={{ fontSize: 14 }}>财务复核</span>} />
      <Step title={<span style={{ fontSize: 14 }}>完成</span>} />
    </Steps>
  </>
);

const actions = (
  <>
    <Button type="primary">返回列表</Button>
    <Button>查看项目</Button>
    <Button>打 印</Button>
  </>
);

export default () => (
  <PageHeaderLayout>
    <Card bordered={false}>
      <Result
        type="success"
        title="提交成功"
        description="提交结果页用于反馈一系列操作任务的处理结果，
        如果仅是简单操作，使用 Message 全局提示反馈即可。
        本文字区域可以展示简单的补充说明，如果有类似展示
        “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
        extra={extra}
        actions={actions}
        style={{ marginTop: 48, marginBottom: 16 }}
      />
    </Card>
  </PageHeaderLayout>
);
