import PieChart from '@/components/PieChart';
import { useMemo, useState } from 'react';
import styles from './index.less';

import CommonTable from '@/components/CommonTable';
import Modal from '@/components/HncyModal';
import Tabs from '@/components/Tabs';
import services from '@/services';
import { SearchOutlined } from '@ant-design/icons';
import { useDebounceFn, useRequest } from 'ahooks';
import { Input } from 'antd';
import { useModel } from '@umijs/max';
const MeetSafeguard = () => {
    const { selectAreaId } = useModel('safetyAreaId');
  // 弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<any>({
    open: false,
    title: '',
    eventId: '',
  });
  const [searchData, setSearchData] = useState({
    page: 1,
    count: 10,
  });
  //道路桥梁
  const { data:meetData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjbz',
        data: {
          regionCode: selectAreaId,
        },
      }),
    {
      refreshDeps: [selectAreaId],
    },
  );
console.log(meetData?.data?.data?.records?.[0]);

  const items = useMemo(() => {
    return [
      {
        icon: require('@/assets/images/SecurityServiceOverview/yjdw.png'),
        label: '应急队伍',
        value:meetData?.data?.data?.records?.[0]?.yjdw??'--' ,
      },
      {
        icon: require('@/assets/images/SecurityServiceOverview/aqzj.png'),
        label: '安全专家',
        value: meetData?.data?.data?.records?.[0]?.aqzj??'--',
      },
      {
        icon: require('@/assets/images/SecurityServiceOverview/yjwz.png'),
        label: '应急物资',
        value: meetData?.data?.data?.records?.[0]?.yjwz??'--',
      },
      {
        icon: require('@/assets/images/SecurityServiceOverview/yjzb.png'),
        label: '应急装备',
        value: meetData?.data?.data?.records?.[0]?.yjzb??'--',
      },
    ];
  }, [meetData]);

  const pieData = useMemo(() => {
    return [
      {
        name: '应急防护物资',
        value: 1234,
      },
      {
        name: '运输保障物资',
        value: 1234,
      },
      {
        name: '生活救生物资',
        value: 1234,
      },
      {
        name: '其他物资',
        value: 1234,
      },
    ];
  }, []);
  const dataSource = [
    {
      key: '1',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '2',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '3',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '4',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '5',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '6',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    
    },
    {
      key: '7',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '8',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '9',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '10',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
    {
      key: '11',
      name: 'GPS测量笔',
      unit: 'xxx',
      total: '15',
      yt: '测量',
      address: '成都市成华区双林路256号',
      person: '陈杨',
      phone:'15287278987'
    },
  ];

  const columns = [
    {
      title: '序号',
      dataIndex: 'name',
      key: 'name',
      width: 80,
      ellipsis: true,
      render: (text:any, record:any, index:number) => {
        // 当前页码减1，乘以每页数量，再加上当前行的索引加1
        return `${(searchData?.page - 1) * dataSource?.length + (index + 1)}`;
      },
    },
    {
      width: 180,
      ellipsis: true,
      title: '装备名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      width: 150,
      ellipsis: true,
      title: '型号/规格',
      dataIndex: 'unit',
      key: 'unit',
    },
    {
      title: '数量',
      dataIndex: 'total',
      key: 'total',
      width: 150,
      ellipsis: true,
    },
    {
      title: '用途',
      dataIndex: 'yt',
      key: 'yt',
      width: 150,
      ellipsis: true,
    },
    {
      title: '存放地点',
      dataIndex: 'address',
      key: 'address',
      width: 300,
      ellipsis: true,
    },
    {
      title: '联络人',
      dataIndex: 'person',
      key: 'person',
      width: 120,
      ellipsis: true,
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      key: 'phone',
      width: 150,
      ellipsis: true,
    },
  ];
  const { run: InputChange } = useDebounceFn(
    (e) => {
      console.log(e.target.value);
    },
    {
      wait: 500,
    },
  );
  return (
    <div className={styles.container}>
      <div className={styles.tag}>应急保障</div>
      <div className={styles.content}>
        <div className={styles.leftWarp}>
          {items?.map((item,index) => {
            return (
              <div
                className={styles.items}
                key={index}
                onClick={() => {
                  setDetailModalOpt({
                    open: true,
                    title: item?.label,
                    eventId: '',
                  });
                }}
              >
             
                  <img src={item.icon} alt="" className={styles.icon} />
              
                <div className={styles.info}>
                  <div className={styles.label}>{item?.label}</div>
                  <div className={styles.count}>{item?.value}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div className={styles.rWarp}>
          <div className={styles.title}>应急装备</div>
          <div>
            <PieChart
              style={{ width: '100%' }}
              chartStyle={{ width: 125, height: 134 }}
              labelClassName={styles.labelClassName}
              labelStyle={{ height: 175, overflow: 'auto', width: 150 }}
              data={pieData || []}
            />
          </div>
        </div>
      </div>
      <Modal
        open={detailModalOpt?.open}
        title={detailModalOpt.title}
        onCancel={() => {
          setDetailModalOpt({
            open: false,
            title: '事件详情',
            eventId: '',
          });
        }}
        width={1550}
        height={850}
      >
        <div className={styles.modalWarp}>
          <div className={styles.searchWarp}>
            <Tabs
              size="large"
              defaultActiveKey="1"
              centered
              items={[
                { key: '1', label: '应急防护物资' },
                { key: '2', label: '运输保障物资' },
                { key: '3', label: '生活救生物资' },
                { key: '4', label: '其他物资' },
              ]}
              onChange={(e) => {}}
            />
            <Input
              style={{
                width: 250,
                background: 'rgba(50, 111, 167, 0.3)',
                borderRadius: 20,
                border: 'rgb(50, 111, 167)',
                marginLeft: 20,
              }}
              onChange={InputChange}
              placeholder="请输入名称搜索"
              suffix={<SearchOutlined />}
            ></Input>
          </div>
          <CommonTable
            dataSource={dataSource}
            columns={columns}
            scroll={{ x: 700, y: 550 }}
            pagination={{
              total: dataSource?.length,
              pageSize: searchData?.count,
              showQuickJumper: false,
              showSizeChanger: false,
              onChange: (page, pageSize) => {
                setSearchData({
                  ...searchData,
                  page: page,
                  count: pageSize,
                });
              },
              //  hideOnSinglePage: true,
            }}
          />
        </div>
      </Modal>
    </div>
  );
};

export default MeetSafeguard;
