import { Button, Form, Input, Table, Tag } from "antd";
import { FC, useMemo, useState } from "react";
import classNames from "classnames";
import { DageTableActions } from "@dage/pc-components";
import { EvaluationModal } from "../EvaluationModal";
import style from "./index.module.scss";
import { IManageFormDetail, IManageIndexDetail, YES_OR_NO } from "@/types";
import { downloadFile } from "@/utils";
import { getBaseURL } from "@dage/service";

export interface OverallAssessmentProps {
  detail: IManageIndexDetail | IManageFormDetail | null;
  isReportDetail?: boolean;
  isEvalutionDetail?: boolean;
}

const { TextArea } = Input;

export const OverallAssessment: FC<OverallAssessmentProps> = ({
  detail,
  isReportDetail,
  isEvalutionDetail,
}) => {
  const baseUrl = getBaseURL();
  const [modalVisible, setModelVisible] = useState(false);
  // 加分项
  const addList = useMemo(() => {
    if (!detail || !detail.jsonAdd) return [];
    return JSON.parse(detail.jsonAdd);
  }, [detail]);
  // 减分项
  const subList = useMemo(() => {
    if (!detail || !detail.jsonSub) return [];
    return JSON.parse(detail.jsonSub);
  }, [detail]);

  return (
    <Form
      labelCol={{ offset: 1, span: 3 }}
      wrapperCol={{
        offset: 1,
      }}
      colon={false}
      className={classNames(style.form, "mw1125")}
    >
      <Form.Item label="考核说明">
        <p>{detail?.remark}</p>
      </Form.Item>

      {!isReportDetail && (
        <>
          <Form.Item label="考核进度">
            <Table
              pagination={false}
              className="cus-table"
              rowKey="id"
              columns={[
                {
                  title: "部门名称",
                  dataIndex: "name",
                  align: "center",
                },
                {
                  title: "部门考核状态",
                  dataIndex: "type",
                  align: "center",
                },
              ]}
            />
          </Form.Item>

          <Form.Item label="评定意见">
            {isEvalutionDetail ? (
              <TextArea
                rows={6}
                placeholder="请输入文字，不超过1000字"
                maxLength={1000}
              />
            ) : (
              <p>
                1、
                工作中具有独立思考、不断创新的能力。对工作有高度的事业心和责任感，积极主动工作，认真履行自己的职责。
                2、
                该同志工作态度端正，对工作有高度的事业心和责任感，政治立场坚定，方向明确，忠诚并献身于党和人民的教育事业，治学严谨，热爱学生，以身作则，为人师表。
                3、
                该同志遵纪守法，具有良好的社会公德和家庭美德，有高尚的职业道德，关爱学生，面向全体学生，注重学生的全面发展，认真履行教师职务职责，有强烈的服务意识。
                4、
                该同志政治立场坚定，教育思想端正，专业知识及基本功扎实过硬，具有很强的表达能力，善于做思想政治工作。严格遵守学校的作息时间和工作纪律，全身心地投入工作。
              </p>
            )}
          </Form.Item>
        </>
      )}

      <Form.Item label="资料上传">
        {(detail?.materials || []).map((item) => {
          const isUpload = item.isUpload === YES_OR_NO.YES;

          return (
            <div key={item.id}>
              <div className={style.fileUploadHeader}>
                <div>
                  <Tag color={isUpload ? "red" : ""}>
                    {isUpload ? "必填" : "选填"}
                  </Tag>
                  <h3>
                    {item.name} | {item.suffix}
                  </h3>
                </div>
                <Button
                  type="primary"
                  ghost
                  onClick={() =>
                    downloadFile(
                      baseUrl +
                        process.env.REACT_APP_IMG_PUBLIC +
                        item.filePath,
                      item.fileName
                    )
                  }
                >
                  下载模板
                </Button>
              </div>

              <Table
                rowKey="id"
                className="cus-table"
                pagination={false}
                dataSource={[]}
                columns={[
                  {
                    title: "附件名称",
                    dataIndex: "fileName",
                    align: "center",
                  },
                  {
                    title: "责任部门",
                    dataIndex: "deptName",
                    align: "center",
                  },
                  {
                    title: "上传用户",
                    dataIndex: "creatorName",
                    align: "center",
                  },
                  {
                    title: "编辑时间",
                    dataIndex: "updateTime",
                    align: "center",
                  },
                  {
                    title: "操作",
                    align: "center",
                    render: () => (
                      <DageTableActions
                        renderBefore={
                          <Button size="small" type="link">
                            下载
                          </Button>
                        }
                        showDelete={isReportDetail}
                        showEdit={false}
                      />
                    ),
                  },
                ]}
              />
            </div>
          );
        })}
      </Form.Item>

      {!isReportDetail && (
        <Form.Item label="附加项">
          <Table
            rowKey="id"
            className="cus-table"
            pagination={false}
            dataSource={addList}
            columns={[
              {
                title: "加分项名称",
                dataIndex: "name",
                align: "center",
              },
              {
                title: "指标分值",
                dataIndex: "num",
                align: "center",
              },
              {
                title: "评定得分",
                dataIndex: "user",
                align: "center",
              },
              {
                title: "评定人",
                dataIndex: "create_time",
                align: "center",
              },
              {
                title: "评定意见",
                dataIndex: "create_time",
                align: "center",
              },
              {
                title: "操作",
                align: "center",
                hidden: !isEvalutionDetail,
                render: () => <Button type="link">评定</Button>,
              },
            ]}
          />

          <Table
            rowKey="id"
            style={{ marginTop: 20 }}
            className="cus-table"
            pagination={false}
            dataSource={subList}
            columns={[
              {
                title: "减分项名称",
                dataIndex: "name",
                align: "center",
              },
              {
                title: "可扣分值",
                dataIndex: "num",
                align: "center",
              },
              {
                title: "评定得分",
                dataIndex: "user",
                align: "center",
              },
              {
                title: "评定人",
                dataIndex: "create_time",
                align: "center",
              },
              {
                title: "评定意见",
                dataIndex: "create_time",
                align: "center",
              },
              {
                title: "操作",
                align: "center",
                hidden: !isEvalutionDetail,
                render: () => (
                  <Button type="link" onClick={() => setModelVisible(true)}>
                    评定
                  </Button>
                ),
              },
            ]}
          />
        </Form.Item>
      )}

      <EvaluationModal
        open={modalVisible}
        onCancel={() => setModelVisible(false)}
      />
    </Form>
  );
};
