import React from "react";
import {
  Tag,
  Button,
  Card,
  Form,
  Input,
  Select,
  DatePicker,
  Row,
  Col,
  Flex,
} from "antd";

import AttachmentUpload from "~/components/AttachmentUpload";

const { TextArea } = Input;

const ContractContent = () => {
  const [form] = Form.useForm();

  return (
    <div>
      <div className="pf-permission">
        <Tag color="blue" className="pf-tag">
          机构管理员 / 项目负责人
        </Tag>
        <span className="pf-desc">
          按照已批准的风险分析结论录入项目合同和被评价企业信息，上传PDF格式的正式合同扫描件。
        </span>
      </div>
      <Card title="项目合同信息" styles={{ header: { textAlign: "center" } }}>
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            orgName: "重庆市安全生产科学研究有限公司",
            contractCode: "HT00000000000000000001",
            projectName: "重庆市安全生产科学研究有限公司工程项目安全预评价",
            projectIntro: "项目简介",
            amount: 3,
            projectType: "新建项目",
            riskAnalysis:
              "火灾、爆炸、中毒、触电、高处坠落、坍塌等，风险程度为中度，具备签约基础。",
            location: "重庆市",
            address: "重庆市渝北区",
            startDate: null,
            endDate: null,
            evalType: "预评价",
            toxicChem: "否",
            precursorChem: "否",
            crossProvince: "否",
            bizScope: "金属冶炼",
            enterpriseName: "重庆市安全生产科学研究有限公司",
            industryCategory: "科学研究和技术服务业",
            officeAddress: "重庆市渝北区",
            creditCode: "915001072028699512",
            postCode: "401120",
            phone: "023-68705577",
            fax: "023-68705577",
            legalPerson: "刘先生",
            contactPerson: "刘先生",
            employeeCount: 5500,
            contactPhone: "18070969727",
          }}
        >
          <Card
            type="inner"
            size="small"
            title="项目合同信息"
            extra={<Tag color="blue">合同基本信息</Tag>}
            className="pf-section"
          >
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item
                  label="机构名称"
                  name="orgName"
                  rules={[{ required: true, message: "请填写机构名称" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="合同编号"
                  name="contractCode"
                  rules={[{ required: true, message: "请填写合同编号" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="项目名称"
                  name="projectName"
                  rules={[{ required: true, message: "请填写项目名称" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="项目简介"
                  name="projectIntro"
                  rules={[{ required: true, message: "请填写项目简介" }]}
                >
                  <TextArea
                    rows={3}
                    maxLength={150}
                    showCount
                    placeholder="请输入项目简介"
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="合同金额(万元)" name="amount">
                  <Input type="number" min={0} step={0.01} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="项目类型"
                  name="projectType"
                  rules={[{ required: true, message: "请选择项目类型" }]}
                >
                  <Select>
                    <Select.Option value="新建项目">新建项目</Select.Option>
                    <Select.Option value="续评项目">续评项目</Select.Option>
                    <Select.Option value="变更项目">变更项目</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="项目风险分析"
                  name="riskAnalysis"
                  rules={[{ required: true, message: "请填写项目风险分析" }]}
                >
                  <TextArea
                    rows={3}
                    maxLength={150}
                    showCount
                    placeholder="自动带入风险分析结论，可补充说明"
                  />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="项目所在地"
                  name="location"
                  rules={[{ required: true, message: "请填写项目所在地" }]}
                >
                  <TextArea
                    rows={2}
                    maxLength={150}
                    showCount
                    placeholder="请输入项目所在地"
                  />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="项目详细地址"
                  name="address"
                  rules={[{ required: true, message: "请填写项目详细地址" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="合同开始时间"
                  name="startDate"
                  rules={[{ required: true, message: "请选择合同开始时间" }]}
                >
                  <DatePicker className="pf-w-full" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="合同结束时间"
                  name="endDate"
                  rules={[{ required: true, message: "请选择合同结束时间" }]}
                >
                  <DatePicker className="pf-w-full" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="评价类型"
                  name="evalType"
                  rules={[{ required: true, message: "请选择评价类型" }]}
                >
                  <Select>
                    <Select.Option value="预评价">预评价</Select.Option>
                    <Select.Option value="验收评价">验收评价</Select.Option>
                    <Select.Option value="现状评价">现状评价</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="是否生产剧毒化学品"
                  name="toxicChem"
                  rules={[
                    { required: true, message: "请选择是否生产剧毒化学品" },
                  ]}
                >
                  <Select>
                    <Select.Option value="否">否</Select.Option>
                    <Select.Option value="是">是</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="是否生产易制毒化学品"
                  name="precursorChem"
                  rules={[
                    { required: true, message: "请选择是否生产易制毒化学品" },
                  ]}
                >
                  <Select>
                    <Select.Option value="否">否</Select.Option>
                    <Select.Option value="是">是</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="是否跨省建设项目"
                  name="crossProvince"
                  rules={[
                    { required: true, message: "请选择是否跨省建设项目" },
                  ]}
                >
                  <Select>
                    <Select.Option value="否">否</Select.Option>
                    <Select.Option value="是">是</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="项目业务范围"
                  name="bizScope"
                  rules={[{ required: true, message: "请填写项目业务范围" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </Card>

          <Card
            type="inner"
            size="small"
            title="被评价企业信息"
            extra={<Tag color="blue">合同服务对象</Tag>}
            className="pf-section"
          >
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item
                  label="企业名称"
                  name="enterpriseName"
                  rules={[{ required: true, message: "请填写企业名称" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="国民经济行业类别" name="industryCategory">
                  <TextArea
                    rows={2}
                    maxLength={150}
                    showCount
                    placeholder="请输入国民经济行业类别"
                  />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="办公地址" name="officeAddress">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="社会统一信用代码" name="creditCode">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="邮政编码" name="postCode">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="企业电话" name="phone">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="传真" name="fax">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="法人代表" name="legalPerson">
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="联系人"
                  name="contactPerson"
                  rules={[{ required: true, message: "请填写联系人" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="职工人数" name="employeeCount">
                  <Input type="number" min={0} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="联系人电话"
                  name="contactPhone"
                  rules={[{ required: true, message: "请填写联系人电话" }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </Card>

          <AttachmentUpload
            name="contractFiles"
            label="项目合同扫描件"
            accept=".pdf"
            maxCount={10}
            extra={"请上传PDF文件，并且大小不应超过500MB，不超过10个文件。"}
          />
        </Form>

        <Flex justify="flex-end" gap={8}>
          <Button>取消</Button>
          <Button type="primary">完成合同录入并保存</Button>
        </Flex>
      </Card>
    </div>
  );
};

export default ContractContent;