import TitleBox from "../../Component/TitleBox";
import chartA from "./../../../../assets/image/chartA.png";
import chartB from "./../../../../assets/image/chartB.png";
import { useAppSelector } from "../../../../store/hooks";
import { selectYield } from "../../../../store/HomePageSlice";
function RightUp() {
  const data = useAppSelector(selectYield);
  // console.log("888888888前中后段良率", data);
  let before = data?.before || 100;
  let middle = data?.middle || 100;
  let after = data?.after || 100;
  return (
    <div className="right_right_up">
      <TitleBox title="right_right_up" />
      <div className="chart1">
        <img
          src={chartA}
          alt=""
          width={"121px"}
          height={30 + before + "px"}
          style={{ position: "relative", top: "4px" }}
        />
        <img src={chartB} alt="" width={"121px"} height={"130px"} />
        <span
          className="num_percentage"
          style={{ top: -61 + before * 0.2 + "px" }}
        >
          {before}
          <span className="small">%</span>
        </span>
        <span className="title">前段良率</span>
      </div>
      <div className="chart2">
        <img
          src={chartA}
          alt=""
          width={"121px"}
          height={30 + middle + "px"}
          style={{ position: "relative", top: "4px" }}
        />
        <img src={chartB} alt="" width={"121px"} height={"130px"} />
        <span
          className="num_percentage"
          style={{ top: -61 + middle * 0.2 + "px" }}
        >
          {middle}
          <span className="small">%</span>
        </span>
        <span className="title">中段良率</span>
      </div>
      <div className="chart3">
        <img
          src={chartA}
          alt=""
          width={"121px"}
          height={30 + after + "px"}
          style={{ position: "relative", top: "4px" }}
        />
        <img src={chartB} alt="" width={"121px"} height={"130px"} />
        <span
          className="num_percentage"
          style={{ top: -61 + after * 0.2 + "px" }}
        >
          {after}
          <span className="small">%</span>
        </span>
        <span className="title">后段良率</span>
      </div>
    </div>
  );
}
export default RightUp;