import { FC, useState } from "react";
import classNames from "classnames";
import { Col, Form, Input, InputNumber, Radio, Row, Select } from "antd";
import { useNavigate } from "react-router-dom";
import { FileTemplateTable, FormPageFooter, PageContainer } from "@/components";
import style from "./index.module.scss";

const { TextArea } = Input;
const CONFIRM_OPTIONS = [
  {
    label: "是",
    value: 1,
  },
  {
    label: "否",
    value: 0,
  },
];

const CreateOrEditIndex: FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [fields, setFields] = useState<any[]>([
    {
      name: "dfd",
      value: 1,
    },
    {
      name: "gjqz",
      value: 1,
    },
  ]);

  const handleSubmit = async () => {
    if (!(await form.validateFields())) return;

    console.log(form.getFieldsValue());
  };

  return (
    <PageContainer title="新增指标">
      <Form
        fields={fields}
        labelCol={{ span: 4 }}
        form={form}
        onFieldsChange={(_, newFields) => {
          setFields(newFields);
        }}
        onFinish={handleSubmit}
      >
        <Form.Item label="父级指标">
          <Select className="mw650" placeholder="请选择" options={[]} />
        </Form.Item>
        <Form.Item label="指标名称" required>
          <Input
            className="mw650"
            placeholder="请输入内容，最多20字"
            showCount
            maxLength={20}
          />
        </Form.Item>
        <Form.Item label="指标编号">
          <Input
            className="mw650"
            placeholder="请输入内容，最多20字"
            showCount
            maxLength={20}
          />
        </Form.Item>
        <Form.Item label="指标说明">
          <TextArea
            className="mw650"
            showCount
            maxLength={500}
            placeholder="请输入内容，最多500字"
            style={{ height: 120, resize: "none" }}
          />
        </Form.Item>

        <Form.Item label="打分点" name="dfd">
          <Radio.Group
            options={CONFIRM_OPTIONS}
            optionType="button"
            buttonStyle="solid"
          />
        </Form.Item>
        <Form.Item label=" " colon={false} style={{ marginTop: -14 }}>
          <div className={classNames("mw650", style.panel)}>
            {fields[0].value ? (
              <>
                <Form.Item required label="指标分值" labelCol={{ span: 4 }}>
                  <InputNumber
                    precision={0}
                    placeholder="请输入正整数"
                    className="w160"
                  />
                </Form.Item>
                <Form.Item label="数据API" labelCol={{ span: 4 }}>
                  <Input placeholder="请输入地址" style={{ width: 427 }} />
                </Form.Item>
                <Form.Item label="加分项" labelCol={{ span: 4 }} colon={false}>
                  <span className={style.tips}>
                    注：设为加分项后，该指标的分值不会参与父级指标的计算
                  </span>
                </Form.Item>
              </>
            ) : (
              <Form.Item label="分值：0" labelCol={{ span: 4 }} colon={false}>
                <span className={style.tips}>
                  注：当指标不作为打分点时，分值=该指标各分项分值（除加分项）之和
                </span>
              </Form.Item>
            )}
          </div>
        </Form.Item>

        <Form.Item label="告警阈值" name="gjqz">
          <Radio.Group
            options={CONFIRM_OPTIONS}
            optionType="button"
            buttonStyle="solid"
          />
        </Form.Item>
        {fields[1].value ? (
          <Form.Item label=" " colon={false} style={{ marginTop: -14 }}>
            <div
              className={classNames("mw650", style.panel)}
              style={{ padding: "10px 30px" }}
            >
              <Row gutter={10}>
                <Col span={8}>
                  <Select placeholder="请选择" options={[]} />
                </Col>
                <Col span={12}>
                  <InputNumber
                    precision={0}
                    placeholder="请输入正整数"
                    className="w100"
                  />
                </Col>
                <Col span={4}>
                  <span className={style.required}>（必填）</span>
                </Col>
              </Row>

              <Radio.Group
                options={[
                  {
                    label: "与",
                    value: 0,
                  },
                  {
                    label: "否",
                    value: 1,
                  },
                ]}
                style={{ margin: "3px 0" }}
              />

              <Row gutter={10}>
                <Col span={8}>
                  <Select placeholder="请选择" options={[]} />
                </Col>
                <Col span={12}>
                  <InputNumber
                    precision={0}
                    placeholder="请输入正整数"
                    className="w100"
                  />
                </Col>
                <Col span={4}></Col>
              </Row>
            </div>
          </Form.Item>
        ) : (
          ""
        )}

        <Form.Item label="需上传资料">
          <FileTemplateTable />
        </Form.Item>

        <Form.Item required label="排序值">
          <InputNumber
            precision={0}
            min={1}
            max={999}
            placeholder="请输入1~999的数字。数字越小，排序越靠前"
            className="mw650 w100"
          />
        </Form.Item>

        <FormPageFooter onSubmit={handleSubmit} onCancel={() => navigate(-1)} />
      </Form>
    </PageContainer>
  );
};

export default CreateOrEditIndex;