import { getTaOrgIssueId } from "@/services/taorgissue";
import { Cell, CellGroup, Steps, Tag } from "@antmjs/vantui";
import { View } from "@tarojs/components";
import React, { useEffect, useMemo, useState } from "react";
import dayjs from "dayjs";
import styles from "../index.module.less";
import { APPLY_READY, getIssueStatus } from "@/utils/biz";
import Icon from "@/components/Icon";
import { color } from "echarts";
import { colors } from "@/components/IssueCard";

export default (props) => {
  const { id } = props;
  const [steps, setSteps] = useState([]);

  useEffect(() => {
    if (id) {
      getTaOrgIssueId(id).then((res) => {
        console.log(res);
        const data = res.map((x) => {
          return { ...x, text: x.orgName };
        });
        setSteps(data);
      });
    }
  }, [id]);

  function SorySteps(params) {
    const { steps } = params;

    const sortedSteps = steps.sort((a, b) => {
      if (a.createDate < b.createDate) return -1;
      if (a.createDate > b.createDate) return 1;
      return 0;
    });
    return sortedSteps.map((it, index, array) => {
      // const { value: bizStatus = 0, label: statusText } = getIssueStatus({
      //   ...(it || {}),
      //   expireDate: it?.createDate,
      //   processNode: it?.processNode || it?.applyType,
      //   processStatus: it?.processStatus || it?.verifyStatus || APPLY_READY,
      // });
      // const [bg1, bg2] = colors[bizStatus];

      let nextOrgName = null;
      if (index == 0) {
        nextOrgName = "平台";
      } else if (index <= array.length - 1) {
        nextOrgName = array[index - 1].orgName;
      }
      return (
        <View key={it.orgIssueId} className={styles["page_order"]}>
          <Cell
            title={
              <>
                <View>{nextOrgName}</View>
                <View>
                  {dayjs(it.createDate).format("YYYY-MM-DD HH:mm:ss")}
                </View>
              </>
            }
            renderRightIcon={
              <>
                <View>{it.orgName}</View>
                <View>&ensp;&ensp;</View>
              </>
            }
          />
          {/* <View className={styles["org_order"]}>
            <div>
              {nextOrgName} ----{it.orgName}
            </div>
            <div>{dayjs(it.createDate).format("YYYY-MM-DD HH:mm:ss")}</div>
          </View> */}
        </View>
      );
    });
  }
  return (
    <CellGroup style={{ marginTop: "20px" }}>
      <Cell title="交办历史" />
      <SorySteps steps={steps} />
    </CellGroup>
  );
};