import { PlusOutlined,SearchOutlined } from '@ant-design/icons';
import {Button, Card, Col, DatePicker, Input, Row, Select, Space, Tree} from 'antd';
import React, { useState } from 'react';
import CancelCrud from '../../../../components/crud/CancelCrud';
import useCrud from '../../../../components/crud/useCrud';
import usePageTable from '../../../../components/crud/usePageTable';
import { DesignAssets, PageResult, SearchOption,QualityManageTab1 } from '../../../../service/def';
import { demoDate } from '../../../../utils/utils';
import DataForm from './DataForm';
import DataTable from './DataTable';

const { Option } = Select;

async function demofind(params?: SearchOption): Promise<PageResult<QualityManageTab1>> {
  if (!params || !params.search?.packname) {
    return { list: [], totalRow: 0 };
  }
  console.log(params.search);

  return {
    list: [
      {
        dwgcName: '单位工程一',
        fbgcName: '分部工程1',
        dygcName: '单元工程1',
        gxName: '/',
        sgdw: '建筑公司',
        sgrq: '1月1号-1月20号',
        sgzpdj: '合格',
        jlfhdj: '不合格',
        txsj: '2月1号',
      },
      {
        dwgcName: '单位工程一',
        fbgcName: '分部工程1',
        dygcName: '单元工程1',
        gxName: '/',
        sgdw: '建筑公司',
        sgrq: '1月1号-1月20号',
        sgzpdj: '合格',
        jlfhdj: '不合格',
        txsj: '2月1号',
      },
    ],
    totalRow: 1
  };
}

const treeData = [
  {
    title: '新疆XX水库土建工程项目',
    key: '新疆XX水库土建工程项目',
    selectable: false,
    children: [
      {
        title: '单位工程一', key: '新疆XX水库土建工程项目-单位工程一',
        children: [
          { title: '分部工程1', key: '新疆XX水库土建工程项目-单位工程一-分布工程1', children:[
              { title: '单元工程1', key: '新疆XX水库土建工程项目-单位工程一-分布工程1-单元工程1'},
              { title: '单元工程2', key: '新疆XX水库土建工程项目-单位工程一-分布工程1-单元工程2'},
            ]
          },
        ],
      },
    ],
  },
  {
    title: '项目2',
    key: '项目2',
    selectable: false,
    children: [
    ],
  },
];


const DesignAssetsPage: React.FC = () => {

  const [packname, setPackname] = useState<string | undefined>();

  const crud = useCrud();

  const pager = usePageTable<QualityManageTab1>(demofind);

  const record = crud.record;

  return (
    <div>
      <Card>
        <Space size="large" wrap>
          <Space>
            施工单位:
            <Select defaultValue="水电建XX局" style={{ width: 288 }}>
              <Option value="水电建XX局">水电建XX局</Option>
              <Option value="施工单位">施工单位</Option>
              <Option value="施工单位1">施工单位1</Option>
            </Select>
          </Space>
          <Space>施工时间:<DatePicker.RangePicker /></Space>
          <Space>
            <Button icon={<SearchOutlined />} type="primary">查询</Button>
            <Button icon={<PlusOutlined />} onClick={() => crud.goto('new', {})}>新增</Button>
          </Space>
        </Space>
      </Card>
      <div className="card-h-margin" />

      <Row gutter={16}>
        <Col span={6}>
          <Card style={{ minHeight: 800 }}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Input.Search />
              <Tree.DirectoryTree
                defaultExpandAll
                treeData={treeData}
                multiple={false}
                onSelect={(selkeys) => {
                  const packname = selkeys?.[0] as string;
                  setPackname(packname);

                  pager.search({ search: { packname } })
                }}
              />
            </Space>
          </Card>
        </Col>
        <Col span={18}>
          <Card title={packname ? `单元评定记录列表(${packname})` : '(点击左侧树状列表查看单元评定记录)'}>
            <DataTable crudCtx={crud} pagerCtx={pager}/>
          </Card>
        </Col>
      </Row>

    </div>
  )
}

export default DesignAssetsPage