const radius = ["58%", "72%"];
const radius2 = ["45%", "58%"];
const grid = {
  top: 0,
  left: 24,
  right: 24,
  bottom: 32,
};
const title = {
  // 由外部负责展示，此处占位
  text: " ",
  left: "50%",
  top: "30%",
  textAlign: "center",
  textStyle: {
    fontWeight: 400,
    fontSize: 48,
    color: "#fffd",
  },
  subtext: "当前成品率\u2002",
  subtextStyle: {
    fontSize: 20,
    fontWeight: 100,
    color: "#fffd",
    align: "right",
  },
};
const tooltip = {
  //   trigger: "item",
  show: false,
};
const legend = {
  top: "5%",
  left: "center",
};
const bgSerie = {
  type: "pie",
  radius: radius,
  center: ["50%", "40%"],
  emptyCircleStyle: {
    color: "#042c5f33",
  },
};
const dataSerie = {
  type: "pie",
  radius: radius,
  center: ["50%", "40%"],
  avoidLabelOvervlap: false,
  label: {
    show: false,
    // position: "center",
  },
  labelLine: {
    show: false,
  },
  data: [
    {
      value: 90,
      name: "当前成品率",
      selected: false,
      itemStyle: {
        borderJoin: "round",
        borderCap: "round",
        borderWidth: 12,
        borderRadius: "50%",
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#4CF0E811" },
            { offset: 1, color: "#4CF0E8" },
          ],
        },
      },
    },
    {
      value: 20,
      name: "-",
      itemStyle: { color: "transparent" },
      label: { show: false },
    },
  ],
};
const targetSerie = {
  type: "pie",
  radius: radius2,
  center: ["50%", "40%"],
  avoidLabelOvervlap: false,
  label: {
    show: false,
  },
  labelLine: {
    show: false,
  },
  data: [
    {
      value: 90,
      name: "目标成品率",
      selected: false,
      itemStyle: {
        borderJoin: "round",
        borderCap: "round",
        borderWidth: 12,
        borderRadius: "50%",
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#1065ff66" },
            { offset: 1, color: "#1065ff" },
          ],
        },
      },
    },
    {
      value: 20,
      name: "-",
      itemStyle: { color: "transparent" },
      label: { show: false },
    },
  ],
};

export default (data) => {
  title.subtext = data?.nowYield == null ? "" : "当前成品率\u2002";
  dataSerie.data[0].value = data?.nowYield ?? 0;
  dataSerie.data[1].value = 100 - (data?.nowYield ?? 0);
  targetSerie.data[0].value = data?.targetYield ?? 0;
  targetSerie.data[1].value = 100 - (data?.targetYield ?? 0);
  return {
    tooltip,
    title,
    grid,
    series: [
      // background
      bgSerie,
      // actual data
      dataSerie,
      // target data
      targetSerie,
    ],
  };
};