import React, { createElement, useState, useEffect, Component, Children } from 'react';
import { Divider, Select, Button, Form, Table, Box, CascaderSelect } from '@alifd/next';
import { project } from '@alilc/lowcode-engine';
import Item from './components/Item';
import './index.scss';
import { Base64 } from 'js-base64';
import {
  listOtherReport,
  getCurrentColumnMetadata,
  getDateSetTree,
  previewData,
  treeCateAndTable
} from '../../../src/api/form';
import HcDialog from '../../components/HcDialog';

const Option = Select.Option;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    fixedSpan: 4,
  },
  labelTextAlign:'left',
};

interface OptionSetterProps {
  onChange: (any) => void;
  value: any;
  type: 'radio' | 'checkbox';
}

const list = [
  { label: '自定义', value: '自定义', key: 0 },
  { label: '关联表单', value: '关联表单', key: 1 },
  { label: '数据模型', value: '数据模型', key: 2 },
  // { label: '关联人员', value: '关联人员', key: 3 },
  { label: '数据集', value: '数据集', key: 4 },
];

const defaultOptions = [
  { label: '选项一', value: '选项一', link: [] },
  { label: '选项二', value: '选项二', link: [] },
  { label: '选项三', value: '选项三', link: [] },
];

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

const OptionSetter: React.FC<OptionSetterProps> = (props) => {
  const { onChange, value } = props;
  const [type, setType] = useState(value?.type || '自定义');
  const [options, setOptions] = useState(value?.options || defaultOptions);
  const [reportId, setReportId] = useState(value?.reportId || null);
  const [columnName, setColumnName] = useState(value?.columnName || null);

  // 其他表单
  const [listR, setListR] = useState([]); // report列表
  const [listU, setListU] = useState([]); // unit列表
  // 请求listu
  const queryListU = (e) => {
    setReportId(e);
    setColumnName(null);
    if (e) {
      queryColumnList(e);
    }
  };

  // 配置项获取类型
  const handleChange = (type) => {
    setType(type);
  };
  // 某一项修改
  const optionsEdit = (obj, index) => {
    setOptions(
      options.map((e, i) => {
        if (i === index) return obj;
        return e;
      }),
    );
  };

  // 数据模型部分
  const [listM, setListM] = useState([]); // 数据模型列表
  const [labellist, setLabelList] = useState([]); // 数据模型label
  const [modelId, setModelId] = useState(value?.modelId); //数据模型id
  const [labelId, setLabelId] = useState(value?.labelId); //数据模型labelId
  // const [valueId, setValueId] = useState(value?.valueId); //数据模型valueId
  // 选中了数据模型
  const onModelChange = (id) => {
    setModelId(id);
    previewData(id).then((res) => {
      setLabelList(res?.data?.data?.fields || []);
    });
  };
  // 修改label
  const onLabelChange = (id) => {
    setLabelId(id);
  };
  // 修改value
  // const onValueChange = (id) => {
  //   setValueId(id);
  // };

  // 数据集
  const [datesetId,setDatesetId] = useState(null);
  const [datesetTree, setDatesetTree] = useState([]);

  useEffect(() => {
    if (type === '数据模型' && !listM.length) {
      getDateSetTree({ appId: '0', busiFlag: 'dataset' }).then((res) => {
        const temp = res.data;
        function parse(list) {
          list.forEach((item) => {
            item.label = item.name;
            item.value = item.id;
            item.isLeaf = item.leaf;
            if (item?.children?.length) {
              parse(item.children);
            }
          });
        }
        parse(temp);
        setListM(temp);
      });
      if (value?.modelId) {
        previewData(value?.modelId).then((res) => {
          setLabelList(res?.data?.data?.fields || []);
        });
      }
    }
    // 只请求一次
    if (type === '关联表单' && !listR.length) {
      const id = Number(Base64.decode(urlParams.get('form')).replace('abc567', ''));
      const params = {
        reportId: id,
        type: 5,
      };
      listOtherReport(params).then((res) => {
        if (res.code === 200) {
          setListR(res.data);
        }
      });
      if (reportId) {
        queryColumnList(reportId);
      }
    }
    if (type === '数据集' && !datesetTree.length) {
      const params = {
        busiFlag: 'dataset',
        appId: Number(urlParams.get('applicationId')),
      };
      treeCateAndTable(params).then(res=>{
        const temp  = res.data;
        function formatDate(list){
          list.forEach(item=>{
            item.label = item.name
            item.value = item.id
            if(item.children){
              formatDate(item.children)
            }
          })
        }
        formatDate(temp)
        setDatesetTree(temp)
      })
      
    }
  }, [type]);

  // 请求列数据
  const queryColumnList = (id) => {
    getCurrentColumnMetadata(id).then((res) => {
      if (res.code === 200) {
        setListU(res.data.filter((e) => !e.defaultFlag));
      }
    });
  };

  // 数据同步
  useEffect(() => {
    onChange({
      type,
      options,
      reportId,
      columnName,
      modelId,
      labelId,
      // valueId,
      datesetId
    });
  }, [
    type,
    options,
    reportId,
    columnName,
    modelId,
    labelId,
    //  valueId,
    datesetId,
  ]);

  // 添加自定义options
  const pushOptions = () => {
    setOptions([
      ...options,
      {
        label: '新选项',
        value: '新选项',
        link: [],
      },
    ]);
  };
  // 删除options
  const delOptions = (index) => {
    setOptions(options.filter((_, i) => i !== index));
  };
  // 关联应用
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [links, setLinks] = useState([]); //可关联列表
  const linkOptions = () => {
    const complist =
      project
        .exportSchema()
        .componentsTree[0]?.children[0]?.children.filter((e) => e.id !== props?.selected?._id)
        .map((e) => ({
          label: e.props.title,
          value: e.id,
        })) || [];
    setLinks(complist);
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  // table表格关联列渲染
  const render = (value, index, record) => {
    const linkChange = (val) => {
      const temp = JSON.parse(JSON.stringify(options));
      temp[index].link = val;
      setOptions(temp);
    };

    return (
      <Select
        key={record.label}
        mode="multiple"
        size="small"
        placeholder="请选择需要关联的组件"
        defaultValue={record?.link || []}
        onChange={linkChange}
        style={{ width: '100%' }}
        dataSource={links}
      />
    );
  };
  return (
    <div className="options_config">
      <Select defaultValue={type} onChange={handleChange}>
        {list.map((e) => (
          <Option value={e.value} key={e.key}>
            {e.label}
          </Option>
        ))}
      </Select>
      <Divider />
      {type === '自定义' ? (
        <div>
          {options.map((e, i) => (
            <Item info={e} add={(e) => optionsEdit(e, i)} del={(_) => delOptions(i)} />
          ))}
          <Divider />
          <Box spacing={20} direction="row">
            <Button onClick={pushOptions} type="normal">
              添加新选项
            </Button>
            <Button onClick={linkOptions} type="normal">
              关联选项设置
            </Button>
          </Box>
        </div>
      ) : null}
      {type === '数据模型' ? (
        <div>
          <Form style={{ width: '90%' }} {...formItemLayout} colon>
            <FormItem name="mid" label="数据模型">
              <CascaderSelect
                style={{ marginRight: 8, width: '100%' }}
                value={modelId}
                placeholder="数据模型"
                canOnlyCheckLeaf
                expandTriggerType="click"
                dataSource={listM}
                onChange={onModelChange}
                displayRender={(labels) => labels[labels.length - 1]}
              />
            </FormItem>
            <FormItem name="label" label="选项标签">
              <Select
                style={{ marginRight: 8, width: '100%' }}
                value={labelId}
                onChange={onLabelChange}
              >
                {labellist.map((e) => (
                  <Option value={e.fieldShortName}>{e.name}</Option>
                ))}
              </Select>
            </FormItem>
            {/* <FormItem name="value" label="选项数值">
              <Select
                style={{ marginRight: 8, width: '100%' }}
                value={valueId}
                onChange={onValueChange}
              >
                {labellist.map((e) => (
                  <Option value={e.fieldShortName}>{e.name}</Option>
                ))}
              </Select>
            </FormItem> */}
          </Form>
        </div>
      ) : null}
      {type === '关联表单' ? (
        <div>
          <Form style={{ width: '90%' }} {...formItemLayout} colon>
            <FormItem name="baseUser" label="报表">
              <Select
                value={reportId}
                onChange={queryListU}
                hasClear
                style={{ marginRight: 8, width: '100%' }}
              >
                {listR.map((e) => (
                  <Option value={e.reportId}>{e.reportName}</Option>
                ))}
              </Select>
            </FormItem>
            <FormItem name="baseUser" label="关联项">
              <Select
                value={columnName}
                onChange={setColumnName}
                hasClear
                style={{ marginRight: 8, width: '100%' }}
              >
                {listU.map((e) => (
                  <Option value={e.columnName}>{e.columnDescription}</Option>
                ))}
              </Select>
            </FormItem>
          </Form>
        </div>
      ) : null}
      {type === '数据集' ? (
        <Form style={{ width: '90%' }} {...formItemLayout} colon>
          <FormItem name="mid" label="数据集">
            <CascaderSelect
              style={{ marginRight: 8, width: '100%' }}
              value={datesetId}
              placeholder="请选择数据集"
              canOnlyCheckLeaf
              dataSource={datesetTree}
              onChange={setDatesetId}
              displayRender={(labels) => labels[labels.length - 1]}
            />
          </FormItem>
        </Form>
      ) : null}
      <HcDialog
        title="关联选项设置"
        visible={isModalOpen}
        onOk={handleOk}
        onCancel={(_) => setIsModalOpen(false)}
        onClose={(_) => setIsModalOpen(false)}
      >
        <Table dataSource={options}>
          <Table.Column width="300px" title="当前选项" dataIndex="label" />
          <Table.Column width="400px" title="显示以下组件" dataIndex="link" cell={render} />
        </Table>
      </HcDialog>
    </div>
  );
};

export default class extends Component<OptionSetterProps> {
  render() {
    return <OptionSetter {...this.props} />;
  }
}