import React, { Component, useState, useEffect } from 'react';
import { Card, Row, Col, Button, Icon, Table } from 'antd';
// import IndexEcharts from './components/indexEcharts';
// import Swiper from './swiper/index';
import moment from 'moment';
import router from 'umi/router';
import request from '@/utils/request';
import apis from '@/services/apis';
import TimeSelect from '../compents/TimeSelect';
import BuildingSelect from '@/components/SelectButton/BuildSelect';
import Navigate from '@/components/Navigate';
// import Count from './components/Count';
// import SourceRole from './components/SourceRole';
// import UserSex from './components/UserSex';
// import UserConversion from './components/UserConversion';
// import BuildingStatistic from './BuildingStatistic';
import AuthButton from '@/components/AuthButton';
const clickCon = (val, record, type) => {
  if (val == 0) {
    return (
      <>
        <span>{val}</span>
      </>
    );
  }
  return (
    <>
      <span style={{ color: '#1D74D9', cursor: 'pointer' }} onClick={() => toDetail(record, type)}>
        {val}
      </span>
    </>
  );
};

const consultant = props => {
  const [data, setData] = useState({});
  const [totalRow, setTotalRow] = useState({});

  const [time, setTime] = useState();
  const [buildingValue, setBuildingValue] = useState();

  useEffect(() => {
    if (time) {
      getList({
        buildingId: buildingValue,
        startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
        endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      });
    }
  }, [time, buildingValue]);

  // 查询列表
  const getList = params => {
    // updataLoading(true);

    request({ ...apis.stats.consultantKPI, params: { ...params } })
      .then(data => {
        setData(data.paged);
        setTotalRow(data.total);
        // updataLoading(false);
      })
      .catch(err => {
        // updataLoading(false);
      });
  };

  const columns = [
    {
      title: '项目',
      dataIndex: 'buildingName',
      key: 'buildingName',
      align: 'center',
      render: (txt, _, index) => (index ? txt : <span>总计</span>),
    },

    {
      title: '置业顾问名称',
      dataIndex: 'userName',
      key: 'userName',
      align: 'center',
    },
    {
      title: '置业顾问电话',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },
    {
      title: '客户总计',
      dataIndex: 'totalPersons',
      key: 'totalPersons',
      align: 'center',
      sorter: true,

      // render: (txt, record, index) =>
      //   index ? clickCon(txt, record, 'totalPersons') : <strong>{txt}</strong>,
    },
    {
      title: '新增客户',
      dataIndex: 'newPersons',
      key: 'newPersons',
      align: 'center',
      sorter: true,

      // render: (txt, record, index) =>
      //   index ? clickCon(txt, record, 'newPersons') : <strong>{txt}</strong>,
    },
    {
      title: '分享次数',
      dataIndex: 'shareNum',
      key: 'shareNum',
      align: 'center',
      sorter: true,

      // render: (txt, record, index) =>
      //   index ? clickCon(txt, record, 'shareNum') : <strong>{txt}</strong>,
    },
    {
      title: '分享访问人数',
      dataIndex: 'visitPersons',
      key: 'visitPersons',
      align: 'center',
      sorter: true,

      // render: (txt, record, index) =>
      //   index ? clickCon(txt, record, 'visitPersons') : <strong>{txt}</strong>,
    },
    // {
    //   title: '分享访问次数',
    //   dataIndex: 'visitNum',
    //   key: 'visitNum',
    //   align: 'center',
    //   sorter: true,

    //   render: (txt, record, index) =>
    //     index ? clickCon(txt, record, 'visitNum') : <strong>{txt}</strong>,
    // },

    // {
    //   title: '分享拓客',
    //   dataIndex: 'sharePersons',
    //   key: 'sharePersons',
    //   align: 'center',
    //   sorter: true,

    //   render: (txt, record, index) =>
    //     index ? clickCon(txt, record, 'sharePersons') : <strong>{txt}</strong>,
    // },
    // {
    //   title: '主页访问人数',
    //   dataIndex: 'homePagePersons',
    //   key: 'homePagePersons',
    //   align: 'center',
    //   sorter: true,

    //   render: (txt, record, index) =>
    //     index ? clickCon(txt, record, 'homePagePersons') : <strong>{txt}</strong>,
    // },
    // {
    //   title: '主页访问次数',
    //   dataIndex: 'homePageNums',
    //   key: 'homePageNums',
    //   align: 'center',
    //   sorter: true,

    //   render: (txt, record, index) =>
    //     index ? clickCon(txt, record, 'homePageNums') : <strong>{txt}</strong>,
    // },
    // {
    //   title: '咨询数',
    //   dataIndex: 'chatPersons',
    //   key: 'chatPersons',
    //   align: 'center',
    //   sorter: true,

    //   render: (txt, record, index) =>
    //     index ? clickCon(txt, record, 'chatPersons') : <strong>{txt}</strong>,
    // },
    // {
    //   title: '点赞数',
    //   dataIndex: 'favorNum',
    //   key: 'favorNum',
    //   align: 'center',
    //   sorter: true,

    //   render: (txt, record, index) =>
    //     index ? clickCon(txt, record, 'favorNum') : <strong>{txt}</strong>,
    // },
  ];

  const toAddVisitNum = record => {
    router.push({
      pathname: '/activity/SignupActivity/registrationRecord',
      query: {
        dynamicId: record.dynamicId,
      },
    });
  };

  //排序
  const handleChange = (pagination, filters, sorter) => {
    console.log(pagination, filters, sorter);
    // Desc  和asc
    let sort = {};
    if (sorter.order == 'ascend') {
      sort.asc = sorter.columnKey;
    } else if (sorter.order == 'descend') {
      sort.desc = sorter.columnKey;
    }

    getList({
      buildingId: buildingValue,
      startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
      endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      ...sort,
    });
  };

  function getTableList(params) {
    request({
      ...apis.activityDataStatis.activityDetailTableData,
      params: {
        ...params,
      },
    })
      .then(data => {
        console.log(data);
        setData(data);
        // this.setState({ tableData: data.records, total: data.total });
      })
      .catch();
  }

  const onTimeChange = e => {
    setTime(e);
  };

  // 下载文档
  function download(data) {
    if (!data) {
      return;
    }
    const url = window.URL.createObjectURL(new Blob([data]));
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', '置业顾问KPI.xlsx');
    document.body.append(link);
    link.click();
  }
  // 导出
  function exportRecord() {
    updataBtnloading(true);
    request({
      ...apis.stats.exportConsultantKPI,
      responseType: 'blob',
      params: {
        buildingId: buildingValue,
        startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
        endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      },
    })
      .then(response => {
        download(response);
        updataBtnloading(false);
      })
      .catch(error => {
        updataBtnloading(false);
      });
  }

  const list = data.records;
  const _list = list && list.length > 0 ? [totalRow, ...list] : [];
  let row = 0;
  return (
    <Card
      title={<BuildingSelect value={buildingValue} onChange={e => setBuildingValue(e)} all />}
      headStyle={{ textAlign: 'left' }}
      extra={<TimeSelect onChange={onTimeChange}></TimeSelect>}
    >
      {/* <div>
        <AuthButton name="admin.statistical.consultant.export" noRight={null}>
          <Button
            type="primary"
            onClick={exportRecord}
            style={{ float: 'right', margin: '20px 23px 20px 0', zIndex: 1 }}
          >
            导出
          </Button>
        </AuthButton>
      </div> */}
      <Table
        // rowKey={record => data?.current * data?.size + row++}
        style={{ marginTop: '30px' }}
        dataSource={_list}
        // dataSource={data.records}
        columns={columns}
        pagination={{ current: data?.current, total: data?.total }}
        onChange={handleChange}
        // onChange={handleChange}
        // loading={loading}
      />
      {/* <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination
          showQuickJumper
          defaultCurrent={1}
          total={data.total}
          onChange={changePageNum}
          current={data.current}
        />
      </div> */}
    </Card>
  );
};
export default consultant;
