import {
  LockOutlined,
  UserOutlined,
  LoginOutlined,
  ArrowRightOutlined,
  CloseOutlined,
} from "@ant-design/icons";
import { Alert, message, Tabs, Row, Col, Button, Input } from "antd";
import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
import {
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormDependency,
  ProFormText,
  LoginForm,
  ProFormTreeSelect,
  ProFormSelect,
  ProFormTextArea,
} from "@ant-design/pro-form";
import { Link, history, FormattedMessage, useModel } from "umi";
import { fakeAccountLogin, saveForRegister } from "@/services/login";
import styles from "./index.less";
import AES from "crypto-js/aes";
import ECB from "crypto-js/mode-ecb";
import Pkcs7 from "crypto-js/pad-pkcs7";
import Utf8 from "crypto-js/enc-utf8";
import moment from "moment";
import Footer from "@/components/Footer";
import {
  factorySelectRegister,
  storeselectionBoxAll,
  productionLineSelectByShops,
  sectionSelectByShops,
  allUserSelect,
  departmentTree,
  roleSelectRegister,
} from "@/services/system";
import { doFetch } from "@/utils/doFetch";
import { ProDescriptions } from "@ant-design/pro-components";

const { Search } = Input;

const { TabPane } = Tabs;

let col = { xs: 0, sm: 0, md: 7, lg: 6, xl: 6, xxl: 6 },
  cols = { xs: 24, sm: 24, md: 17, lg: 18, xl: 18, xxl: 18 };

const Login = () => {
  const formRef = useRef();
  const { initialState, setInitialState } = useModel("@@initialState");
  const [tabkey, settabkey] = useState("1");
  const [visible, setvisible] = useState(false);
  const [data, setdata] = useState();
  const fetchUserInfo = async () => {
    const userInfo = await initialState?.fetchUserInfo(),
      menuData = await initialState?.getmenuData();

    if (userInfo) {
      localStorage.setItem("WMS_ID", userInfo?.data?.id);
      await setInitialState((s) => {
        return { ...s, currentUser: userInfo?.data, newMenu: menuData };
      });
    }
  };

  //登录
  const handleLogin = async (values) => {
    let timestamp = moment().valueOf().toString() + "acb";
    let newtimestamp = AES.encrypt(timestamp, Utf8.parse("NANGAODEAESKEY--"), {
      mode: ECB,
      padding: Pkcs7,
    }).toString();
    let password = AES.encrypt(values.password, Utf8.parse(timestamp), {
      mode: ECB,
      padding: Pkcs7,
    }).toString();
    const postdata = {
      accountName: values.userName,
      password: password,
      encryptKey: newtimestamp,
    };
    try {
      // 登录
      const res = await fakeAccountLogin({ ...postdata });
      if (res.code === "0000") {
        let token = res?.data?.token;
        localStorage.setItem("TOKEN_MES", token);
        await fetchUserInfo();

        message.success("🎉 🎉 🎉  登录成功！");
        /** 此方法会跳转到 redirect 参数所在的位置 */
        if (!history) return;
        const { query } = history.location;
        const { redirect } = query;
        history.push(redirect || "/");
        return;
      }
    } catch (error) {
      message.error(res.msg);
    }
  };

  const handleReg = async (values) => {
    // 登录
    const res = await saveForRegister({ ...values });
    if (res.code === "0000") {
      message.success("注册成功,根据用户名可查询注册进度");
      formRef.current.resetFields();
      return;
    }
  };

  const handleSubmit = async (values) => {
    if (tabkey == "1") {
      await handleLogin(values);
    } else {
      await handleReg(values);
    }
  };

  return (
    <Row className={styles.container}>
      <Col {...col}>
        <div
          className="img"
          style={{
            backgroundImage: `url(${require("@/assets/loginbg.jpg")})`,
            position: "relative",
          }}
        >
          <div className="cover">
            <img alt="logo" src={require("@/assets/logo_white.png")} />
          </div>
          {visible && (
            <div className={styles.search}>
              <h2
                style={{
                  fontSize: 16,
                  borderBottom: "6px solid #eee",
                  marginBottom: 12,
                  paddingBottom: 12,
                }}
                className="spread"
              >
                <a>查询注册进度</a>
                <CloseOutlined
                  style={{ color: "red" }}
                  onClick={() => {
                    setvisible(false);
                  }}
                ></CloseOutlined>
              </h2>
              <Search
                placeholder="请输入用户名"
                allowClear
                onSearch={(value) => {
                  if (value) {
                    doFetch({
                      url: "/ngic-auth/sysAccountApply/queryByAccount",
                      params: { accountName: value.replace(/^\s+|\s+$/g, "") },
                    }).then((res) => {
                      if (res.code == "0000") {
                        let data = res?.data?.data;
                        setdata(data);
                      }
                    });
                  }
                }}
                style={{ width: "100%", marginBottom: 15 }}
              />

              <ProDescriptions
                columns={[
                  {
                    title: "用户名",
                    dataIndex: "accountName",
                    key: "accountName",
                  },
                  {
                    title: "姓名",
                    dataIndex: "userName",
                    key: "userName",
                  },
                  {
                    title: "联系电话",
                    dataIndex: "telephone",
                    key: "telephone",
                  },
                  {
                    title: "工厂",
                    dataIndex: "factoryName",
                    key: "factoryName",
                  },
                  {
                    title: "组织",
                    dataIndex: "departmentName",
                    key: "departmentName",
                  },
                  {
                    title: "负责仓库",
                    dataIndex: "chargeStoreName",
                    key: "chargeStoreName",
                  },
                  {
                    title: "角色",
                    dataIndex: "roleName",
                    key: "roleName",
                  },
                  {
                    title: "直属领导",
                    dataIndex: "parentName",
                    key: "parentName",
                  },
                  {
                    title: "邮箱",
                    dataIndex: "mailNo",
                    key: "mailNo",
                  },
                  {
                    title: "审批结果",
                    dataIndex: "auditResultName",
                    key: "auditResultName",
                  },
                  {
                    title: "审批意见",
                    dataIndex: "auditOpinion",
                    key: "auditOpinion",
                  },
                  {
                    title: "审批状态",
                    dataIndex: "statusName",
                    key: "statusName",
                  },
                  {
                    title: "备注",
                    dataIndex: "remark",
                    key: "remark",
                  },
                  {
                    title: "申请时间",
                    dataIndex: "applyTime",
                    key: "applyTime",
                  },
                  {
                    title: "审批时间",
                    dataIndex: "auditTime",
                    key: "auditTime",
                  },
                  {
                    title: "审批人",
                    dataIndex: "auditUserName",
                    key: "auditUserName",
                  },
                ]}
                column={1}
                dataSource={data}
              ></ProDescriptions>
            </div>
          )}
        </div>
      </Col>
      <Col
        {...cols}
        onClick={() => {
          setvisible(false);
        }}
      >
        <div
          className="logincontent"
          style={{
            width: "100%",
            height: "100%",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <div className={styles.content}>
            <LoginForm
              submitter={{
                render: (props) => {
                  return (
                    <Button
                      {...props}
                      style={{ width: "100%" }}
                      type="primary"
                      size="large"
                      icon={
                        tabkey === "1" ? (
                          <LoginOutlined />
                        ) : (
                          <ArrowRightOutlined />
                        )
                      }
                      onClick={async () => {
                        let values = await formRef.current.validateFields();
                        await handleSubmit(values);
                      }}
                    >
                      {tabkey === "1" ? "登录" : "注册"}
                    </Button>
                  );
                },
              }}
              onValuesChange={async (values) => {
                if (Object.keys(values)[0] == "factoryIdList") {
                  formRef.current.setFieldsValue({ storeIdList: [] });
                }
              }}
              title={<span style={{ color: "#fff" }}>WMS</span>}
              subTitle={
                <span style={{ color: "rgba(255,255,255,0.6)" }}>
                  智慧仓储管理系统
                </span>
              }
              initialValues={{
                autoLogin: true,
              }}
              onFinish={async (values) => {
                await handleSubmit(values);
              }}
              style={{
                width: tabkey == "2" ? 560 : 328,
                marginLeft: tabkey == "2" ? -116 : 0,
              }} //样式适配
              formRef={formRef}
            >
              <Tabs
                style={{ justifyContent: "flex-start" }}
                activeKey={tabkey}
                onChange={settabkey}
                tabBarStyle={{ color: "#fff" }}
                tabBarExtraContent={
                  <a
                    style={{ color: "rgba(255,255,255,0.6)" }}
                    onClick={(e) => {
                      e.stopPropagation();
                      setvisible(true);
                    }}
                  >
                    查询注册进度
                  </a>
                }
              >
                <TabPane tab="登录" key="1">
                  {tabkey == "1" && (
                    <>
                      <ProFormText
                        name="userName"
                        fieldProps={{
                          size: "large",
                          prefix: (
                            <UserOutlined className={styles.prefixIcon} />
                          ),
                        }}
                        placeholder="用户名"
                        rules={[
                          {
                            required: true,
                            message: "请输入用户名!",
                          },
                        ]}
                      />
                      <ProFormText.Password
                        name="password"
                        fieldProps={{
                          size: "large",
                          prefix: (
                            <LockOutlined className={styles.prefixIcon} />
                          ),
                        }}
                        placeholder="密码"
                        rules={[
                          {
                            required: true,
                            message: "请输入密码！",
                          },
                        ]}
                      />
                    </>
                  )}
                </TabPane>
                <TabPane tab="注册" key="2">
                  {tabkey == "2" && (
                    <Row className="reg" gutter={12}>
                      <Col span={8}>
                        <ProFormText
                          fieldProps={{
                            style: {
                              height: 32,
                            },
                          }}
                          name="accountName"
                          label={<b>用户名</b>}
                          placeholder="请输入用户名"
                          rules={[
                            {
                              required: true,
                              message: "请输入用户名!",
                            },
                          ]}
                        />
                      </Col>

                      <Col span={8}>
                        <ProFormText
                          fieldProps={{
                            style: {
                              height: 32,
                            },
                          }}
                          name="userName"
                          label={<b>姓名</b>}
                          placeholder="请输入姓名"
                          rules={[
                            {
                              required: true,
                              message: "请输入姓名!",
                            },
                          ]}
                        />
                      </Col>

                      <Col span={8}>
                        <ProFormText
                          fieldProps={{
                            style: {
                              height: 32,
                            },
                          }}
                          name="telephone"
                          label={<b>联系电话</b>}
                          placeholder="请输入联系电话"
                          rules={[
                            {
                              required: false,
                              message: "请输入联系电话!",
                            },
                            {
                              pattern:
                                /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/,
                              message: "手机号格式错误！",
                            },
                          ]}
                        />
                      </Col>

                      <Col span={8}>
                        <ProFormTreeSelect
                          name="departmentId"
                          label={<b>组织</b>}
                          placeholder="请选择组织"
                          fieldProps={{
                            fieldNames: {
                              label: "title",
                              value: "key",
                              children: "children",
                            },
                          }}
                          request={async () => {
                            let res = await departmentTree({});
                            return res?.data?.dataList ?? [];
                          }}
                          rules={[
                            {
                              required: true,
                              message: "请选择组织!",
                            },
                          ]}
                        />
                      </Col>

                      <Col span={8}>
                        <ProFormSelect
                          fieldProps={{
                            mode: "multiple",
                            maxTagCount: 1,
                          }}
                          name="factoryIdList"
                          label={<b>工厂</b>}
                          placeholder="请选择工厂"
                          request={async () => {
                            let res = await factorySelectRegister({});
                            return res?.data?.dataList ?? [];
                          }}
                          rules={[
                            {
                              required: true,
                              message: "请选择工厂!",
                            },
                          ]}
                        />
                      </Col>
                      <Col span={8}>
                        <ProFormDependency name={["factoryIdList"]}>
                          {({ factoryIdList }) => {
                            return (
                              <ProFormSelect
                                fieldProps={{
                                  mode: "multiple",
                                  maxTagCount: 1,
                                }}
                                name="storeIdList"
                                label={<b>负责仓库</b>}
                                placeholder={"请选择负责仓库"}
                                params={{ factoryIdList }}
                                request={async (params) => {
                                  let res = await storeselectionBoxAll(params);
                                  return res?.data?.dataList ?? [];
                                }}
                                rules={[
                                  {
                                    required: false,
                                    message: "请选择负责仓库!",
                                  },
                                ]}
                              />
                            );
                          }}
                        </ProFormDependency>
                      </Col>

                      <Col span={8}>
                        <ProFormSelect
                          fieldProps={{
                            mode: "multiple",
                            maxTagCount: 1,
                          }}
                          name="roleIdList"
                          label={<b>角色配置</b>}
                          placeholder="请选择角色配置"
                          request={async () => {
                            let res = await roleSelectRegister({});
                            return res?.data?.dataList ?? [];
                          }}
                          rules={[
                            {
                              required: false,
                              message: "请选择角色配置!",
                            },
                          ]}
                        />
                      </Col>

                      <Col span={8}>
                        <ProFormSelect
                          name="parentId"
                          label={<b>直属领导</b>}
                          placeholder="请选择直属领导"
                          request={async () => {
                            let res = await allUserSelect({});
                            return res?.data?.dataList ?? [];
                          }}
                          rules={[
                            {
                              required: false,
                              message: "请选择直属领导!",
                            },
                          ]}
                        />
                      </Col>
                      <Col span={8}>
                        <ProFormText
                          fieldProps={{
                            style: {
                              height: 32,
                            },
                          }}
                          name="mailNo"
                          label={<b>邮箱</b>}
                          placeholder="请输入邮箱"
                          rules={[
                            {
                              required: false,
                              message: "请输入邮箱!",
                            },
                          ]}
                        />
                      </Col>

                      <Col span={24}>
                        <ProFormTextArea
                          name="remark"
                          label={<b>备注</b>}
                          placeholder="请输入备注"
                          request={async () => {
                            let res = await allUserSelect({});
                            return res?.data?.dataList ?? [];
                          }}
                          rules={[
                            {
                              required: false,
                              message: "请输入备注!",
                            },
                          ]}
                        />
                      </Col>
                    </Row>
                  )}
                </TabPane>
              </Tabs>

              <div
                style={{
                  marginBottom: 12,
                  height: 0,
                }}
              >
                {/* <Link to="/user/logon"
                style={{
                  float: 'right',
                  textShadow: "0 0 4px #999"
                }}
              >
                <FormattedMessage id="pages.login.registerAccount" defaultMessage="" />
              </Link> */}
              </div>
            </LoginForm>
          </div>
          <Footer></Footer>
        </div>
      </Col>
    </Row>
  );
};

export default Login;
