import React from 'react';
import { Modal, Form, Radio, Space } from 'kts-components-antd-x4';
import { Button, message } from 'kts-xui'
import Invoice from '../../..';
import './index.less';
import LineAttributeType from '@/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType';

export default () => {

  const controller = Invoice.useInvoiceController();

  const [form] = Form.useForm();

  const [mainOption, setMainOption] = React.useState(null);
  const [subOption, setSubOption] = React.useState(null);
  // 监听煤炭种类变化
  const mtzlDm = Form.useWatch('mtzlDm', form);

  const visible = controller.useMemo((s) => s.goodsListState.meiTanGoodIndex && s.goodsListState.meiTanGoodIndex.length > 0, []);

  const onClose = React.useCallback(() => {
    controller.pipeline(async (s) => {
      s.goodsListState.meiTanGoodIndex = [];
      form.setFieldsValue({ mtzlDm: undefined });
      setMainOption(null);
      setSubOption(null);
    })();
  }, [controller]);

  // 提交表单
  const onSubmit = () => {
    form.submit();
  };

  // 表单
  const onFinish = (values: any) => {
    // console.log('煤炭种类:', values);

    controller.pipeline(async (s) => {
      const mtzl = subOption || mainOption || undefined; //values.mtzlDm;
      console.log('煤炭种类', mtzl)
      const goods = s.goodsListState.meiTanGoodIndex?.map(e => s.goodsListState.goodsMap.get(e)) || [];
      const editGood = s.goodsListState.editGood;
      const editGoodIndex = editGood?.$index;
      goods.forEach((g) => {
        if (!g) return;
        if (g.lineAttribute === LineAttributeType.被折扣行 || g.lineAttribute === LineAttributeType.正常) {
          g.mtzlDm = mtzl;
          if (editGood && editGoodIndex === g.$index) { // 编辑行
            editGood.mtzlDm = mtzl;
          }
        }
      });
      s.goodsListState.goodsList = s.goodsListState.goodsList.slice();
      onClose();
    })();

  };

  // 自定义校验规则
  const validateOption = (_: any, value: any, callback: any) => {
    console.log('自定义校验规则:', value);
    if (!value) {
      return Promise.reject(new Error('请选择选项'));
      // callback('请选择选项');
    }

    if (value === '0200' && !subOption) {
      return Promise.reject(new Error('请选择长协煤的子选项'));
    }

    return Promise.resolve();
  };

  const handleMainOptionChange = (e: any) => {
    const value = e.target.value;
    setMainOption(value);
    if (value === '0100' || value === '0300') {
      //form.setFieldsValue({ mtzlDm: value });
      setSubOption(null);
    } else if (value === '0200') {
      //form.setFieldsValue({ mtzlDm: undefined }); // 清空option，等待选择子选项
      // setSubOption(null);
    }
  };

  const handleSubOptionChange = (e: any) => {
    const value = e.target.value;
    setSubOption(value);
    form.validateFields();
  };

  return (
    <Modal
      title="温馨提示"
      destroyOnClose={true}
      width={700}
      onCancel={onClose}
      visible={visible}
      footer={
        <Space align='end' style={{ paddingRight: 20 }}>
          <Button
            onClick={onClose}
            className='kts-invoice-operate-meitan-button'
          >
            取消
          </Button>
          <Button type="primary" onClick={onSubmit} className='kts-invoice-operate-meitan-button'>

            确定
          </Button>
        </Space>
      }
    >
      <div className='kts-invoice-operate-meitan-modal'>
        <div className='kts-invoice-operate-meitan-title'>
          <div>尊敬的纳税人:</div>
          <div className='kts-invoice-operate-meitan-title2'>您选择了“煤炭”类商品编码，请根据真实业务情况选择
            “煤炭种类”：</div>
        </div>
        <div className='kts-invoice-operate-meitan-content'>
          <Form
            form={form}
            layout="vertical"
            initialValues={{ mtzlDm: null }}
            onFinish={onFinish}
          >
            <Form.Item
              name="mtzlDm"
              label=""
              rules={[
                // { required: true , message: '请选择煤炭种类' },
                { validator: validateOption }
              ]}
            >
              <Radio.Group value={mainOption} onChange={handleMainOptionChange}>
                <Space direction="vertical">
                  <Radio value="0100">政府保供煤</Radio>
                  <div>
                    <Radio value="0200">长协煤</Radio>
                    {mainOption === '0200' && (
                      <div className='content-item'>
                        <div style={{ marginBottom: 8, color: '#666', fontSize: 14 }}>
                          <span style={{ color: 'red' }}>*</span>请选择协议期限：
                        </div>
                        <Radio.Group value={subOption} onChange={handleSubOptionChange}>
                          <Space direction="vertical">
                            <Radio value="0201">协议期不足半年</Radio>
                            <Radio value="0202">协议期在半年至一年之间</Radio>
                            <Radio value="0203">协议期在一年至两年之间</Radio>
                            <Radio value="0204">协议期在两年以上</Radio>
                          </Space>
                        </Radio.Group>
                      </div>
                    )}
                  </div>
                  <Radio value="0300">市场煤</Radio>
                </Space>
              </Radio.Group>
            </Form.Item>
          </Form>
        </div>
      </div>
    </Modal>
  );
};