import React, {
  useRef,
  useEffect,
  useState,
  useCallback,
  useMemo,
} from "react";
import { withRouter } from "next/router";
import moment from "moment";
// import { Liquid, DualAxes } from "@ant-design/plots";
import _ from "lodash";
import Chart from "../../../components/screen/Chart";
import * as echarts from "echarts";
import Footer from "../../../components/screen/Footer";
import Header from "../../../components/screen/Header";
import Row from "../../../components/screen/Row";
import Card from "../../../components/screen/Card";
import Table from "../../../components/screen/Table";
import TableProgress from "../../../components/screen/TableProgress";
import io from "../../../utils/socket.io.js";

const gutter = 20;
const bottom = 20;
const cardBg = "rgba(6, 36, 109, 0.2)";
const socketEmit = "timePerformanceGoodProduct";
const socketScreenType = "QualityDashBoardType";
// 调试方式: local 本地完整数据调试, server 接口调试, dev 开发期调试
const dataType = "server";

const getQueryVariable = (variable) => {
  let query = window.location.search.substring(1);
  let vars = query.split("&");
  for (let i = 0; i < vars.length; i++) {
    let pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
};

const useSocket = ({ socketEmit, socketScreenType, dataType }) => {
  const { config: { ioSocketUrl } = {} } = global;

  const [pageData, setPageData] = useState({});
  const socket = useRef();

  const update = useCallback((data) => {
    if (dataType === "local") data = localData;

    console.log("data", data);
    const { todayQuality } = data;
    // 今日合格率
    let todayPassRate = todayQuality.qualityRate;
    // 今日是否合格
    let todayIsPass = todayPassRate >= 0.7;
    // 本月不良率TOP5
    const { monthDefectRateTop5 = {} } = data;
    let monthUnPass = [];
    Object.keys(monthDefectRateTop5).forEach((name) => {
      monthUnPass.push({ name, value: monthDefectRateTop5[name] });
    });
    // 合格率趋势
    const { qualityTrend = [] } = data;
    let passTrend = { category: [], data: [] };
    try {
      let category = [];
      let proData = [[], []];
      qualityTrend.forEach((item, dateIndex) => {
        category.unshift(item.date);
        ["zhhgl", "ztl"].forEach((type, typeIndex) => {
          Object.keys(item[type]).forEach((proName) => {
            let value = item[type][proName];
            if (!proData[typeIndex].find((i) => i.name === proName)) {
              proData[typeIndex].push({ name: proName, data: [] });
            }
            let proIndex = proData[typeIndex].findIndex(
              (i) => i.name === proName
            );
            proData[typeIndex][proIndex].data[
              -1 * dateIndex + qualityTrend.length - 1
            ] = value;
          });
        });
      });
      // 折线图 所有值为0，则消失（过滤这条产品数据）
      proData[1] = proData[1].filter(({ data }) => { 
        let total = 0;
        data.forEach(val => total += val);
        return total > 0;
      })
      let typeData = [
        {
          key: "zhhgl",
          name: "综合合格率",
          data: proData[0],
        },
        {
          key: "ztl",
          name: "一次性合格率",
          data: proData[1],
        },
      ];
      passTrend = { category, data: typeData };
    } catch (e) {
      console.log("qualityTrend error", e, qualityTrend);
    }
    // 近三天不良率
    const { threeDayReject = [] } = data;
    let unPassRate = threeDayReject;
    // 任务提醒
    const { taskRemind = [] } = data;
    let taskReminder = taskRemind;

    setPageData({
      todayPassRate,
      todayIsPass,
      monthUnPass,
      passTrend,
      unPassRate,
      taskReminder,
    });
  }, []);

  const getData = useCallback(() => {
    let workCenterCode = getQueryVariable("workCenterCode");
    let date = getQueryVariable("date");
    if (!workCenterCode) return;

    let query = {
      workCenterCode,
      screenType: socketScreenType,
    };
    if (date) query.date = date;
    console.log("fetch", socketEmit, { query });

    if (dataType === "server") {
      socket.current.emit(socketEmit, "channel", { query });
    } else if (dataType === "local") {
      update();
    }
  }, [update]);

  useEffect(() => {
    if (dataType === "dev") setPageData(devData);

    if (dataType === "local") getData();

    if (dataType === "server") {
      socket.current = io.connect(ioSocketUrl, {transports:['websocket']});
      socket.current.on("connect", function () {
        console.log("msg页面连接成功！");
        getData();
      });
      socket.current.on(socketEmit, function (res) {
        try {
          res = JSON.parse(res);
        } catch (e) {
          console.log(e);
        }
        update(res.data);
      });
    }
  }, [getData, update]);

  return [pageData, getData];
};

function QualityBoard(props) {
  const { config: { qualityBoard = {} } = {} } = global;
  const { threeDayRejectTableNext = 4000, taskRemindTableNext = 4000} = qualityBoard;

  const [pageData, getPageData] = useSocket({
    socketEmit,
    socketScreenType,
    dataType,
  });

  // 今日合格率
  const todayPassRateOpt = useMemo(
    () => chartConfig("todayPassRateConfig").init(pageData),
    [pageData]
  );
  // 今日是否合格
  const todayIsPass = useMemo(() => !!pageData.todayIsPass, [pageData]);
  // 本月不良率TOP5
  const monthUnPassOpt = useMemo(
    () => chartConfig("monthUnPassConfig").init(pageData),
    [pageData]
  );
  // 合格率趋势
  const passTrend = useMemo(
    () => chartConfig("passTrendConfig").init(pageData),
    [pageData]
  );
  // 近三天不良率
  const unPassRateTableRef = useRef();
  const unPassRateTableColumns = useMemo(
    () => [
      {
        title: "日期",
        code: "date",
        render: (value) => (value && moment(value).format("MM-DD")) || "",
      },
      { title: "产品名称", code: "materialName" },
      { title: "产品等级", code: "productLevel" },
      { title: "生产批次", code: "scpc" },
      { title: "产量", code: "cl" },
      { title: "检验批次", code: "jypc" },
      { title: "不良批次", code: "blpc" },
      {
        title: "不良率",
        width: 176,
        code: "bll",
        render: (value) => { 
          if (isNaN(value)) return value;
          if (parseFloat(value) === 0) return value;
          return <TableProgress percent={value} rule={ 'strange' } />
        },
      },
    ],
    []
  );
  useEffect(() => {
    const { unPassRate = [] } = pageData;
    unPassRateTableRef.current.setData(unPassRate);
    let getNextPage = () => setTimeout(() => {
      unPassRateTableRef.current.nextPage();
      timmer = getNextPage();
    }, threeDayRejectTableNext);
    let timmer = getNextPage();
    return () => {
      clearTimeout(timmer);
    };
  }, [pageData]);
  // 任务提醒
  const taskReminderTableRef = useRef();
  // 8小时内含8小时数值显示绿色，8小时以上数值显示橙色，24小时以上数值显示红色。
  const getColor = useCallback((ms = 0) => {
    if (ms > 24 * 60 * 60) return "#FF005A";
    if (ms > 8 * 60 * 60) return "#F5A623";
    if (ms <= 8 * 60 * 60) return "#58BC17";
  }, []);
  const billstatusStyle = useCallback(
    (ms) => {
      return {
        fontSize: "16px",
        color: "#fff",
        lineHeight: "28px",
        padding: "0 8px",
        display: "inline-block",
        background: getColor(ms),
      };
    },
    [getColor]
  );
  const taskReminderTableColumns = useMemo(
    () => [
      {
        title: "任务状态",
        code: "billstatus",
        render: (value, config, rowData) => (
          <span style={billstatusStyle(rowData.ms)}>{value}</span>
        ),
      },
      { title: "任务名称", code: "templatename" },
      { title: "产品名称", code: "materialname" },
      { title: "产品等级", code: "materialdesc" },
      { title: "批次号", code: "workordercode" },
      { title: "工序", code: "processname" },
      {
        title: "任务产生时间",
        code: "createtime",
        render: (value) =>
          (value && moment(value).format("YYYY-MM-DD HH:mm")) || "",
      },
      {
        title: "持续时长",
        code: "cxsc",
        render: (value, config, rowData) => (
          <span style={{ color: getColor(rowData.ms) }}>{value}</span>
        ),
      },
    ],
    [billstatusStyle, getColor]
  );
  useEffect(() => {
    const { taskReminder = [] } = pageData;
    taskReminderTableRef.current.setData(taskReminder);
    let getNextPage = () => setTimeout(() => {
      taskReminderTableRef.current.nextPage();
      timmer = getNextPage();
    }, taskRemindTableNext);
    let timmer = getNextPage();
    return () => {
      clearTimeout(timmer);
    };
  }, [pageData]);

  return (
    <div className="screen-container">
      <Header title={"质量看板"} />
      <div className="screen-container-content">
        <Row
          style={{ height: `${470 + bottom}px` }}
          bottom={bottom}
          gutter={gutter}
        >
          <Row.Col style={{ width: `${470 + gutter}px` }} bottom={bottom}>
            <Row bottom={bottom}>
              <Row.Col span={24} style={{ height: `${220 + bottom}px` }}>
                <Card
                  title="今日合格率"
                  titleSpace={true}
                  overVisible={true}
                  withBg={cardBg}
                >
                  <div className="screen-container-hp">
                    <Row className="height-100" gutter={gutter} bottom={bottom}>
                      <Row.Col span={11} bottom={0}>
                        <Chart option={todayPassRateOpt} />
                      </Row.Col>
                      <Row.Col span={13} bottom={0}>
                        <div className="screen-container-hp-top">
                          <span>检验合格率</span>
                        </div>
                        <div className="screen-container-hp-bottom">
                          {todayIsPass ? "运行正常" : "运行异常"}
                        </div>
                      </Row.Col>
                    </Row>
                  </div>
                </Card>
              </Row.Col>
              <Row.Col span={24} style={{ height: `${230}px` }} bottom={0}>
                <Card title="本月不良率TOP5" titleSpace={true} withBg={cardBg}>
                  <Chart option={monthUnPassOpt} />
                </Card>
              </Row.Col>
            </Row>
          </Row.Col>
          <Row.Col
            style={{ width: `${1390 + bottom}px`, height: `${470 + gutter}px` }}
          >
            <Card title="合格率趋势" titleSpace={false} withBg={cardBg}>
              <Chart option={passTrend} />
            </Card>
          </Row.Col>
        </Row>
        <Row style={{ height: `${404}px` }} gutter={gutter} bottom={0}>
          <Row.Col span={12}>
            <Card
              title="近三天不良率"
              titleSpace={true}
              withBg={cardBg}
              padding={gutter + "px"}
            >
              <Table
                mainKey="gid"
                ref={unPassRateTableRef}
                columns={unPassRateTableColumns}
              />
            </Card>
          </Row.Col>
          <Row.Col span={12}>
            <Card
              title="任务提醒"
              titleSpace={true}
              withBg={cardBg}
              padding={gutter + "px"}
            >
              <Table
                mainKey="gid"
                autoNext={false}
                pageFinished={getPageData}
                ref={taskReminderTableRef}
                columns={taskReminderTableColumns}
              />
            </Card>
          </Row.Col>
        </Row>
      </div>
      <Footer />
      <style jsx>{`
        .screen-container {
          height: 100vh;
          min-height: 1080px;
          min-width: 1920px;
          overflow: hidden;
          background: url("/img/bg.png") center center;
          position: relative;
          padding-top: 96px;
          padding-bottom: 82px;
        }
        .screen-container-content {
          height: 100%;
          padding: 0 ${gutter}px;
        }
        .screen-container-hp {
          height: 100%;
          overflow: hidden;
        }
        .screen-container-hp-top {
          height: 82px;
          background: url(/img/img1.png);
          background-repeat: no-repeat;
          position: relative;
          background-position: 0 10px;
        }
        .screen-container-hp-top span {
          color: #00f7fb;
          position: absolute;
          font-size: 18px;
          top: 25px;
          left: 46px;
          letter-spacing: 10px;
        }
        .screen-container-hp-bottom {
          font-size: 32px;
          line-height: 38px;
          width: 188px;
          color: #00f7fb;
          text-align: center;
          background-image: linear-gradient(
            180deg,
            rgba(0, 76, 167, 0.2) 0%,
            rgba(36, 53, 184, 0.5) 100%
          );
          border: 1px solid #0064f1;
          border-radius: 3px;
          margin-top: 12px;
        }
        .screen-container-hp-bottom::before {
          content: "";
          display: block;
          margin: -8px -10px 0 -10px;
          height: 20px;
          border-top: 1px solid #0064f1;
          border-left: 1px solid #0064f1;
          border-right: 1px solid #0064f1;
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
        }
        .screen-container-hp-bottom::after {
          content: "";
          display: block;
          margin: 0 -10px -8px -10px;
          height: 20px;
          border-bottom: 1px solid #0064f1;
          border-left: 1px solid #0064f1;
          border-right: 1px solid #0064f1;
          border-bottom-left-radius: 3px;
          border-bottom-right-radius: 3px;
        }
      `}</style>
    </div>
  );
}

const devData = {
  // 今日合格率
  todayPassRate: 0.855555,
  // 今日是否合格
  todayIsPass: true,
  // 本月不良率TOP5
  monthUnPass: [
    { value: 0.0909, name: "硫含量" },
    { value: 0.3564, name: "DIO" },
    { value: 0.1203, name: "粉体电阻率" },
    { value: 0.1253, name: "包装袋" },
    { value: 0.2005, name: "振实密度" },
  ],
  // 合格率趋势
  passTrend: {
    category: ["08-01", "08-02", "08-03", "08-04", "08-05", "08-06", "08-07"],
    data: [
      {
        name: "综合合格率",
        data: [
          {
            name: "E60",
            data: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
          },
          {
            name: "E70",
            data: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
          },
          {
            name: "E80",
            data: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
          },
        ],
      },
      {
        name: "一次性合格率",
        data: [
          {
            name: "E60",
            data: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
          },
          {
            name: "E70",
            data: [0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2],
          },
          {
            name: "E80",
            data: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3],
          },
        ],
      },
    ],
  },
  // 近三天不良率
  unPassRate: [
    {
      gid: "1",
      date: "2022-08-06", //日期
      materialName: "磷酸铁锂", //产品名称
      productLevel: "E80", //产品等级
      scpc: 2, //生产批次
      cl: 2, //产量
      jypc: 2, //检验批次
      blpc: 0, //不良批次
      bll: "0.123", //不良率
    },
    {
      gid: "2",
      date: "2022-08-06", //日期
      materialName: "磷酸铁锂", //产品名称
      productLevel: "E80", //产品等级
      scpc: 2, //生产批次
      cl: 2, //产量
      jypc: 2, //检验批次
      blpc: 0, //不良批次
      bll: "无", //不良率
    },
    {
      gid: "3",
      date: "2022-08-06", //日期
      materialName: "磷酸铁锂", //产品名称
      productLevel: "E80", //产品等级
      scpc: 2, //生产批次
      cl: 2, //产量
      jypc: 2, //检验批次
      blpc: 0, //不良批次
      bll: "1", //不良率
    },
    {
      gid: "4",
      date: "2022-08-06", //日期
      materialName: "磷酸铁锂", //产品名称
      productLevel: "E80", //产品等级
      scpc: 2, //生产批次
      cl: 2, //产量
      jypc: 2, //检验批次
      blpc: 0, //不良批次
      bll: "1.000", //不良率
    },
    {
      gid: "5",
      date: "2022-08-06", //日期
      materialName: "磷酸铁锂", //产品名称
      productLevel: "E80", //产品等级
      scpc: 2, //生产批次
      cl: 2, //产量
      jypc: 2, //检验批次
      blpc: 0, //不良批次
      bll: "0", //不良率
    },
  ],
  // 任务提醒
  taskReminder: [
    {
      gid: "1",
      billstatus: "待检验", //任务状态
      templatename: "测试工单批次生成质检任务", //任务名称
      materialname: "L5车间成品", //产品名称
      materialdesc: "E80A", //产品等级
      workordercode: "HSR5A22082201", //批次号
      processname: "粗磨", //工序
      createtime: "2022-08-01 00:00:00", //任务产生时间
      cxsc: "50分钟", //持续时长
      ms: 1,
    },
    {
      gid: "2",
      billstatus: "待检验", //任务状态
      templatename: "测试工单批次生成质检任务", //任务名称
      materialname: "L5车间成品", //产品名称
      materialdesc: "E80A", //产品等级
      workordercode: "HSR5A22082201", //批次号
      processname: "粗磨", //工序
      createtime: "2022-08-01 00:00:00", //任务产生时间
      cxsc: "50分钟", //持续时长
      ms: 1000000,
    },
  ],
};
const localData = {
  todayQuality: {
    qualityRate: 0.231,
  },
  monthDefectRateTop5: {
    PH值: 0.3333,
    粒度: 0.3333,
    感应强度: 0.3333,
    包装袋: 0.1203,
    振实密度: 0.2005,
  },
  qualityTrend: [
    {
      date: "08-22",
      ztl: {
        E60: 0.42,
        E70: 0.32,
        E80: 0.22,
      },
      zhhgl: {
        E60: 0.12,
        E70: 0.12,
        E80: 0.12,
      },
    },
    {
      date: "08-21",
      ztl: {
        E60: 0.42,
        E70: 0.32,
        E80: 0.22,
      },
      zhhgl: {
        E60: 0.12,
        E70: 0.12,
        E80: 0.12,
      },
    },
    {
      date: "08-20",
      ztl: {
        E60: 0.42,
        E70: 0.32,
        E80: 0.22,
      },
      zhhgl: {
        E60: 0.12,
        E70: 0.12,
        E80: 0.12,
      },
    },
    {
      date: "08-19",
      ztl: {
        E60: 0.42,
        E70: 0.32,
        E80: 0.22,
      },
      zhhgl: {
        E60: 0.12,
        E70: 0.12,
        E80: 0.12,
      },
    },
    {
      date: "08-18",
      ztl: {
        E60: 0.42,
        E70: 0.32,
        E80: 0.22,
      },
      zhhgl: {
        E60: 0.12,
        E70: 0.12,
        E80: 0.12,
      },
    },
    {
      date: "08-17",
      ztl: {
        E60: 0.42,
        E70: 0.32,
        E80: 0.22,
      },
      zhhgl: {
        E60: 0.12,
        E70: 0.12,
        E80: 0.12,
      },
    },
    {
      date: "08-16",
      ztl: {
        E60: 0.42,
        E70: 0.32,
        E80: 0.22,
      },
      zhhgl: {
        E60: 0.12,
        E70: 0.12,
        E80: 0.12,
      },
    },
  ],
  threeDayReject: [
    {
      gid: "1",
      date: "2022-08-06", //日期
      materialName: "磷酸铁锂", //产品名称
      productLevel: "E80", //产品等级
      scpc: 2, //生产批次
      cl: 2, //产量
      jypc: 2, //检验批次
      blpc: 0, //不良批次
      bll: "0.123123123123", //不良率
    },
    {
      gid: "2",
      date: "2022-08-06", //日期
      materialName: "磷酸铁锂", //产品名称
      productLevel: "E80", //产品等级
      scpc: 2, //生产批次
      cl: 2, //产量
      jypc: 2, //检验批次
      blpc: 0, //不良批次
      bll: "无", //不良率
    },
    { gid: "3" },
    { gid: "4" },
    { gid: "5" },
    { gid: "6" },
    { gid: "7" },
    { gid: "8" },
    { gid: "9" },
  ],
  taskRemind: [
    {
      gid: "1",
      billstatus: "待检验", //任务状态
      templatename: "测试工单批次生成质检任务", //任务名称
      materialname: "L5车间成品", //产品名称
      materialdesc: "E80A", //产品等级
      workordercode: "HSR5A22082201", //批次号
      processname: "粗磨", //工序
      createtime: "2022-08-01 00:00:00", //任务产生时间
      cxsc: "50分钟", //持续时长
      ms: 1,
    },
    {
      gid: "2",
      billstatus: "待检验", //任务状态
      templatename: "测试工单批次生成质检任务", //任务名称
      materialname: "L5车间成品", //产品名称
      materialdesc: "E80A", //产品等级
      workordercode: "HSR5A22082201", //批次号
      processname: "粗磨", //工序
      createtime: "2022-08-01 00:00:00", //任务产生时间
      cxsc: "50分钟", //持续时长
      ms: 1000000,
    },
    {
      gid: "3",
      billstatus: "待检验", //任务状态
      templatename: "测试工单批次生成质检任务", //任务名称
      materialname: "L5车间成品", //产品名称
      materialdesc: "E80A", //产品等级
      workordercode: "HSR5A22082201", //批次号
      processname: "粗磨", //工序
      createtime: "2022-08-01 00:00:00", //任务产生时间
      cxsc: "50分钟", //持续时长
      ms: 30000,
    },
    { gid: "4" },
    { gid: "5" },
    { gid: "6" },
    { gid: "7" },
    { gid: "8" },
    { gid: "9" },
  ],
};

// 今日合格率
const todayPassRateConfig = {
  series: {
    type: "liquidFill",
    center: ["50%", "50%"],
    radius: "75%",
    data: [
      {
        value: 0.855,
        itemStyle: {
          opacity: 0.3,
        },
      },
      0.855,
    ],
    itemStyle: {},
    label: {
      position: ["50%", "30%"],
      formatter: (opt) => `${parseFloat((opt.value * 100).toFixed(1))}%`,
      fontSize: 28,
    },
    backgroundStyle: {
      color: "none",
    },
    outline: {
      show: true,
      borderDistance: 2,
      itemStyle: {
        color: "none",
        borderColor: "#f6202f",
        borderWidth: 2,
      },
    },
  },
};
let todayPassRateColors = {
  red: {
    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "hsl(356deg 92% 65%)",
      },
      {
        offset: 1,
        color: "hsl(356deg 92% 25%)",
      },
    ]),
    color: "#f6202f",
  },
  green: {
    fill: "#92D050",
    color: "#92D050",
  },
  orange: {
    fill: "#FFC000",
    color: "#FFC000",
  },
};
todayPassRateConfig.init = (pageData) => {
  let { todayPassRate = 0, todayIsPass } = pageData;
  let opt = _.cloneDeep(todayPassRateConfig);
  opt.series.data[0].value = todayPassRate;
  opt.series.data[1] = todayPassRate;

  let { orange, green } = todayPassRateColors;
  let { fill, color } = todayIsPass ? green : orange;

  opt.series.itemStyle.color = fill;
  opt.series.label.color = color;
  opt.series.outline.itemStyle.borderColor = color;
  return opt;
};
// 本月不良率TOP5
const monthUnPassConfig = {
  color: ["#4D7BF3", "#4FCCFF", "#6EE420", "#FFC760", "#FF005A"],
  legend: {
    orient: "vertical",
    left: 10,
    top: "middle",
    itemGap: 16,
    textStyle: {
      rich: {
        0: { opacity: 0.75 },
        1: { opacity: 1 },
      },
    },
  },
  series: {
    type: "pie",
    radius: ["40%", "70%"],
    center: ["65%", "45%"],
    label: {
      show: true,
      textBorderColor: "transparent",
      rich: {
        0: { color: "#4D7BF3" },
        1: { color: "#4FCCFF" },
        2: { color: "#6EE420" },
        3: { color: "#FFC760" },
        4: { color: "#FF005A" },
      },
    },
    labelLine: {
      show: true,
    },
    data: [],
  },
};
monthUnPassConfig.init = (pageData) => {
  let { monthUnPass } = pageData;
  if (!monthUnPass) return;
  let opt = _.cloneDeep(monthUnPassConfig);
  opt.series.data = monthUnPass;
  opt.legend.formatter = (name) => {
    let { value } = monthUnPass.find((i) => i.name === name);
    return `{0|${name}：}{1|${(value * 100).toFixed(2)}%}`;
  };
  opt.series.label.formatter = (data) => {
    let { name, dataIndex } = data;
    return `{${dataIndex}|${name}}`;
  };
  return opt;
};
// 合格率趋势
const passTrendConfig = {
  grid: {
    bottom: 40,
    top: 80,
    left: 70,
    right: 70,
  },
  legend: {
    right: 20,
    top: 20,
  },
  barMaxWidth: 30,
  xAxis: {
    type: "category",
    data: [],
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
    axisLabel: {
      color: "rgba(255,255,255,0.85)",
    },
  },
  yAxis: [
    {
      type: "value",
      max: 1,
      axisTick: {
        show: true,
        alignWithLabel: true,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.65)",
        },
      },
      axisLabel: {
        color: "rgba(255,255,255,0.85)",
        formatter: (value) => (value * 100).toFixed(0) + "%",
      },
    },
    {
      type: "value",
      max: 1,
      axisTick: {
        show: true,
        alignWithLabel: true,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.65)",
        },
      },
      axisLabel: {
        color: "rgba(255,255,255,0.85)",
        formatter: (value) => (value * 100).toFixed(0) + "%",
      },
    },
  ],
  series: [],
};
const colors = [[new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(249, 203, 173)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(225, 193, 0)'
  }, {
    offset: 0.63, color: 'rgb(217, 199, 117)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.17, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(169, 209, 142)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(0, 176, 240)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(191, 144, 0)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(237, 125, 49)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(255, 153, 153)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(51, 102, 255)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(0, 255, 153)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
    offset: 1, color: 'rgb(255, 51, 253)'
  }, {
    offset: 0.26, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0.16, color: 'rgb(183, 210, 236)'
  }, {
    offset: 0, color: 'rgb(208, 225, 242)'
  }])], [
  "#3366FF", "#00CCFF", "#FF6699", "#8497B0", "#C9C9C9",
  "#FFD966","#8FAADC","#ED7D31","#FFFF00","#92D050"
  ],
]
passTrendConfig.init = (pageData) => {
  let { passTrend } = pageData;
  if (!passTrend) return;
  let opt = _.cloneDeep(passTrendConfig);

  let { category, data } = passTrend;
  opt.xAxis.data = category;

  opt.series = [];
  data.forEach((item, yAxisIndex) => {
    let type = yAxisIndex === 0 ? "bar" : "line";
    let { name: typeName } = item;
    item.data.forEach(({ name: proName, data }, index) => {
      let name = `${proName} ${typeName}`;
      opt.series.push({ name, yAxisIndex, type, data, color: colors[yAxisIndex][index] });
    });
  });
  return opt;
};

let chartConfig = (() => {
  let chartOpt = {
    todayPassRateConfig,
    monthUnPassConfig,
    passTrendConfig,
  };
  let getOpt = (type) => chartOpt[type];
  return getOpt;
})();

export default withRouter(QualityBoard);