import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType, sendOrderWareType } from '~/api/interface/orderManageType';
import React, { useEffect } from 'react';
import { Col, Form, Input, message, Modal, Radio, Row, Select } from 'antd';
import { Uploader } from '~/components/uploader';
import { PlusOutlined } from '@ant-design/icons';
import { OrderManageAPI } from '~/api';

// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
// 请求数据的类型
type ReqType = InterReqType<sendOrderWareType>;

// 传参类型
interface propType {
  title: string;
  open: boolean;
  closed: any;
  data?: TableType[0];
}

const OrderDeliver: React.FC<propType> = (props) => {
  OrderDeliver.defaultProps = {
    data: undefined,
  };
  // 参数
  const { title, open, closed, data } = props;
  // 物流列表
  const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
  // 表单钩子
  const [form] = Form.useForm<ReqType>();
  // 关闭弹窗
  const handleCancel = () => {
    form.resetFields();
    closed();
  };
  // 确认事件
  const handleOk = () => {
    form
      .validateFields()
      .then(async (values) => {
        // console.log('确认事件 --->', values);
        await handleSubmit(values);
      })
      .catch((err) => {
        message
          .warning({
            content: err.errorFields[0].errors[0],
          })
          .then();
      });
  };
  // 提交事件
  const handleSubmit = async (values: ReqType) => {
    const res = await OrderManageAPI.sendOrderWare({
      ...values,
      orderInfoId: Number(data?.id),
    });
    if (res && res.code === '200') {
      message.success('操作成功');
      handleCancel();
    }
  };
  // 获取物流信息
  const getListExpressInfo = async () => {
    const res = await OrderManageAPI.listExpressInfo({});
    if (res && res.code === '200') {
      setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
      // console.log(res);
    }
  };
  // componentDidMount
  useEffect(() => {
    if (!open) return;
    if (!data) return;
    getListExpressInfo().then();
    // console.log('data --->', data);
  }, [open]);
  return (
    <Modal
      open={open}
      title={title}
      onCancel={handleCancel}
      onOk={handleOk}
      destroyOnClose
      width={600}
    >
      <Form
        name='addForm'
        form={form}
        labelAlign='right'
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
      >
        <Form.Item label='收货地址' labelCol={{ span: 4 }}>
          {data?.receipt?.takeName} {data?.receipt?.takePhone} {data?.receipt?.detailAddress}
        </Form.Item>
        <Form.Item label='发货方式' labelCol={{ span: 4 }}>
          物流发货
        </Form.Item>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          <Col span={11}>
            <Form.Item
              label='物流单号'
              name='sendExNo'
              rules={[{ required: true, message: '请输入物流单号' }]}
            >
              <Input placeholder={'请输入物流单号'} maxLength={20} allowClear />
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item
              label='物流公司'
              name='sendExCode'
              rules={[{ required: true, message: '请选择物流公司' }]}
            >
              <Select placeholder={'请选择物流公司'} options={expressList} allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          <Col span={11}>
            <Form.Item
              label='归还联系人'
              name='renName'
              rules={[{ required: true, message: '请输入归还联系人' }]}
            >
              <Input placeholder={'请输入归还联系人'} maxLength={20} allowClear />
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item
              label='归还电话'
              name='renPhone'
              rules={[
                { required: true, message: '请输入归还联系人电话' },
                // 校验手机号
                () => ({
                  validator(_, value) {
                    if (!value || /^1[3-9]\d{9}$/.test(value)) {
                      return Promise.resolve();
                    }
                    return Promise.reject('请输入正确的手机号');
                  },
                }),
              ]}
            >
              <Input
                placeholder={'请输入归还联系人电话'}
                maxLength={20}
                allowClear
                type={'number'}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          <Col span={11}>
            <Form.Item
              label='归还地址'
              name='renAddress'
              rules={[{ required: true, message: '请输入归还地址' }]}
            >
              <Input placeholder={'请输入归还地址'} maxLength={20} allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          <Col span={11}>
            <Form.Item
              label='质检照片'
              name='imgs'
              rules={[{ required: true, message: '请上传质检照片' }]}
            >
              <Uploader
                listType={'picture-card'}
                fileUpload
                fileLength={3}
                onChange={(e) => {
                  form.setFieldValue(
                    'imgs',
                    e.map((item) => item.url),
                  );
                }}
              >
                <PlusOutlined />
              </Uploader>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item
              label='质检视频'
              name='videoUrl'
              rules={[{ required: true, message: '请上传质检视频' }]}
            >
              <Uploader
                listType={'picture-card'}
                fileUpload
                fileLength={1}
                fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
                fileSize={10}
                onChange={(e) => {
                  form.setFieldValue('videoUrl', e[0].url);
                }}
              >
                <PlusOutlined />
              </Uploader>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          <Col span={11}>
            <Form.Item
              label='设备状态'
              name='vcuSatus'
              rules={[{ required: true, message: '请选择设备状态' }]}
              initialValue={0}
            >
              <Radio.Group
                options={[
                  { label: '正常', value: 0 },
                  { label: '故障', value: 1 },
                ]}
                onChange={(e) => {
                  form.setFieldValue('vcuSatus', e.target.value);
                }}
              />
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item
              label='操作密码'
              name='authPwd'
              rules={[{ required: true, message: '请输入操作密码' }]}
            >
              <Input.Password
                placeholder={'请输入操作密码'}
                maxLength={20}
                allowClear
                autoComplete='new-password'
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default OrderDeliver;
