import { useContext } from 'react';
import { Row, Col, Typography, Space, Table, Divider, Button } from 'antd';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import SearchForm from '../components/search/SearchForm';
import useHostCaseStore from '../zustand/HostCase';
import { useShallow } from 'zustand/shallow';
import { exportDoc } from '../components/TemplateLetter2025/Index';
import ExportDocxBtn from '../components/TemplateLetter2025/ExportDocxBtn';

const HostCaseReport = ({ ...props }) => {
  const { date_picker_store } = useContext(stores_Context);
  // const host_case_data = customer_store.host_case_data;

  const [loading, reset, searchValues, setSearchValues, forExport] = useHostCaseStore(
    useShallow((state) => [state.loading, state.reset, state.searchValues, state.setSearchValues, state.forExport])
  );
  const [caseSummary, caseSummaryByGuide, caseFeatured, getCaseReport] = useHostCaseStore(
    useShallow((state) => [state.caseSummary, state.caseSummaryByGuide, state.caseFeatured, state.getCaseReport])
  );

  const getData = async (formVal) => {
    reset();
    await getCaseReport(formVal);
  };

  const summaryCols = [
    { title: '接团数', dataIndex: 'group_count', width: '6rem' },
    { title: 'feedback团数', dataIndex: 'feedbak_group', width: '6rem' },
    { title: '东道主团数', dataIndex: 'group_count_dongdaozhu', width1: '8rem' },
    { title: '东道主个数', dataIndex: 'case_count_dongdaozhu', width1: '8rem' },
    { title: '东道主实施比例', dataIndex: 'dongdaozhu_rate' },
    {
      title: '各类型个数',
      children: [
        { title: 'Live There', dataIndex: 'live_there_count' },
        { title: '动机圆梦', dataIndex: 'dream_fulfillment_count' },
        { title: '仪式感创造', dataIndex: 'ceremony_creation_count' },
        { title: '遗憾弥补', dataIndex: 'regret_compensation_count' },
        { title: '力挽狂澜', dataIndex: 'rescue_mission_count' },
      ],
    },
  ];
  const guideSummaryCols = [{ title: '姓名', dataIndex: 'TGI_Name', width: '6rem' }, ...summaryCols];
  const featuredCaseCols = [
    { title: '团号', dataIndex: 'GRI_No', width: '16rem' },
    { title: '导游', dataIndex: 'chinese_name', width: '8rem' },
    { title: '案例类型', dataIndex: 'case_name', width: '8rem' },
    { title: '案例', dataIndex: 'case_text' },
  ];

  return (
    <>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Row gutter={16} className={toJS(date_picker_store.siderBroken) ? '' : 'sticky-top'}>
          <Col className="gutter-row" span={24}>
            <SearchForm
              defaultValue={{
                initialValue: {
                  ...toJS(date_picker_store.formValues),
                  ...searchValues,
                },
                shows: ['dates', 'agency'],
                fieldProps: {
                  DepartmentList: { show_all: false, mode: 'multiple' },
                  dates: { hide_vs: true },
                  agency: { rules: [{ required: true, message: '请选择地接社' }] },
                },
              }}
              onSubmit={(_err, obj, form) => {
                setSearchValues(obj, form);
                getData(obj);
              }}
            />
          </Col>
        </Row>
        <div className="max-w-screen-xl " style={{}}>
          <Divider orientation="right">
            <ExportDocxBtn
              subject={forExport.title}
              title={forExport.agencyName}
              sectionsData={[
                { tableTitle: '2025年东道主总体情况', tableColumns: summaryCols, tableData: caseSummary },
                { tableTitle: '2025年导游实施东道主情况', tableColumns: guideSummaryCols, tableData: caseSummaryByGuide },
                { tableTitle: '2025年精品案例', tableColumns: featuredCaseCols, tableData: caseFeatured },
              ]}
            />
          </Divider>
          <Typography.Title level={3}>2025年东道主总体情况</Typography.Title>
          <Table dataSource={caseSummary} columns={summaryCols} loading={loading} pagination={false} bordered />
          <Typography.Title level={3}>2025年导游实施东道主情况</Typography.Title>
          <Table dataSource={caseSummaryByGuide} columns={guideSummaryCols} loading={loading} pagination={false} bordered rowKey={'TGI_SN'} />
          <Typography.Title level={3}>2025年精品案例</Typography.Title>
          <Table dataSource={caseFeatured} columns={featuredCaseCols} loading={loading} pagination={false} bordered rowKey={'case_id'} />
        </div>
      </Space>
    </>
  );
};

export default observer(HostCaseReport);