import React, { useState, useEffect } from "react";
import { Form, Modal, message, Input, Select, Radio, DatePicker, InputNumber, Checkbox } from "antd";
import { saveEvaIndicators } from "../api";
import usePagination from "@/hooks/usePagination";
import { systemListApi } from "@/pages/admin/Privilege/api";
import { transformDTO, transformFormData, DataType, TargetType, DatePick } from "../entity";
import moment from "moment";

const FormItem = Form.Item;
const { Option } = Select;

interface Props {
  item: { visible: boolean; currentItem?: EvaSetteing.EvaListItems };
  onClose?: (refresh?: boolean) => any;
  setItem?: Function;
  roleList: CommonApi.RoleCodeVO[];
}

export default function EditModal({ onClose, setItem, item, roleList }: Props) {
  const [form] = Form.useForm();
  const { visible, currentItem = {} } = item;
  const [saveLoading, setSaveLoading] = useState<boolean>(false);
  // 存储系统列表
  const { list } = usePagination(systemListApi, { current: 1, pageSize: 500 });
  useEffect(() => {
    if (visible && currentItem) {
      const result = transformFormData(currentItem, roleList, list);
      form.setFieldsValue({ ...result });
    }
  }, [visible]);
  function handleSave(values: any) {
    const pa = transformDTO(values);
    if (currentItem.id) {
      pa.id = currentItem.id;
    }
    console.log("提交指标pa", pa);
    setSaveLoading(true);
    saveEvaIndicators(pa)
      .then((res: any) => {
        setSaveLoading(false);
        message.success(res.result);
        onClose?.(true);
      })
      .catch((e: any) => {
        setSaveLoading(false);
        message.error(e.message);
      });
  }
  const options = [
    { label: "考评人", value: 1 },
    { label: "考评门店", value: 2 },
  ];

  return (
    <Modal
      width={960}
      title={`${currentItem.code ? "编辑" : "新增"}考评指标`}
      visible={visible}
      onOk={form.submit}
      onCancel={() => onClose?.(false)}
      maskClosable={false}
      getContainer={false}
      confirmLoading={saveLoading}
      afterClose={() => form.resetFields()}
    >
      <Form
        form={form}
        onFinish={handleSave}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 15 }}
        initialValues={{ ruleValues: [] }}
      >
        <FormItem name="name" label="指标名称" rules={[{ required: true, message: "请输入指标名称" }]}>
          <Input placeholder="请输入指标名称" />
        </FormItem>
        <Form.Item
          name="dataScopeTypes"
          label="指标考核范围"
          rules={[{ required: true, message: "请选择指标考核范围" }]}
        >
          <Checkbox.Group options={options} />
        </Form.Item>
        <Form.Item name="dataType" label="指标类型" rules={[{ required: true }]}>
          <Select placeholder="请选择指标类型">
            {DataType.map((item) => (
              <Option value={item.value} key={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="targetType" label="目标值类型" rules={[{ required: true }]}>
          <Select placeholder="请选择目标值类型">
            {TargetType.map((item) => (
              <Option value={item.value} key={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        {/* <Form.Item name="belongSystem" label="归属系统" rules={[{ required: true }]}>
          <Select placeholder="请选择归属系统" showSearch allowClear labelInValue optionFilterProp="children">
            {list.map((item) => (
              <Option value={item.id} key={item.id}>
                {item.sysName}
              </Option>
            ))}
          </Select>
        </Form.Item> */}
        {/* 使用角色 */}
        <Form.Item name="role" label="导入操作人员" rules={[{ required: true }]}>
          <Select placeholder="请选择导入操作角色类型" showSearch allowClear labelInValue optionFilterProp="children">
            {roleList.map((item) => (
              <Option value={item.roleCode} key={item.roleCode}>
                {item.roleName}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="ruleType" label="更新周期" rules={[{ required: true, message: "请选择更新周期" }]}>
          <Radio.Group>
            <Radio value={1}>按滚动天数</Radio>
            <Radio value={2}>按星期指定</Radio>
            <Radio value={3}>按月指定日期</Radio>
            <Radio value={4}>按滚动月</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.ruleType !== currentValues.ruleType}>
          {({ getFieldValue }) => {
            const _ruleType = getFieldValue("ruleType");
            if (_ruleType === 1) {
              return (
                <>
                  <Form.Item name="rollValue1" label="滚动天数" rules={[{ required: true, message: "请输入滚动天数" }]}>
                    <InputNumber placeholder="请输入滚动天数" addonAfter="天" style={{ width: 567 }} />
                  </Form.Item>
                  <Form.Item name="startTime1" label="开始日期" rules={[{ required: true, message: "请选择开始日期" }]}>
                    <DatePicker style={{ width: 567 }} />
                  </Form.Item>
                </>
              );
            } else if (_ruleType === 2) {
              return (
                <Form.Item name="ruleValues2" label="勾选星期" rules={[{ required: true, message: "请选择星期几" }]}>
                  <Checkbox.Group>
                    <Checkbox value={1}>星期一</Checkbox>
                    <Checkbox value={2}>星期二</Checkbox>
                    <Checkbox value={3}>星期三</Checkbox>
                    <Checkbox value={4}>星期四</Checkbox>
                    <Checkbox value={5}>星期五</Checkbox>
                    <Checkbox value={6}>星期六</Checkbox>
                    <Checkbox value={7}>星期天</Checkbox>
                  </Checkbox.Group>
                </Form.Item>
              );
            } else if (_ruleType === 3) {
              return (
                <Form.Item
                  name="ruleValues3"
                  label="按月指定日期"
                  rules={[{ required: true, message: "按月指定日期" }]}
                >
                  <Select placeholder="请选择日期" showSearch allowClear optionFilterProp="children" mode="multiple">
                    {DatePick.map((item) => (
                      <Option value={item.value} key={item.value}>
                        {item.label}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              );
            } else if (_ruleType === 4) {
              return (
                <>
                  <Form.Item
                    name="ruleValues4"
                    label="滚动月数"
                    rules={[
                      { required: true, message: "请输入滚动月数" },
                      { pattern: /^(?:1[0-2]|[1-9])$/, message: "请输入1至12的正整数" },
                    ]}
                  >
                    <InputNumber placeholder="请输入滚动月数" addonAfter="月" style={{ width: 567 }} />
                  </Form.Item>
                  <Form.Item name="startTime4" label="开始月数" rules={[{ required: true, message: "请选择开始月数" }]}>
                    <DatePicker picker="month" style={{ width: 567 }} />
                  </Form.Item>
                  <Form.Item
                    name="orderType"
                    label="滚动月开始日"
                    rules={[{ required: true, message: "请选择滚动正数或倒数" }]}
                  >
                    <Radio.Group>
                      <Radio value={1}>月第X天</Radio>
                      <Radio value={2}>月倒数第X天</Radio>
                    </Radio.Group>
                  </Form.Item>
                  <Form.Item
                    name="rollValue4"
                    label="X"
                    rules={[
                      { required: true, message: "请输入滚动天数" },
                      { pattern: /^(?:[1-9]|[1-2]\d|3[0-1])$/, message: "请输入1至31的正整数" },
                    ]}
                  >
                    <InputNumber placeholder="请输入滚动天数" addonAfter="天" style={{ width: 567 }} />
                  </Form.Item>
                </>
              );
            }
          }}
        </Form.Item>
      </Form>
    </Modal>
  );
}