import { NavLink } from 'react-router-dom';
import { useEffect } from 'react';
import { Row, Col, Space, Table, App } from 'antd';
import { useTranslation } from 'react-i18next';
import SearchForm from '@/components/SearchForm';
import useAuthStore from '@/stores/Auth';
import useFeedbackStore from '@/stores/Feedback';
import dayjs from 'dayjs';

const feedbackListColumns = [
  {
    title: 'Ref.No',
    dataIndex: 'EOI_Group_Name',
    render: (text, record) => (
      <NavLink to={record.EOI_CII_SN ? `/feedback/${record.EOI_GRI_SN}/${record.EOI_CII_SN}/${record.EOI_Group_Name}` : `/feedback/${record.EOI_GRI_SN}/${record.EOI_Group_Name}`}>
        {text}
      </NavLink>
    ),
  },
  {
    title: 'Arrival Date',
    dataIndex: 'EOI_Date',
    render: (text, record) => text,
    sorter: (a, b) => b.EOI_Date - a.EOI_Date,
  },
  {
    title: 'Cities',
    key: 'City',
    dataIndex: 'City',
  },
  {
    title: 'Guides',
    dataIndex: 'CityGuide',
  },
  {
    title: 'Post Survey',
    dataIndex: 'Average',
    render: (text, record) => `${record.EOI_CII_SN && record.feedback_Filled ? '✔' : ''} ${text ? text : ''}`, //为0显示为空
    sorter: (a, b) => b.Average - a.Average,
  },
  {
    title: 'External Reviews',
    dataIndex: 'TAGood',
  },
];

function Index() {
  const { t } = useTranslation();
  const { notification } = App.useApp();

  const travelAgencyId = useAuthStore((state) => state.loginUser.travelAgencyId)
  const [loading, feedbackList, fetchFeedbackList] = useFeedbackStore((state) => [state.loading, state.feedbackList, state.fetchFeedbackList]);

  const showTotal = (total) => `Total ${total} items`;

  useEffect(() => {
    // feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59").catch(ex => {
    // 	// notification.error({
    // 	//   message: `Error`,
    // 	//   description: ex.message,
    // 	//   placement: 'top',
    // 	//   duration: 4,
    // 	// });
    // 	console.log(ex.message);
    // });
  }, []);

  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      <SearchForm
        initialValue={{
          dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
        }}
        defaultValue={{
          shows: ['referenceNo', 'dates'],
          fieldProps: {
            dates: { label: t('group:ArrivalDate') },
          },
        }}
        onSubmit={(err, formVal, filedsVal) => {
          fetchFeedbackList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.endtime);
        }}
      />
      <Row>
        <Col md={24} lg={24} xxl={24}>
          <Table bordered={true} columns={feedbackListColumns} dataSource={feedbackList} pagination={{ defaultPageSize: 20, showTotal: showTotal }} loading={loading} />
        </Col>
        <Col md={24} lg={24} xxl={24}></Col>
      </Row>
    </Space>
  );
}

export default Index;