/* eslint-disable array-callback-return */
import { Button, Form, Input, message, Select, InputNumber } from "antd";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { saveMeasurement_new } from "../../../services/measure/analysis";
import { useAppSelector } from "../../../utils/hooks";
import {
  getOrgListService,
  dictionaryListService,
  queryStationData
} from "../../../services/ktj/org";
import { useAppDispatch } from "../../../utils/hooks";
import { setOrgData } from "../../../store/ktj/orgState";
import type {
  OrgItem,
  GwdDicItem,
  KTJ_BASE_TYPE,
  options,
  dataSourceOptions,
  unitTypesOptions,
  unitType,
  extraDescType
} from "../../../services/ktjTypes";
import { RAIN_TYPES, XB_CODES, DATA_SOURCE } from "../../../constant/index";
import "./MeasureAction.scss";
export default function MeasureConfig() {
  const { Option } = Select;
  const navigate = useNavigate();
  const systemState = useAppSelector((store) => store.systemState);
  const [messageApi, contextHolder] = message.useMessage();
  const dispatch = useAppDispatch();
  const measureState = useAppSelector((store) => store.measureState);
  const [extraDesc, setExtraDesc] = useState<extraDescType>()
  const onFinish = (values: any) => {
    let mtValue = values["meters"]
    //百米小于100时， 补齐3位。 比如 1 ："001", 10: "010"
    if (mtValue < 100) {
      mtValue = String(mtValue).padStart(3, '0');
    }
    const params = {
      operator: values["operator"],//操作员
      name: values["name"],//测量名称
      location: values["location"],//位置
      direction: values["direction"],//方向
      tljCode: values["tljCode"],//铁路局
      gwdCode: values["gwdCode"],//铁路段
      xmCode: values["xmCode"],//铁路线
      lineClassify: values["lineClassify"],//线路分类
      dataType: values["dataType"],//采集方式
      dataSource: values["dataSource"],//数据来源
      railSize: values["railSize"],//轨型
      xbCode: values["xbCode"],//行别
      unitType: values["unitType"],//股别
      mileage: `${values['kilometre']}+${mtValue}`,//里程
      stationCode: values['stationCode'],//车站
      batch: values['batch'],//批次
      radius: values["radius"],//半径
      turnoutNum: values["turnoutNum"],//道岔号
      sleeperNum: values["sleeperNum"],//枕木号
      extraDesc:JSON.stringify(extraDesc),
      alignPoints:[]
    };

    const orgItem = {
      tljCode: values["tljCode"],//铁路局
      gwdCode: values["gwdCode"],//铁路段
      xmCode: values["xmCode"],//铁路线
    }
    localStorage.setItem('orgInfo', JSON.stringify(orgItem));
    params.extraDesc = JSON.stringify(extraDesc)
    let measureData = measureState.measureData;
    if(measureData && measureData.length){
      params.alignPoints = measureData
    }
    localStorage.setItem('measureForm', JSON.stringify(params))
    saveMeasurement_new(params)
      .then((res) => {
        if (res.success) {
          messageApi.error(res.data.info);
        } else {
          message.success("保存成功");
          navigate("../action");
        }
      })
      .catch((e) => {
        navigate("../action");
      });
  };
  let user = localStorage.getItem("user") || "";
  let userInfo = (user && JSON.parse(user)) || {};
  const [form] = Form.useForm();
  useEffect(() => {
    queryKTJOrgList();
    queryDictionaryList();
    resetDataSource()
    resetRailTypes()
  }, []);

  useEffect(()=>{
  }, [measureState.measureData])

  //给股别分类
  const [unitTypeList, setUnitTypeList] = useState<unitTypesOptions[]>([])
  const resetRailTypes = () => {
    let zxOptions:unitTypesOptions = {
      label:'直线',
      options:[]
    }
    let qxOptions:unitTypesOptions = {
      label:'曲线',
      options:[]
    }
    let zxList:unitType[] = []
    let qxList:unitType[] = []
    RAIN_TYPES.map(item => {
      if(item.type === 1){
        zxList.push({
          label: item.name,
          value: item.code,
        })
      }else{
        qxList.push({
          label: item.name,
          value: item.code,
        })
      }
    })
    zxOptions.options = zxList
    qxOptions.options = qxList
    setUnitTypeList([zxOptions, qxOptions])
  }

  const [xbCodeOptions, setXbCodeOptions] = useState<dataSourceOptions[]>()
  const resetDataSource = () => {
    let options:dataSourceOptions[] = []
    DATA_SOURCE.map(item => {
      let optionMap:any = {
        label: item.name,
        value: item.code,
        options:[]
      }
      let childOptions:options[] = []
      item.child.map(ele => {
        childOptions.push({
          label: ele.name,
          value: ele.code
        })
        optionMap.options = childOptions
      })
      options.push(optionMap)
    })
    setXbCodeOptions(options)
  }

  //初始化科天健机构数据
  let [SJLY_List, setSJLYList] = useState<KTJ_BASE_TYPE[]>([]);
  let [WRPS_CJFS_List, setWRPSCJFSList] = useState<KTJ_BASE_TYPE[]>([]);
  let [WRPS_GGGX_List, setWRPSGGGXList] = useState<KTJ_BASE_TYPE[]>([]);
  let [XLFL_List, setXLFLList] = useState<KTJ_BASE_TYPE[]>([]);
  const queryDictionaryList = () => {
    dictionaryListService().then((res) => {
      if (res && res.data) {
        const { WRPS_CJFS, WRPS_GGGX, XLFL } = res.data;
				const SJLY:KTJ_BASE_TYPE[] = res.data.SJLY
				if(SJLY && SJLY.length){
					let sjlylist = SJLY.filter(item => item.key === 'XLDC' || item.key === 'DCDC')
					setSJLYList(sjlylist);
				}
        if(WRPS_CJFS && WRPS_CJFS.length){
          setWRPSCJFSList(WRPS_CJFS);
        }
        if(WRPS_GGGX && WRPS_GGGX.length){
          setWRPSGGGXList(WRPS_GGGX);
        }
        if(XLFL && XLFL.length){
          setXLFLList(XLFL);
        }
      }
    });
  };

  //获取机构数据
  const [KTJOrgList, setKTJOrgList] = useState<OrgItem[]>([]);
  const queryKTJOrgList = () => {
    getOrgListService()
      .then((res) => {
        let list: options[] = [];
        if (res && res.data) {
          let resData: OrgItem[] = res.data;
          setKTJOrgList(resData);
          dispatch(setOrgData(resData));
          resData.map((item) => {
            list.push({
              value: item.key,
              label: item.value,
            });
          });
        }
      })
      .catch((e) => {});
  };


  //选择机构时change
  const [gwdDicList, setGwdDicList] = useState<GwdDicItem[]>([]);
  const [gwdCodeValue, setGwdCodeValue] = useState<string>();
  const [xmCodeValue, setXmCodeValue] = useState<string>();
  const [gwdDicOptions, setGwdDicOptions] = useState<options[]>([]);
  const [railDicOptions, setRailDicOptions] = useState<options[]>([]);
  const [orgGwdDicList, setOrgGwdDicList] = useState<GwdDicItem[]>([])

  const onOrgChange = (value: string, option:any) => {
    let list = KTJOrgList.filter((item) => item.key === value);
    form.resetFields(["gwdCode", "xmCode"]);
    if (list && list.length) {
      let orgItem: OrgItem = list[0];
      setExtraDesc({...extraDesc,orgName:option.label})
      if (orgItem && orgItem.gwdDicList) {
        let listOptoins: options[] = [];
        setGwdDicList(orgItem.gwdDicList);
        setOrgGwdDicList(orgItem.gwdDicList)
        orgItem.gwdDicList.map((item) => {
          listOptoins.push({
            value: item.key,
            label: item.value,
          });
        });
        setGwdDicOptions(listOptoins);
        setGwdCodeValue(listOptoins[0].value);
      }
    }
  };

  const onGwdChange = (value: string, option:any) => {
    let cloneGwdDicList = [...orgGwdDicList];
    form.resetFields(["xmCode"]);
    let list = cloneGwdDicList.filter((item) => item.key === value);
    if (list && list.length) {
      let gwdDicItem: GwdDicItem = list[0];
      setExtraDesc({...extraDesc,gwdName:option.label})
      if (gwdDicItem && gwdDicItem.railDicList) {
        let railOptions: options[] = [];
        gwdDicItem.railDicList.map((item) => {
          railOptions.push({
            value: item.key,
            label: item.value,
          });
        });
        if(railOptions && railOptions.length){
          setRailDicOptions(railOptions);
          setXmCodeValue(railOptions[0].value);
        }
      }
    }
  };

  //车站数据
  const [stationList, setStationList] = useState<KTJ_BASE_TYPE[]>([])
  const queryStation = (value:string, option:any) => {
    form.resetFields(["stationCode"]);
    let tljCode =  form.getFieldValue("tljCode")
    let gwdCode =  form.getFieldValue("gwdCode")
    let xmCode =  form.getFieldValue("xmCode")
    const params = {
      tljCode,
      gwdCode,
      xmCode
    }
    setExtraDesc({...extraDesc,xmName:option.label})
    queryStationData(params).then(res => {
      if(res && res.data){
        setStationList(res.data)
      }else{
        setStationList([])
      }
      const measureForm = localStorage.getItem('measureForm')
      if (measureForm) {
        form.setFieldsValue({
          ...JSON.parse(measureForm)
        });
      }
    })
  }

  
  useEffect(()=>{
    if(systemState.orgInfo){
      const cloneOrgItem = systemState.orgInfo
      if(cloneOrgItem.value){
        const org = JSON.parse(cloneOrgItem.value)
        onOrgChange(org[0].value, org[0])
        onGwdChange(org[1].value, org[1])
        form.setFieldsValue({
          tljCode:org[0].value,
          gwdCode: org[1].value,
          xmCode: org[2].value
        });
        queryStation(org[2].value, org[2])
      }
    }
  },[KTJOrgList, xmCodeValue, gwdCodeValue, systemState.orgInfo])


  useEffect(()=>{
    if(systemState.accountInfo){
      const cloneAccountItem = systemState.accountInfo
      if(cloneAccountItem.value){
        form.setFieldsValue({
          operator:cloneAccountItem.value
        })
      }
    }
  },[systemState.accountInfo])
  

  const onRailTypeChange = (value:string, option:any) => {
    setExtraDesc({...extraDesc,railSizeName:option.label})
  }

  //数据来源change
  const [dataSource, setDataSource] = useState('')
  const onDataSourceChange = (value:string, option:any) => {
    setExtraDesc({...extraDesc,dataSourceName:option.label})
    form.resetFields(["xbCode"]);
    setDataSource(value)
  }

  //车站
  const onSatioinChange = (value:string, option:any) => {
    setExtraDesc({...extraDesc,stationName:option.label})
  }

  //股别change
  const [unitType, setUnitType] = useState<number>()
  const onUnitTypeChange = (value:string) => {
    RAIN_TYPES.map(item => {
      if(item.code === value){
        setUnitType(item.type)
      }
    })
  }

  useEffect(() => {
    const initData = {
      operator: "klj_test",
      direction: "左",
    }
    form.setFieldsValue(initData);
  }, [userInfo.nickname, form]);

  return (
    <>
      {contextHolder}
      <div>
        <Form
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          size="large"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <div className="layout">
            <Form.Item
              label="操作员"
              name="operator"
              rules={[{ required: true, message: "请输入操作员姓名" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="测量名称"
              name="name"
              rules={[{ required: true, message: "请输入测量名称" }]}
            >
              <Input placeholder="请输入测量名称" />
            </Form.Item>
						<Form.Item
							label="铁路局"
							name="tljCode"
							rules={[{ required: true, message: "请选择铁路局" }]}
						>
							<Select
								onChange={onOrgChange}
								placeholder="请选择铁路段"
							>
								{KTJOrgList.map((item) => (
									<Option key={item.key} value={item.key}>{item.value}</Option>
								))}
							</Select>
						</Form.Item>


						<Form.Item
							label="铁路段"
							name="gwdCode"
							rules={[{ required: true, message: "请选择铁路段" }]}
						>
							<Select
								onChange={onGwdChange}
								placeholder="请选择铁路段"
								value={gwdCodeValue}
								options={gwdDicOptions.map((item) => ({ label: item.label, value: item.value }))}
							>
							</Select>
						</Form.Item>

						<Form.Item
							label="铁路线"
							name="xmCode"
							rules={[{ required: true, message: "请选择铁路线" }]}
						>
							<Select
									placeholder="请选择铁路线"
									value={xmCodeValue}
                  onChange={queryStation}
									options={railDicOptions.map((item) => ({ label: item.label, value: item.value }))}
							>
							</Select>
						</Form.Item>
            <Form.Item
              label="轨型"
              name="railSize"
              rules={[{ required: true, message: "请选择轨型" }]}
            >
              <Select
                placeholder="请选择轨型"
                onChange={onRailTypeChange}
                options={WRPS_GGGX_List.map((item) => ({
                  label: item.value,
                  value: item.key,
                }))}
              ></Select>
            </Form.Item>

            <Form.Item
              label="数据来源"
              name="dataSource"
              rules={[{ required: true, message: "请选择数据来源" }]}
            >
              <Select
                placeholder="请选择数据来源"
                onChange={onDataSourceChange}
                options={SJLY_List.map((item) => ({
                  label: item.value,
                  value: item.key,
                }))}
              ></Select>
            </Form.Item>            

            <Form.Item
							label="车站"
							name="stationCode"
							rules={[{ required: true, message: "请选择车站" }]}
						>
							<Select
								placeholder="请选择车站"
                onChange={onSatioinChange}
							>
								{stationList.map((item) => (
									<Option key={item.key} value={item.key}>{item.value}</Option>
								))}
							</Select>
						</Form.Item>

            <Form.Item
              label="线路分类"
              name="lineClassify"
              rules={[{ required: true, message: "请选择线路分类" }]}
            >
              <Select
                placeholder="请选择线路分类"
                options={XLFL_List.map((item) => ({
                  label: item.value,
                  value: item.key,
                }))}
              ></Select>
            </Form.Item>

            <Form.Item
              label="采集方式"
              name="dataType"
              rules={[{ required: true, message: "请选择采集方式" }]}
            >
              <Select
                placeholder="请选择采集方式"
                options={WRPS_CJFS_List.map((item) => ({
                  label: item.value,
                  value: item.key,
                }))}
              ></Select>
            </Form.Item>

            <Form.Item
              label="批次"
              name="batch"
              rules={[{ required: true, message: "请输入批次" }]}
            >
              <Input placeholder="请输入批次" />
            </Form.Item>

            {/* <Form.Item
              label="位置"
              name="location"
              rules={[{ required: false, message: "请输入位置" }]}
            >
              <Input placeholder="请输入位置" />
            </Form.Item>

            <Form.Item
              label="方向"
              name="direction"
              rules={[{ required: false, message: "请输入方向" }]}
            >
              <Select
                className="w-[5rem]"
                options={[
                  { value: "左", label: "左侧" },
                  { value: "右", label: "右侧" },
                ]}
              />
            </Form.Item> */}
            {dataSource === 'DCDC' ? (
              <>
                <Form.Item
                  label="道岔号"
                  name="turnoutNum"
                  rules={[{ required: true, message: "请输入道岔号" }]}
                >
                  <InputNumber className="w-[18vw]" placeholder="请输入道岔号" />
                </Form.Item>

                <Form.Item
                  label="枕木号"
                  name="sleeperNum"
                  rules={[{ required: true, message: "请输入枕木号" }]}
                >
                  <InputNumber className="w-[18vw]"  placeholder="请输入枕木号" />
                </Form.Item>
              
                <Form.Item
                label="行别"
                name="xbCode"
                rules={[{ required: true, message: "请选择行别" }]}
                
              >
                <Select placeholder="请选择行别" options={xbCodeOptions}>
                </Select>
              </Form.Item>
              </>
            ) : (
              <Form.Item
              label="行别"
              name="xbCode"
              rules={[{ required: true, message: "请选择行别" }]}
            >
              <Select  placeholder="请选择行别">
                {XB_CODES.map((item) => (
                  <Option key={item.code} value={item.code}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            )}
            
            {dataSource === "XLDC" &&
              <div style={{display:"flex"}}>
                <Form.Item
                  label="里程"
                  style={{marginLeft:"5vw"}}
                  name="kilometre"
                  rules={[{ required: true, message: "请输入" }]}
                >
                  <InputNumber className="w-[7vw]" placeholder="公里" />
                </Form.Item>
                <Form.Item
                >
                  +
                </Form.Item>
                <Form.Item
                  name="meters"
                  style={{marginLeft:"10px"}}
                  rules={[{ required: true, message: "请输入" }]}
                >
                  <InputNumber className="w-[6vw]" placeholder="百米" />
                </Form.Item>
              </div>
            }

            <Form.Item
              label="股别"
              name="unitType"
              rules={[{ required: true, message: "请选择股别" }]}
            >
              <Select placeholder="请选择股别" onChange={onUnitTypeChange} options={unitTypeList}>
              </Select>
            </Form.Item>
            {unitType === 2 && 
              <Form.Item
                label="半径"
                name="radius"
                rules={[{ required: true, message: "请输入半径" }]}
              >
                <InputNumber className="w-[18vw]" placeholder="请输入半径" />
              </Form.Item>
            }
            
          </div>
          <div className="flex justify-center w-[60vw] mt-[15vh]">
            <Form.Item label={null} >
              <Button style={{ width: 150 }} onClick={() => navigate("../action", { replace: true })}>
                返回
              </Button>
            </Form.Item>
            <Form.Item label={null}>
              <Button
                type="primary"
                size="large"
                style={{ width: 150, marginLeft:"20px" }}
                htmlType="submit"
              >
                保存测量
              </Button>
            </Form.Item>
          </div>
        </Form>
      </div>
    </>
  );
}