import { DropboxOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer, Popconfirm } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import moment from 'moment';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import api from './services';

//页面 相当于 class
const activityRecordManage = () => {
  /** 新建/更新窗口的弹窗 */
  const [createModalVisible, handleModalVisible] = useState(false);
  /** 分布更新窗口的弹窗 */

  const [showDetail, setShowDetail] = useState(false);
  //绑定
  const actionRef = useRef();
  //活动信息
  const [activityInfo, setActivityInfo] = useState();

  //初始化数据
  useEffect(() => {
    const initActivityInfo = async (value) => {
      var data = await api.GetActivityInfo();
      var list = [];
      for (let k in data.data) {
        list.push({ activity_Id: k.toString(), text: data.data[k.toString()] });
      }
      setActivityInfo(list);
    };
    initActivityInfo();
  }, []);

  /** 国际化配置 */

  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              setShowDetail(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
      valueType: 'textarea',
    },
    {
      title: '客户电话',
      dataIndex: 'telePhone',
      valueType: 'textarea',
    },
    {
      title: '活动名称',
      dataIndex: 'activity_Id',
      hideInForm: true,
      hideInTable: true,
      valueType: 'select',
      valueEnum: activityInfo,
    },
    {
      title: '活动名称',
      dataIndex: 'activityName',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '活动时间范围',
      hideInSearch: true,
      width: 300,
      render: (text, record, index) => {
        return (
          <span>
            <div>
              {moment(record.activityStartTime).format('YYYY-MM-DD')}至
              {moment(record.activityEndTime).format('YYYY-MM-DD')}
            </div>
          </span>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createAt',
      valueType: 'date',
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="活动参与记录信息"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        columns={columns}
        //数据绑定
        request={async (params) => {
          var activityRecordData = [];
          var total = 0;
          if (params.activity_Id != undefined) {
            params.activity_Id = activityInfo[params.activity_Id].activity_Id;
          }
          await api.activityRecordList(params).then((r) => {
            activityRecordData = r.data.data;
            total = r.data.total;
          });
          return {
            data: activityRecordData,
            success: true,
            total: total,
          };
        }}
      ></ProTable>
    </PageContainer>
  );
};

export default activityRecordManage;
