import React, { useState } from 'react'
import { Form, Input, Button, DatePicker, Select, Table } from 'antd'
import dayjs from 'dayjs'
import useCustomerRelationStore from '@/stores/CustomerRelationStore'

const { RangePicker } = DatePicker
const { Option } = Select

const Index = () => {
  const { loading, tasksList, fetchSearchTasks } = useCustomerRelationStore()

  // 定义默认值
  const initialFormValues = {
    crt_mei_firstname: '', // 客人名字默认空
    dateRange: [dayjs().startOf('M'), dayjs().endOf('M')], // 默认本月
    crt_status: '' // 状态默认所有
  };

  // 搜索表单提交
  const onFinish = (values) => {
    const formattedValues = {
      ...values,
      start_date: values.dateRange ? values.dateRange[0].format('YYYY-MM-DD') : '',
      end_date: values.dateRange ? values.dateRange[1].endOf('day').format('YYYY-MM-DD HH:mm:ss') : '',
    }
    fetchSearchTasks(formattedValues)
  }

  const DATE_RANGE_PRESETS = [
    {
      label: '本周',
      value: [dayjs().startOf('w'), dayjs().endOf('w')],
    },
    {
      label: '上周',
      value: [dayjs().startOf('w').subtract(7, 'days'), dayjs().endOf('w').subtract(7, 'days')],
    },
    {
      label: '本月',
      value: [dayjs().startOf('M'), dayjs().endOf('M')],
    },
    {
      label: '上月',
      value: [dayjs().subtract(1, 'M').startOf('M'), dayjs().subtract(1, 'M').endOf('M')],
    },
    {
      label: '前三月',
      value: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
    },
    {
      label: '本年',
      value: [dayjs().startOf('y'), dayjs().endOf('y')],
    },
  ]
  // 表格列定义
  const columns = [
    { title: '序列号', dataIndex: 'crt_sn', key: 'crt_sn' },
    { title: '模板', dataIndex: 'crt_template', key: 'crt_template' },
    { title: '状态', dataIndex: 'crt_status', key: 'crt_status' },
    { title: '团号', dataIndex: 'crt_coli_id', key: 'crt_coli_id' },
    { title: '发送时间', dataIndex: 'crt_send_datetime', key: 'crt_send_datetime' },
    { title: '客人名', dataIndex: 'crt_mei_firstname', key: 'crt_mei_firstname' },
    { title: '客人姓', dataIndex: 'crt_mei_lastname', key: 'crt_mei_lastname' },
    { title: 'WhatsApp', dataIndex: 'crt_whatsapp', key: 'crt_whatsapp' },
    { title: '邮箱', dataIndex: 'crt_mei_maillist', key: 'crt_mei_maillist' },
    { title: '关联序列号', dataIndex: 'crt_coli_sn', key: 'crt_coli_sn' },
    { title: '国家', dataIndex: 'crt_coi2_country', key: 'crt_coi2_country' },
    { title: '创建时间', dataIndex: 'ct_datetime', key: 'ct_datetime' },
    { title: '国家代码', dataIndex: 'ct_coi_code', key: 'ct_coi_code' },
    { title: '客人国家', dataIndex: 'crt_mei_country', key: 'crt_mei_country' },
    { title: '会话ID', dataIndex: 'crt_conversation_id', key: 'crt_conversation_id' },
    { title: '消息ID', dataIndex: 'crt_message_id', key: 'crt_message_id' },
  ];

  return (
    <>
      {/* 搜索栏 */}
      <Form layout='inline' onFinish={onFinish} style={{ marginBottom: 24 }} initialValues={initialFormValues}>
        <Form.Item label='团号' name='crt_coli_id'>
          <Input placeholder='输入团号' />
        </Form.Item>
        <Form.Item label='任务时间' name='dateRange'>
          <RangePicker allowClear={true} inputReadOnly={true} presets={DATE_RANGE_PRESETS} />
        </Form.Item>
        <Form.Item label='状态' name='crt_status'>
          <Select placeholder='请选择状态' style={{ width: 120 }}>
            <Option value=''>所有</Option>
            <Option value='0'>待发送</Option>
            <Option value='99'>已完成</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type='primary' htmlType='submit'>
            搜索
          </Button>
        </Form.Item>
      </Form>

      {/* 搜索结果 */}

      <span>搜索结果总数: {tasksList&&tasksList.length}</span>

      <Table dataSource={tasksList} columns={columns} pagination={false} rowKey='crt_sn' loading={loading} />
    </>
  )
}

export default Index