import Chart from '@/components/PieChart/Chart';
import services from '@/services';
import { convertUnits, formatNumber } from '@/utils/ui';
import { useRequest } from 'ahooks';
import { memo, useMemo } from 'react';
import BothwayBar from '../../components/BothwayBar';
import { useGlobalModalServices } from '../../provider';
import styles from './index.less';

const SanitationDisp = () => {
  const { dispatch } = useGlobalModalServices();
  const colors: string[] = [
    'rgb(255, 117, 203)',
    '#dfc1ae',
    '#8bd3ff',
    '#40fff2',
    '#73ed95',
    '#ccffb1',
    '#ffe07e',
    '#ff9369',
    '#c89594',
    '#f59cff',
    '#aa7dff',
    'rgb(255, 117, 203)',
    '#dfc1ae',
    '#8bd3ff',
    '#40fff2',
    '#73ed95',
    '#ccffb1',
    '#ffe07e',
    '#ff9369',
    '#c89594',
    '#f59cff',
    '#aa7dff',
  ];
  //环卫车辆
  const { data: clzs } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-clzs',
      })
      .then(res => {
        res.data.data.records[0].types = res.data.data.records[0].types.map(
          (item: any) => ({
            ...item,
            carGradeName: item.carGradeName || '未知',
          })
        );
        return res;
      })
      
      // (实现2)过滤掉没有carGradeName的项
      // .then(res => {
      //   // console.log(res);
      //   res.data.data.records[0].types = res.data.data.records[0].types.filter(
      //     (item: any) => item.carGradeName
      //   );
      //   return res;
      // })

      // (实现1)对数据进行排序
    //   .then(res => {
    //     console.log(res);
    //     // 在这里对数据进行排序处理
    //     if (res?.data?.data?.records?.[0]?.types) {
    //       const sortedData = [...res.data.data.records[0].types].sort(
    //         (a, b) => b.vehicleCount - a.vehicleCount
    //       );
    //       return {
    //         ...res,
    //         data: {
    //           ...res.data,
    //           data: {
    //             ...res.data.data,
    //             records: [{
    //               ...res.data.data.records[0],
    //               types: sortedData
    //             },
    //             ...res.data.data.records.slice(1),
    //           ]}
    //         }
    //       };
    //     }
    //     return res;
    //   }),
    // {
    //   refreshDeps: [],
    // }
  );
  //环卫人员
  const { data: hwrysl } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-hwrysl',
    }),
  );

  //人员数量占比
  const { data: rylxsl } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-rylxsl',
    }),
  );
    //年龄分布
    const { data: nlfbnn } = useRequest(() =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-hyyxqk-nlfbnn',
      }),
    );
    // console.log(nlfbnn);
    // console.log(clzs);

  const issue = useMemo(() => {
    return [
      {
        name: '男性',
        count: convertUnits(hwrysl?.data?.data?.records?.[0]?.male)?.num,
        value: hwrysl?.data?.data?.records?.[0]?.male,
        perpent: (
          (hwrysl?.data?.data?.records?.[0]?.male /
            (hwrysl?.data?.data?.records?.[0]?.female +
              hwrysl?.data?.data?.records?.[0]?.male)) *
          100
        ).toFixed(2),
        unit: formatNumber(hwrysl?.data?.data?.records?.[0]?.male, {
          one: '人',
          myriad: '万人',
        })?.unit,
        color: 'rgb(50, 177, 255)',
      },
      {
        name: '女性',
        value: hwrysl?.data?.data?.records?.[0]?.female,
        count: convertUnits(hwrysl?.data?.data?.records?.[0]?.female)?.num,
        perpent: (
          (hwrysl?.data?.data?.records?.[0]?.female /
            (hwrysl?.data?.data?.records?.[0]?.female +
              hwrysl?.data?.data?.records?.[0]?.male)) *
          100
        ).toFixed(2),
        color: '#ff9b5d',
        unit: formatNumber(hwrysl?.data?.data?.records?.[0]?.female, {
          one: '人',
          myriad: '万人',
        })?.unit,
      },
    ];
  }, [hwrysl]);

  const hwryTotal = useMemo(() => {
    return (
      hwrysl?.data?.data?.records?.[0]?.female +
      hwrysl?.data?.data?.records?.[0]?.male
    );
  }, [hwrysl]);
  return (
    <div className={styles.container}>
      <div className={styles.leftWarp}>
        <div className={styles.issueSource}>
          <div className={styles.title}>
            <span>环卫人员</span>
          </div>

          <div className={styles.content}>
            <Chart
              style={{ width: 159, height: 159 }}
              data={issue}
              color={issue?.map((item) => item?.color)}
            />

            <div className={styles.cardWarp}>
              {issue?.map((item, index) => {
                return (
                  <div className={styles.card} key={index}>
                    <div
                      className={styles.dot}
                      style={{ background: item.color }}
                    ></div>
                    <div className={styles.cont}>
                      <div className={styles.name}>{item?.name}</div>
                      <div style={{ marginTop: 8 }}>
                        <span>
                          <span className={styles.count}>{item?.count}</span>
                          <span>{item?.unit}</span>
                        </span>
                        <span>
                          <span className={styles.count}> {item?.perpent}</span>

                          <span>%</span>
                        </span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className={styles.vehicle}>
          <div className={styles.title}>
            <span>
              全市共有环卫车辆
              <span style={{ marginLeft: 5, marginRight: 5 }}>
                {
                  formatNumber(
                    clzs?.data?.data?.records?.[0]?.totalVehicleCount,
                  )?.num
                }
              </span>
              {
                formatNumber(
                  clzs?.data?.data?.records?.[0]?.totalVehicleCount,
                  {
                    one: '辆',
                    myriad: '万辆',
                  },
                )?.unit
              }
            </span>
          </div>

          <div className={styles.content}>
            <Chart
              style={{ width: 128, height: 128 }}
              data={clzs?.data?.data?.records?.[0]?.types?.map((item: any) => ({
                name: item?.carGradeName,
                value: item?.vehicleCount,
              }))}
              color={colors}
            />

            <div className={styles.cardWarp}>
              {clzs?.data?.data?.records?.[0]?.types?.map((item: any, index: any) => {
                return (
                  <div className={styles.card} key={index}>
                    <div
                      className={styles.dot}
                      style={{ background: colors[index] }}
                    ></div>
                    <div className={styles.cont}>
                      <div className={styles.name}>{item?.carGradeName}</div>
                      <div style={{ marginTop: 8 }}>
                        <span>
                          <span className={styles.count}>
                            {formatNumber(item?.vehicleCount)?.num}
                          </span>
                          <span>
                            {
                              formatNumber(item?.vehicleCount, {
                                one: '辆',
                                myriad: '万辆',
                              })?.unit
                            }
                          </span>
                        </span>
                        <span>
                          <span
                            className={styles.count}
                            style={{ marginLeft: 10 }}
                          >
                            {(
                              (item.vehicleCount /
                                clzs?.data?.data?.records?.[0]
                                  ?.totalVehicleCount) *
                              100
                            ).toFixed(2)}
                          </span>

                          <span>%</span>
                        </span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      <div className={styles.rightWarp}>
        <div className={styles.personnel}>
          <div className={styles.title}>各类型环卫从业人员数量及占比</div>

          <div className={styles.content}>
            <Chart
              style={{ width: 159, height: 159 }}
              data={rylxsl?.data?.data?.records?.map((item: any) => ({
                name: item?.key,
                value: item?.num,
              }))}
              color={colors}
            />

            <div className={styles.cardWarp}>
              {rylxsl?.data?.data?.records?.map((item: any, index: any) => {
                return (
                  <div className={styles.card} key={index}>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <div
                        className={styles.dot}
                        style={{ background: colors[index] }}
                      ></div>
                      <div className={styles.name} title={item?.key}>
                        {item?.key}
                      </div>
                    </div>

                    <div>
                      <span>
                        <span className={styles.count}>
                          {
                            formatNumber(item?.num, {
                              one: '辆',
                              myriad: '万辆',
                            })?.num
                          }
                        </span>
                        <span>
                          {
                            formatNumber(item?.num, {
                              one: '人',
                              myriad: '万人',
                            })?.unit
                          }
                        </span>
                      </span>
                      <span style={{ marginLeft: 3 }}>
                        <span className={styles.count}>
                          {((item?.num / hwryTotal) * 100).toFixed(2)}
                        </span>

                        <span>%</span>
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className={styles.perYear}>
          <div className={styles.title}>
            <span className={styles.title}>各年龄区间环卫从业人员分布</span>
            <div className={styles.rW}>
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  marginRight: 20,
                  fontSize: 16,
                }}
              >
                <div className={styles.square}></div>男
              </div>
              <div style={{ display: 'flex', alignItems: 'center' ,fontSize: 16,}}>
                <div
                  className={styles.square}
                  style={{ background: 'rgb(255, 155, 93)' }}
                ></div>
                女
              </div>
            </div>
          </div>
          <BothwayBar result={nlfbnn?.data?.data?.records?.[0]?.result}/>
        </div>
      </div>
    </div>
  );
};
export default memo(SanitationDisp);
