import {
  Button,
  Cascader,
  Checkbox,
  Form,
  Input,
  Modal,
  Pagination,
  Select,
  Space,
  message,
} from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useContext, useEffect, useState } from 'react';
import ContentBox from '~/components/contentBox';
import Layout from '~/components/layout';
import { UserContext } from '~/lib/userProvider';
import { phoneNumber } from '~/lib/validateUtils';
import api, { Flying, RegionResp, SkillsType } from './api';
import { Box } from './styled';
import { TypesResp } from '~/components/filter/api';
interface FilterInfoParams {
  provinceId?: number;
  categoryId?: any[];
}

export default function FlyingHandService() {
  const { Option } = Select;
  const router = useRouter();
  const { userInfo, setNeedLogin } = useContext(UserContext);
  const [list, setList] = useState([
    'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg',
    'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg',
  ]);
  const [productList, setProductList] = useState(Array<{ element: JSX.Element }>);
  const [rightDomList, setRightDomList] = useState(Array<{ element: JSX.Element }>);
  const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp>);
  const [skills, setSkills] = useState(Array<RegionResp>);
  const [skillsDefault, setSkillsDefault] = useState<Array<number>>();
  const [flightSkillsList, setFlightSkillsList] = useState<Array<SkillsType>>();
  const [flightDefault, setFlightDefault] = useState<number | null>();
  const [selectOption, setSelectOption] = useState<Array<TypesResp> | null>();
  const [selectDefault, setSelectDefault] = useState<number | null>();
  const leftDom = (item: Flying) => {
    return (
      <div
        className='item'
        key={item.id}
        onClick={() => {
          userInfo
            ? router.push({
                pathname: `/flyingHandService/detail/${item.id}`,
              })
            : setNeedLogin(true);
        }}
      >
        <div className='item-top'>
          <Image
            src={
              item.videoUrl
                ? `${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`
                : item.surfaceUrl
            }
            alt='#'
            fill
          />
        </div>
        <div className='item-bottom'>
          <div className='bottom-title'>{item.curriculumName}</div>
          <div className='bottom-details'>{item.curriculumDesc}</div>
          <div className='bottom-price'>
            <div className='bottom-price-left' title={item.supplierName}>
              {item.supplierName}
            </div>
            <div className='bottom-price-right'>
              {item.free ? (
                <div className='price-right-label'>{item.price}</div>
              ) : (
                <div>
                  <span className='price-right-label'>免费听课</span>
                  {/* <span className='price-right-money'>{`¥${item.price}`}</span> */}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  };

  const rightDom = (item: string) => {
    return (
      <div className='right-box-item right-item' key={item}>
        <Image src={item} alt='error' fill />
      </div>
    );
  };

  const [pageParams, setPageParams] = useState({
    pageNo: 1,
    pageSize: 12,
  }); //分页器对象

  const [filterParams, setFilterParams] = useState<FilterInfoParams>();

  const [count, setCount] = useState(0); //商品总数
  const [abort, setAbort] = useState<AbortController | null>(null); //请求中断

  const onPageChange = (page: number, pageSize: number) => {
    setPageParams({
      ...pageParams,
      pageNo: page,
    });
  };

  useEffect(() => {
    //中断前一次列表请求
    abort?.abort();
    setAbort(new AbortController());
  }, [filterParams, pageParams]);

  //端口列表请求
  useEffect(() => {
    console.log(router);

    let queryVal = JSON.parse(JSON.stringify(router.query));
    for (const key in queryVal) {
      queryVal[key] = Number(queryVal[key]);
    }
    api
      .listPageJobServicesInfo({
        ...pageParams,
        ...filterParams,
        ...queryVal,
      })
      .then((res) => {
        setProductList(
          res.result?.list?.map((item) => {
            return { element: leftDom(item) };
          }) || [],
        );
        setCount(res.result?.totalCount || 0);
        clearRouter();
      });
  }, [abort]);

  const clearRouter = () => {
    if (Object.keys(router.query).length) {
      router.query = {};
      router.replace(router.pathname);
    }
  };

  const onSelectChange = (value: number, item: TypesResp) => {
    clearRouter();
    console.log(value);

    if (value) {
      setSelectDefault(value);
    } else {
      setSelectDefault(undefined);
    }
    setFilterParams((props) => {
      if (props?.categoryId && value) {
        return {
          ...props,
          categoryId: [...props.categoryId, Number(value)],
        };
      }
      return {
        ...props,
        categoryId: value ? [Number(value)] : undefined,
      };
    });
  };

  const onProvinceChange = (value: number) => {
    clearRouter();
    if (value) {
      setFlightDefault(value);
    } else {
      setFlightDefault(undefined);
    }
    setFilterParams((props) => {
      return {
        ...props,
        licenseId: Number(value),
      };
    });
  };

  const onChange = (value: any) => {
    clearRouter();
    if (value) {
      setSkillsDefault([value]);
    } else {
      setSkillsDefault([]);
    }
    setFilterParams((props) => {
      return {
        ...props,
        flightSkillsId: (value && value[value.length - 1]) || undefined,
      };
    });
  };

  const onChangeRegion = (value: any) => {
    clearRouter();
    // setFilterParams((props) => {
    //   return {
    //     ...props,
    //     regionId: (value && value[value.length - 1]) || undefined,
    //   };
    // });
    setFilterParams((props) => {
      return {
        ...props,
        provinceId: value || undefined,
      };
    });
  };

  useEffect(() => {
    setRightDomList(
      list.map((item: string) => {
        return { element: rightDom(item) };
      }),
    );
    api.region().then((res) => {
      setSecondDistrictInfo(res.result || []);
    });
    // api.PilotLicense().then((res) => {
    //   setSkills(res.result || [])
    // })
    // api.IndustryFlightSkills().then((res) => {
    //   const list = res.result?.map((item) => {
    //     item.label = item.skillsName
    //     item.value = item.id
    //     return item
    //   })
    //   setFlightSkillsList(list || [])
    // })
    api.FlightSkills({ type: 3 }).then((res) => {
      console.log(res);

      setSelectOption(res.result);
    });
  }, []);

  useEffect(() => {
    if (Object.keys(router.query).length) {
      let queryVal = JSON.parse(JSON.stringify(router.query));
      for (const key in queryVal) {
        queryVal[key] = Number(queryVal[key]);
      }
      if (queryVal.flightSkillsId) {
        setSkillsDefault([queryVal.flightSkillsId]);
      } else {
        setFlightDefault(queryVal.licenseId);
      }
      setFilterParams((props) => {
        return {
          ...props,
          ...queryVal,
        };
      });
    }
  }, [router]);

  //报名
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const handleOk = async (values: any) => {
    form
      .validateFields()
      .then(async (values) => {
        setLoading(true);
        try {
          const res = await api.PilotRegistrations({
            ...values,
            city: values.city[values.city.length - 1] || undefined,
            province: values.city[0] || undefined,
            uavLicenseLevelOne: values.uavLicenseLevelOne && values.uavLicenseLevelOne[0],
            uavLicenseLevelTow: values.uavLicenseLevelOne && values.uavLicenseLevelOne[1],
            uavLicenseLevelThree: values.uavLicenseLevelOne && values.uavLicenseLevelOne[2],
          });
          if (res.code === '200') {
            setLoading(false);
            setIsModalOpen(false);
            form.resetFields();
            message.success('报名成功');
          } else {
            setLoading(false);
            message.error(res.message);
          }
        } catch (e: any) {
          message.error(e.message);
        }
      })
      .catch((err) => {
        message
          .warning({
            content: err.errorFields[0].errors[0],
          })
          .then();
      });
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [form] = Form.useForm();
  const onChangeCheck = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
  };

  return (
    <Layout>
      <Box>
        <div className='flyingTop'>
          <div className='flyingTop-left'>
            <Space>
              {/* <Cascader
                allowClear
                placeholder="地域"
                bordered={false}
                className="selectItem"
                size="large"
                fieldNames={{
                  label: "name",
                  value: "id",
                  children: "childInfo",
                }}
                options={secondDistrictInfo}
                onChange={onChangeRegion}
                changeOnSelect
              /> */}
              {/* <Select
                className="selectItem"
                bordered={false}
                popupMatchSelectWidth={false}
                placeholder="省份"
                size="large"
                onChange={onChangeRegion}
                options={secondDistrictInfo}
                fieldNames={{ value: 'id', label: 'name' }}
                allowClear
              /> */}
              {/* {selectOption?.map((item) => (
                <Select
                  key={item.directoryId}
                  className="selectItem"
                  bordered={false}
                  popupMatchSelectWidth={false}
                  placeholder={item.name}
                  size="large"
                  onChange={(value) => onSelectChange(value, item)}
                  options={item.categoriesInfoListDTO}
                  fieldNames={{ value: 'id', label: 'name' }}
                  allowClear
                />
              ))} */}
            </Space>
          </div>
          <Button
            type='primary'
            className='btn'
            onClick={() => (userInfo ? setIsModalOpen(true) : setNeedLogin(true))}
          >
            报名学习课程
          </Button>
        </div>
        <Modal
          wrapClassName='application'
          title={<div className='title'>报名学习课程</div>}
          open={isModalOpen}
          onCancel={handleCancel}
          getContainer={false}
          footer={[
            <Button
              style={{
                width: '100%',
                background: 'linear-gradient(135deg, #278EFF 0%, #0052DA 100%)',
                height: 40,
              }}
              key='submit'
              type='primary'
              loading={loading}
              onClick={handleOk}
            >
              立即报名
            </Button>,
          ]}
        >
          <Form
            form={form}
            layout='vertical'
            name='application'
            initialValues={{ modifier: 'public' }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Form.Item
                style={{ flex: 1, marginRight: 16 }}
                name='name'
                rules={[{ required: true, message: '请输入姓名!' }]}
              >
                <Input placeholder='姓名' />
              </Form.Item>
              <Form.Item
                style={{ flex: 1 }}
                name='telephone'
                rules={[{ required: true, message: '请输入手机号!' }]}
              >
                <Input onInput={phoneNumber} allowClear maxLength={11} placeholder='手机号' />
              </Form.Item>
            </div>
            <Form.Item name='city' rules={[{ required: true, message: '请选择城市!' }]}>
              <Cascader
                allowClear
                placeholder='城市'
                className='selectItem'
                fieldNames={{
                  label: 'name',
                  value: 'id',
                  children: 'childInfo',
                }}
                options={secondDistrictInfo}
                changeOnSelect
              />
            </Form.Item>

            <Form.Item name='drivingLicense'>
              <Select allowClear placeholder='是否有驾照'>
                <Option value='0'>是</Option>
                <Option value='1'>否</Option>
              </Select>
            </Form.Item>
            <Form.Item name='uavLicenseLevelOne'>
              <Cascader
                allowClear
                placeholder='是否有无人机执照'
                className='selectItem'
                fieldNames={{
                  label: 'licenseType',
                  value: 'id',
                  children: 'childLicenses',
                }}
                options={skills}
                changeOnSelect
              />
            </Form.Item>
            <Form.Item
              name='industryAppAuth'
              label='行业应用认证（多选）'
              className='collection-create-form_last-form-item'
            >
              <Checkbox.Group options={flightSkillsList} onChange={onChangeCheck} />
            </Form.Item>
            <Form.Item name='remark'>
              <Input placeholder='备注' />
            </Form.Item>
          </Form>
        </Modal>

        <ContentBox
          boxIndex={4}
          leftcontentstyle={{
            width: '925px',
            margin: { top: 0, right: '10px', bottom: '10px', left: 0 },
          }}
          leftRenderDom={{
            columns: productList,
            pagination: (
              <div className='pagination-page'>
                <Pagination
                  current={pageParams.pageNo}
                  pageSize={pageParams.pageSize}
                  showSizeChanger={false}
                  showQuickJumper
                  total={count}
                  onChange={onPageChange}
                  hideOnSinglePage={true}
                  style={{ marginTop: 20 }}
                />
              </div>
            ),
          }}
          rightRenderDom={{ columns: rightDomList }}
        />
      </Box>
    </Layout>
  );
}
