import CommonTable from '@/components/CommonTable';
import Modal from '@/components/HncyModal';
import Tabs from '@/components/Tabs';
import BaseCard from '@/pages/Common/components/BaseCard';
import services from '@/services';
import { SearchOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { useDebounceFn, useRequest, useUpdateEffect } from 'ahooks';
import { Flex, Input } from 'antd';
import { useMemo, useState } from 'react';
import { colorConfig } from '../../SecurityState/RightLayout/RiskNotice';
import BaseInfo from '../BaseInfo';
import styles from './index.less';
import BlueTable from '@/components/BlueTable';
/**
 *
 * @description 行业体征部分
 */

const IndustrySign = ({ param ,onClose}: { param: any ,onClose?:()=>void}) => {

  const { selectAreaId, setIndustryModalData,  } =
    useModel('safetyAreaId');



  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });
  const [fetchParams, setFetchParams] = useState<any>({
    typeCode: param?.listTypeCode,
    data: {
      pageNo:0,
      pageSize: 10,
      regionCode: selectAreaId,
      factorytypecode: param?.factorytypecode,
    },
  });
  console.log(param?.pageNo);

  const { data: tableData } = useRequest(
    () => services.DataBase.getSjdzInfoData(fetchParams),
    {
      refreshDeps: [fetchParams],
    },
  );
  const { data: typeData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: param?.typeCode,
    }),
  );

  useUpdateEffect(() => {
    setFetchParams({
      ...fetchParams,
      data: {
        ...fetchParams?.data,
        regionCode: selectAreaId,
      },
    });
  }, [selectAreaId]);


  /** 标题渲染 */
  const titleRender = () => {
    return (
      <Flex align="center" className={styles.modalTitle}>
        <div className={styles.title}>{detailModalOpt?.eventType}</div>
        <span
          className={styles.tag}
          style={{
            backgroundImage: `url(${
              colorConfig[detailModalOpt?.riskLevelName]?.bg
            })`,
            color: colorConfig[detailModalOpt?.riskLevelName]?.color,
          }}
        >
          {detailModalOpt?.riskLevelName}
        </span>
        <span className={styles.type}>{detailModalOpt?.position}</span>
      </Flex>
    );
  };
  // console.log(param);

  const columns = useMemo(() => {
    return [
      {
        title: '序号',
        dataIndex: 'name',
        key: 'name',
        width: 80,
        ellipsis: true,
        render: (text:string, record:any, index:number) => {
          // 当前页码减1，乘以每页数量，再加上当前行的索引加1
          const num = fetchParams?.data?.pageNo || 1;
          // return `${(num - 1) * fetchParams?.data?.pageSize + (index + 1)}`;
        return `${fetchParams?.data?.pageNo * fetchParams?.data?.pageSize + (index + 1)}`;
        },
      },
      {
        width: 180,
        ellipsis: true,
        title: `${param?.title}名称`,
        dataIndex: param?.columnsFields?.name || 'name',
        key: 'name',
      },
      {
        width: 150,
        ellipsis: true,
        title: `${param?.title}类型`,
        dataIndex: param?.columnsFields?.type || 'dictjglx_name',
        key: 'dictjglx_name',
      },
      {
        title: '状态',
        dataIndex: param?.columnsFields?.status || 'status',
        key: 'id',
        width: 80,
        render: (val: string) => {
          return (
            <span style={{ color: val == '预警' ? '#e66a6e' : '#27f77e' }}>
              {val}
            </span>
          );
        },
      },
      {
        title: '管理单位',
        dataIndex: param?.columnsFields?.descgldw || 'descgldw',
        key: 'descgldw',
        width: 200,
        ellipsis: true,
      },
      {
        title: '位置',
        dataIndex: param?.columnsFields?.address || 'dictdldj_name',
        key: 'dictdldj_name',
        width: 300,
        ellipsis: true,
        render: (val: string, record: any) => {
          return (
            <div className={styles.addressWarp}>
              <div className={styles.text}>{val}</div>
              {val && (
                <img
                  src={require('@/assets/images/SecurityServiceOverview/localtionIcon.png')}
                  alt=""
                  className={styles.icon}
                  onClick={()=>{
                    setIndustryModalData({
                      open:true,
                      ...record,
                    })
                    onClose?.()
                  }}
                />
              )}
            </div>
          );
        },
      },
    ];
  }, [param, fetchParams]);
  const { run: InputChange } = useDebounceFn(
    (e) => {
      console.log(e.target.value);
    },
    {
      wait: 500,
    },
  );
  return (
    <Flex gap={28} className={styles.wrap}>
      <Flex vertical gap={15} className={styles.left}>
        {/* <BaseCard
          
          title={param?.title+"指数"}
          height={304}
          extra={
            <span
              className={styles.signNum}
              style={{
                color: getCqiStatusStyle(
                  Number(signData?.data?.currentIndex?.cqi),
                )?.color,
              }}
            >
              {signData?.data?.currentIndex?.cqi}
            </span>
          }
          style={{
            paddingTop: 20,
          }}
        >
          <div style={{ marginTop: 20, padding: '0 20px' }}>
            <LineCharts
              lineColor={
                getCqiStatusStyle(Number(signData?.data?.currentIndex?.cqi))
                  ?.color
              }
              colorStops={[
                {
                  offset: 0,
                  color: 'rgba(240, 248, 255, 0.064)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: getCqiStatusStyle(
                    Number(signData?.data?.currentIndex?.cqi),
                  )?.background, // 100% 处的颜色
                },
              ]}
              data={
                signData?.data?.currentIndex?.indexDataList?.map(
                  (item: any) => ({
                    name: item.time,
                    value: item.qualitySign,
                  }),
                ) || []
              }
              style={{
                width: 410,
                height: 160,
              }}
            />
          </div>
        </BaseCard> */}
        <BaseCard
          title={param?.title + '概况'}
          height={300}
          style={{
            paddingTop: 20,
          }}
        >
          <div className={styles.list}>
            {param?.generalList?.map((item, index) => (
              <Flex
                className={styles.listItem}
                justify="space-between"
                align="center"
                key={index}
              >
                <span className={styles.name}>{item?.typeName}</span>
                <span>
                  <span className={styles.num}>{item.total}</span>
                  <span>个</span>
                </span>
              </Flex>
            ))}
          </div>
        </BaseCard>
        <BaseCard
          title={param?.title + '类型'}
          height={394}
          style={{
            paddingTop: 20,
          }}
        >
          <div className={styles.list}>
            {typeData?.data?.data?.records?.map((item: any, index: number) => (
              <Flex
                className={styles.listItem}
                justify="space-between"
                align="center"
                key={index}
              >
                <span className={styles.name}>{item?.[param.typeField]}</span>
                <span>
                  <span className={styles.num}>{item.num}</span>
                  <span>个</span>
                </span>
              </Flex>
            ))}
          </div>
        </BaseCard>
      </Flex>
      <div className={styles.right}>
        <div className={styles.searchWarp}>
          <Tabs
            size="large"
            defaultActiveKey="1"
            centered
            items={[
              { key: '1', label: '全部' },
              { key: '2', label: '异常' },
              { key: '3', 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>
        <BlueTable
          dataSource={tableData?.data?.data?.records}
          columns={columns}
          scroll={{ x: 850, y:550}}
          pagination={{
            total: tableData?.data?.data?.page?.total,
            pageSize: fetchParams?.data?.count,
            showQuickJumper: false,
            showSizeChanger: false,
            onChange: (page, pageSize) => {
              setFetchParams({
                ...fetchParams,
                data: {
                  pageNo: page-1,
                  pageSize: pageSize,
                },
              });
            },
            //  hideOnSinglePage: true,
          }}
        />
        {/* <EventPicList
          listData={listData}
          listHeight={700}
          setParams={(data) => {
            setFetchParams({ ...fetchParams, page: data.current.page });
          }}
          handleDetail={(details) => {
            setDetailModalOpt({
              open: true,
              eventId: details?.asriskId,
              ...details,
            });
          }}
        /> */}
      </div>
      {/* 事件详情 */}
      <Modal
        open={detailModalOpt?.open}
        titleRender={titleRender}
        onCancel={() => {
          setDetailModalOpt({
            open: false,
            title: '事件详情',
            eventId: '',
          });
        }}
        width={2650}
        height={900}
      >
        {detailModalOpt?.open && (
          <BaseInfo
            eventId={detailModalOpt?.eventId}
            detail={detailModalOpt}
            onChangeOpt={(val) => {
              console.log(val);

              setDetailModalOpt({
                ...detailModalOpt,
                position: val?.position,
                eventType: val?.event_type,
                riskLevelName: val?.risklevel,
              });
            }}
          />
        )}
      </Modal>
    </Flex>
  );
};

export default IndustrySign;
