PMS_Frontend_v1.0.0/src/pages/OutRoadMgm/OutSegmentMgm/ChargeRulesMgm/Detail.jsx

import React, { useState, useEffect } from "react";
import {
  Modal,
  Form,
  Input,
  Select,
  Button,
  Row,
  Col,
  Divider,
  Checkbox,
  Descriptions,
  Radio,
} from "antd";
import EffectiveDate from "./EffectiveDate";
import ajax from "@/services";
function Detail(props) {
  const { record, visible = false, close = () => { } } = props;
  const [show ,setShow] = useState(visible)
  const [form] = Form.useForm();
  const [effectiveDateList, setEffectiveDateList] = useState(record.property);
  console.log(effectiveDateList)
  useEffect(() => {
    setEffectiveDateList(record.property);
    console.log(444455,record);
  }, []);
  return (
    <Modal
      open={visible}
      destroyOnClose
      onCancel={close}
      width={1200}
      title="详情"
      footer={null}
    >
      <div className="yisa-custom-scrollbar" style={{height: '600px', overflowY: 'auto', overflowX: 'hidden'}}>
        <Descriptions column={2}>
          <Descriptions.Item label="规则名称" span={1}>
            {record.feeName}
          </Descriptions.Item>
          <Descriptions.Item label="编码" span={1}>
            {record.feeCode}
          </Descriptions.Item>
          <Descriptions.Item label="描述" span={1}>
            {record.description}
          </Descriptions.Item>
          <Descriptions.Item label="所属商户" span={1}>
            {record.operationName}
          </Descriptions.Item>
          <Descriptions.Item label="操作时间" span={1}>
            {record.createdTime}
          </Descriptions.Item>
          <Descriptions.Item label="14小时最大收费金额" span={1}>
            {record.limit24hour}
          </Descriptions.Item>
          <Descriptions.Item label="免费分钟数" span={1}>
            {record.freeTime}
            <div style={{ margin: "0 10px" }}>
              <Checkbox disabled defaultChecked={record.freeTimeAbleF}>
                免费分钟数纳入计费时间
              </Checkbox>
            </div>
          </Descriptions.Item>
          <Descriptions.Item label="特殊车辆优惠" span={2}>
            <Radio.Group
              disabled
              defaultValue={record.typeF}
              options={[
                {
                  label: "启用",
                  value: 1,
                },
                {
                  label: "禁用",
                  value: 0,
                },
              ]}
            />
          </Descriptions.Item>
          <Descriptions.Item label="新能源车辆免费分钟" span={1}>
            {record.evFreeTime}
            <div style={{ margin: "0 10px" }}>
              <Checkbox disabled defaultChecked={record.evFreeTimeAble}>
                免费分钟数纳入计费时间
              </Checkbox>
            </div>
          </Descriptions.Item>
        </Descriptions>
        <Divider />
        {effectiveDateList &&
          effectiveDateList.rules?.map((item, index) => {
            console.log(item);
            return <EffectiveDetail record={item} key={index} />
          })
        }
      </div>
    </Modal>
  );
}

function EffectiveDetail(props) {
  const { record } = props;
  console.log(101,record)
  return (
    <div className="el-form">
      <Descriptions column={2}>
        <Descriptions.Item label="生效日期" span={1}>
          {record.date}
        </Descriptions.Item>
        <Descriptions.Item span={2}>
          <Checkbox.Group
            defaultValue={[record.unitDelay ? 1 : -1, record.unitUp ? 2 : -1]}
            disabled
            options={[
              {
                label: "跨段延续计费",
                value: 1,
              },
              {
                label: "出场时不满计费单元部分补齐计费单元收费",
                value: 2,
              },
            ]}
          ></Checkbox.Group>
        </Descriptions.Item>
      </Descriptions>
      {record.details.map((item, index) => {
        return <TimePartDetail index={index + 1} record={item} />;
      })}
    </div>
  );
}

function TimePartDetail(props) {
  const { record, index } = props;
  function partName(type) {
    switch (type) {
      case 0:
        return "基础时段";
      case 2:
        return "周期计费";
      case 1:
        return "按次计费";
    }
  }
  return (
    <>
      <Descriptions column={2}>
        <Descriptions.Item label={`时段${index}`}>
          {`${record.start}-${record.end}`}
        </Descriptions.Item>
        {record.itemss?.map((item, index) => {
          {
            (item.type === 0 || item.type === 2) && (
              <Descriptions.Item label="时段最高金额">
                {record.limit}
              </Descriptions.Item>
            )
          }
          <Descriptions.Item label={`区间${index}`} span={2}>
            {partName(item.type)}
          </Descriptions.Item>
          {
            item.type === 0 && (
              <>
                <Descriptions.Item span={2}>
                  {/* <div>{`前：${record.time_before} 分钟，${record.time_before_money}元/${record.time_before_minute}分钟`}</div> */}
                  <div>{`前：${items.segment} 分钟，${item.unit}元/${item.period}分钟`}</div>
                </Descriptions.Item>
                <Descriptions.Item span={2}>
                  {/* <div>{`满：${record.time_before} 分钟后，${record.time_after_money}元/${record.time_after_minute}分钟`}</div> */}
                  {item.sub ? <div>{`满：${record.items && record.item.segment} 分钟后，${record.items[0].sub[0].unit}元/${record.items[0].sub[0]?.period}分钟`}</div> : null}
                </Descriptions.Item>
              </>
            )
          }
          {
            record.type === 2 && (
              <Descriptions.Item span={2}>
                {/* <div>{`${record.time_money}元/${record.time_minute}分钟`}</div> */}
                <div>{`${record.items && record.items[0].unit}元/${record.items && record.items[0].period}分钟`}</div>
              </Descriptions.Item>
            )
          }
          {
            record.type === 1 && (
              <Descriptions.Item span={2}>
                {/* <div>{`${record.money_per_time}元/次`}</div> */}
                <div>{`${record.items && record.items[0].unit}元/次`}</div>
              </Descriptions.Item>
            )
          }

        })}
        {(record.type === 0 || record.type === 2) && (
          <Descriptions.Item label="时段最高金额">
            {record.limit}
          </Descriptions.Item>
        )}
        <Descriptions.Item label={`区间${index}`} span={2}>
          {partName(record.items[0].type)}
        </Descriptions.Item>
        {record.items[0].type === 0 && (
          <>
            <Descriptions.Item span={2}>
              {/* <div>{`前：${record.time_before} 分钟，${record.time_before_money}元/${record.time_before_minute}分钟`}</div> */}
              <div>{`前：${record.items && record.items[0].segment} 分钟，${record.items && record.items[0].unit}元/${record.items && record.items[0].period}分钟`}</div>
            </Descriptions.Item>
            <Descriptions.Item span={2}>
              {/* <div>{`满：${record.time_before} 分钟后，${record.time_after_money}元/${record.time_after_minute}分钟`}</div> */}
              {record.items && record.items[0].sub ? <div>{`满：${record.items && record.items[0].segment} 分钟后，${record.items[0].sub[0].unit}元/${record.items[0].sub[0]?.period}分钟`}</div> : null}
            </Descriptions.Item>
          </>
        )}
        {record.items[0].type === 2 && (
          <Descriptions.Item span={2}>
            {/* <div>{`${record.time_money}元/${record.time_minute}分钟`}</div> */}
            <div>{`${record.items && record.items[0].unit}元/${record.items && record.items[0].period}分钟`}</div>
          </Descriptions.Item>
        )}
        {record.items[0].type === 1 && (
          <Descriptions.Item span={2}>
            {/* <div>{`${record.money_per_time}元/次`}</div> */}
            <div>{`${record.items && record.items[0].unit}元/次`}</div>
          </Descriptions.Item>
        )}
      </Descriptions>
      <Divider />
    </>
  );
}

export default Detail;