import React, {
  useRef,
  useEffect,
  useState,
  useCallback,
  useMemo,
} from "react";
import moment from "moment";
import _ from "lodash";
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 Chart from "../../../components/screen/Chart";
import io from "../../../utils/socket.io.js";
import { getDailyBoard } from "../../../reportUtils/getQueryData";
import { parse } from "postcss";

const gutter = 20;
const bottom = 20;
const socketEmit = "timePerformanceGoodProduct";
const socketScreenType = "DailyPlanType";

// 调试方式: local 本地完整数据调试, server 接口调试, dev 开发期调试
const dataType = "server";

function PlanDailyBoard(props) {
  const { config: { ioSocketUrl, planDailyConfig = {} } = {} } = global;
  const { reloadTime = 5000, isSocket = true } = planDailyConfig;
  // 月份
  const [titlePrev, setTitlePrev] = useState("");
  // 页面数据
  const [pageData, setPageData] = useState(dataType === "dev" ? devData : {});

  const socket = useRef();

  // 当前时间
  const curDateOpt = useMemo(() => {
    const { curDate } = pageData;
    if (curDate) {
      setTitlePrev(`${moment(curDate).format("M")}月`);
      return moment(curDate).format("YYYY-MM-DD");
    } else return "";
  }, [pageData.curDate]);
  const materialInventoryAvailableDaysOpt = useMemo(() => {
    const { materialInventoryAvailableDays } = pageData;
    return materialInventoryAvailableDays;
  }, [pageData.materialInventoryAvailableDays]);
  // 当前时间
  const goalAchievementRateDateOpt = useMemo(() => {
    const { goalAchievementRateDate } = pageData;
    if (!goalAchievementRateDate) return curDateOpt;
    return goalAchievementRateDate;
  }, [pageData.goalAchievementRateDate]);
  // 上个月
  const lastYearMonthOpt = useMemo(() => {
    const { lastYearMonth } = pageData;
    if (lastYearMonth) {
      return lastYearMonth;
    } else return "";
  }, [pageData.lastYearMonth]);

  // 月总产出
  const mouthProdChart = useRef();
  const mouthProdOpt = useMemo(
    () => chartConfig("mouthProd").init(pageData.mouthProd),
    [pageData]
  );

  // 月生产目标达成
  const mouthAchieveChart = useRef();
  const mouthAchieveOpt = useMemo(
    () => chartConfig("mouthAchieve").init(pageData.mouthAchieve),
    [pageData]
  );

  // 出货当月
  const mouthOutputMemo = useMemo(
    () =>
      pageData.mouthOutput || {
        total: 0,
        totalRate: 0,
        data: [],
        names: [],
        rates: [],
      },
    [pageData]
  );

  // 出货汇总
  const totalOutputChart = useRef();
  const totalOutputOpt = useMemo(
    () => chartConfig("totalOutput").init(pageData.totalOutput),
    [pageData]
  );

  // 生产目标达成
  const prodPlanAchieveChart = useRef();
  const prodPlanAchieveOpt = useMemo(
    () => chartConfig("prodPlanAchieve").init(pageData.prodPlanAchieve),
    [pageData]
  );

  // 原材料库存
  const rawMaterialInventoryChart = useRef();
  const rawMaterialInventoryOpt = useMemo(
    () =>
      chartConfig("rawMaterialInventory").init(pageData.rawMaterialInventory),
    [pageData]
  );

  // 产品库存
  const prodInventory = useRef();
  const prodInventoryOpt = useMemo(() => {
    let option = chartConfig("prodInventory").init(pageData.prodInventory);
    option && (option.getRes = () => pageData.prodInventory);
    return option;
  }, [pageData]);
  const prodInventoryTableOpt = useMemo(() => {
    let { category = [], data = {} } = prodInventoryOpt?.getRes() || {};
    let res = { cloumns: [...category, "合计"], data: [] };
    let rowData = [];
    let total = 0;
    // Object.keys(data).forEach((key) => {
    //   data[key].forEach((val, index) => {
    //     if (rowData[index] === undefined || isNaN(rowData[index]))
    //       rowData[index] = 0;
    //     rowData[index] += val === undefined ? 0 : val;
    //     let ccval = parseFloat(parseFloat(rowData[index]).toFixed(0));
    //     rowData[index] = isNaN(ccval) ? 0 : ccval;
    //     total += val === undefined ? 0 : val;
    //     let tptalccval = parseFloat(parseFloat(total).toFixed(0));
    //     total = isNaN(tptalccval) ? 0 : tptalccval;
    //   });
    // });
    pageData.productInventoryTable?.forEach((item, index) => {
      if (rowData[index] === undefined || isNaN(rowData[index])) {
        rowData[index] = 0;
      }
      rowData[index] = parseFloat(parseFloat(item.inventoryQty).toFixed(0));
      total += item.inventoryQty;
    });
    total = parseFloat(parseFloat(total).toFixed(0));
    rowData.push(<span className="c-red">{total}</span>);
    res.data[0] = rowData;
    return res;
  }, [prodInventoryOpt]);

  // 历史库存
  const historyInventory = useRef();
  const historyInventoryOpt = useMemo(
    () => chartConfig("historyInventory").init(pageData.historyInventory),
    [pageData]
  );

  // 数据更新
  useEffect(() => {
    // 月总产出
    mouthProdOpt && mouthProdChart.current.setOption(mouthProdOpt);
    // 月目标达成
    mouthAchieveOpt && mouthAchieveChart.current.setOption(mouthAchieveOpt);
    // 出货汇总
    totalOutputOpt && totalOutputChart.current.setOption(totalOutputOpt);
    // 生产目标达成
    prodPlanAchieveOpt &&
      prodPlanAchieveChart.current.setOption(prodPlanAchieveOpt);
    // 原材料库存
    rawMaterialInventoryOpt &&
      rawMaterialInventoryChart.current.setOption(rawMaterialInventoryOpt);
    // 产品库存
    prodInventoryOpt && prodInventory.current.setOption(prodInventoryOpt);
    // 历史库存
    historyInventoryOpt &&
      historyInventory.current.setOption(historyInventoryOpt);
  }, [
    mouthProdOpt,
    mouthAchieveOpt,
    totalOutputOpt,
    prodPlanAchieveOpt,
    rawMaterialInventoryOpt,
    prodInventoryOpt,
    historyInventoryOpt,
  ]);

  // 收到数据
  const update = useCallback((data) => {
    if (dataType === "local") data = localDataParse;
    console.log("data", data);

    let consoleError = (e, name, key) => {
      console.log("--------------", name, " error", e);
      console.log("localData: --------------", localDataParse[key]);
      console.log("requestData: --------------", data[key]);
    };
    // 月总产出
    let mouthProd;
    try {
      let res = {
        category: [],
        data: { prod: [], pect: [] },
      };
      let { goalAchievementDiagram = [] } = data;
      goalAchievementDiagram
        .sort((a, b) => b.productName.localeCompare(a.productName))
        .forEach(({ productName, achievingRate, actualQty }) => {
          res.category.push(productName);
          res.data.prod.push(actualQty);
          res.data.pect.push(achievingRate);
        });
      mouthProd = res;
    } catch (e) {
      consoleError(e, "月总产出", "goalAchievementDiagram");
    }
    // 月生产目标达成
    let mouthAchieve;
    try {
      let res = {
        category: [],
        data: { plan: [], infect: [], achievement: [] },
      };
      let { goalAchievementHistogram = [] } = data;
      var goalAchievementHistogramtmp = goalAchievementHistogram;
      var llist = goalAchievementHistogramtmp.filter(
        (x) => x.workLineName.substring(0, 1) === "L"
      );
      var otherlist = goalAchievementHistogramtmp.filter(
        (x) => x.workLineName.substring(0, 1) !== "L"
      );
      llist.push(...otherlist);
      var finallist = llist;
      finallist.forEach(
        ({ workLineName, goalQty, actualQty, monthGoalQty }) => {
          res.category.push(workLineName);
          res.data.infect.push(actualQty);
          res.data.plan.push(monthGoalQty);
          res.data.achievement.push(goalQty === 0 ? 0 : actualQty / goalQty);
        }
      );
      mouthAchieve = res;
    } catch (e) {
      consoleError(e, "月生产目标达成", "goalAchievementHistogram");
    }
    // 出货当月
    let mouthOutput;
    try {
      let res = {
        total: 0,
        totalRate: 0,
        data: [],
        names: [],
        rates: [],
      };
      let { shipmentDashBoard = {} } = data;
      let { summary = {} } = shipmentDashBoard;
      let { totalShipmentQty = 0, dtl = [], totalAchievingRate } = summary;
      res.total = totalShipmentQty.toFixed(0);
      res.totalRate = totalAchievingRate;
      dtl
        .sort((a, b) => b.customerName.localeCompare(a.customerName))
        .forEach(({ customerName, shipmentQty, achievingRate, goalQty }) => {
          res.names.push(customerName);
          res.data.push(shipmentQty.toFixed(0));
          res.rates.push(achievingRate);
        });
      mouthOutput = res;
      // console.log("mouthOutput", mouthOutput, summary);
    } catch (e) {
      consoleError(e, "出货当月", "shipmentDashBoard");
    }
    // 出货汇总
    let totalOutput;
    try {
      let { shipmentDashBoard = {} } = data;
      let { shipmentPie = [] } = shipmentDashBoard;
      totalOutput = shipmentPie.map(({ customerName: name, rate: value }) => ({
        name,
        value,
      }));
      //演示代码，后面要删除
      // totalOutput.forEach((item) => {
      //   if (item.name === "C客户") {
      //     item.value = 0.78;
      //   } else if (item.name === "非C客户") {
      //     item.value = 0.9;
      //   }
      // });
      console.log("-----------totalOutput", totalOutput);
    } catch (e) {
      consoleError(e, "出货汇总", "shipmentPie");
    }
    // 生产目标达成
    let prodPlanAchieve;
    try {
      let res = {
        category: [],
        data: { reach: [] },
      };
      let { goalAchievementRate = [] } = data;
      goalAchievementRate.forEach(({ workCenterName, achievingRate }) => {
        res.category.push(workCenterName);
        res.data.reach.push(achievingRate);
      });
      prodPlanAchieve = res;
    } catch (e) {
      consoleError(e, "生产目标达成", "goalAchievementRate");
    }
    // 原材料库存
    let rawMaterialInventory;
    try {
      let res = {
        category: [],
        names: [],
        data: [],
      };
      let { materialInventoryDiagram = [] } = data;
      let [data0, data1] = materialInventoryDiagram;
      let dates = _.cloneDeep(data0.inventoryDate);
      res.category = dates || [];
      materialInventoryDiagram.forEach((item) => {
        res.names.push(item.materialName);
        res.data.push(item.inventoryQty);
      });

      rawMaterialInventory = res;
      // }
    } catch (e) {
      consoleError(e, "原材料库存", "materialInventoryDiagram");
    }
    // 产品库存
    let prodInventory;
    try {
      let res = {
        category: [],
        data: { qualified: [], review: [], inspecting: [], inspected: [] },
      };
      let { productInventoryHistogram = [] } = data;
      productInventoryHistogram.forEach(
        ({
          productName,
          okQty,
          reviewQty,
          pendingInspectionQty,
          inspectionQty,
        }) => {
          res.category.push(productName);
          res.data.qualified.push(okQty);
          res.data.review.push(reviewQty);
          res.data.inspecting.push(pendingInspectionQty);
          res.data.inspected.push(inspectionQty);
        }
      );
      prodInventory = res;
    } catch (e) {
      consoleError(e, "产品库存", "productInventoryHistogram");
    }
    // 历史库存
    let historyInventory;
    try {
      let res = {
        category: [],
        data: [],
      };
      let { historyInventory: history = [] } = data;
      history.forEach(({ inventoryDate, inventoryQty },index) => {
        //只保留8天的数据
        //只保留8天所以计算下
        let ca=history.length- 8 ;
        if (index<ca) {
          return;
        }
        res.category.push(inventoryDate);
        res.data.push(inventoryQty);
      });
      historyInventory = res;
    } catch (e) {
      consoleError(e, "历史库存", "historyInventory");
    }

    let resData = {
      curDate: data.curDate,
      goalAchievementRateDate: data?.goalAchievementRateDate,
      productInventoryTable: data?.productInventoryTable,
      lastYearMonth: data?.lastYearMonth,
      materialInventoryAvailableDays: data?.materialInventoryAvailableDays,
      mouthProd,
      mouthAchieve,
      mouthOutput,
      totalOutput,
      prodPlanAchieve,
      rawMaterialInventory,
      prodInventory,
      historyInventory,
    };
    console.log("resData", resData);
    setPageData(resData);
  }, []);

  // 获取数据
  const timeoutRef = useRef();
  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") {
      if (isSocket) {
        socket.current.emit(socketEmit, "channel", { query });
      } else {
        getDailyBoard(date)
          .then((res) => {
            update(JSON.stringify(res));
          })
          .catch((err) => console.log(err));
      }
    } else if (dataType === "local") {
      update();
    }
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(getData, reloadTime);
  }, []);

  // 初始化加载
  useEffect(() => {
    if (dataType === "server") {
      socket.current = io.connect(ioSocketUrl, {transports:['websocket']});
      socket.current.on("connect", function () {
        console.log("msg页面连接成功！");
        getData();
      });
      if (isSocket)
        socket.current.on(socketEmit, function (data) {
          try {
            data = JSON.parse(data);
          } catch (e) {
            console.log(e);
          }
          update(data.data);
        });
    } else if (dataType === "local") {
      setTimeout(getData, 1000);
    }
  }, [isSocket]);

  useEffect(() => {
    return () => {
      clearTimeout(timeoutRef.current);
    };
  }, []);

  return (
    <div className="screen-container">
      <Header title={"计划日报看板"} time={curDateOpt} />
      <div className="screen-container-content">
        <Row style={{ height: "100%" }} gutter={gutter} bottom={bottom}>
          <Row.Col style={{ width: "504px" }}>
            <Row>
              <Row.Col style={{ height: "268px", marginBottom: `${bottom}px` }}>
                <Card
                  title={`${titlePrev}总产出(t)`}
                  titleSpace={false}
                  overVisible={true}
                >
                  <Chart ref={mouthProdChart} />
                </Card>
              </Row.Col>
              <Row.Col style={{ height: "604px" }}>
                <Card
                  title={`${titlePrev}生产目标达成`}
                  titleSpace={false}
                  overVisible={true}
                >
                  <Chart ref={mouthAchieveChart} />
                </Card>
              </Row.Col>
            </Row>
          </Row.Col>
          <Row.Col style={{ width: "892px" }}>
            <Row>
              <Row.Col style={{ height: "210px", marginBottom: `${bottom}px` }}>
                <Card
                  title={`${titlePrev}总出货（t）`}
                  titleSpace={true}
                  overVisible={true}
                  withBorder={false}
                  withBg={false}
                >
                  <Row style={{ height: "100%" }}>
                    <Row.Col className="left" style={{ width: "60%" }}>
                      <div className="title">当月总交付情况</div>
                      <Row>
                        <Row.Col span={12}>
                          <NumCard data={mouthOutputMemo.total} />
                          <div className="monthInfo-total">
                            <div className="box">
                              进度达成：
                              {parseFloat(
                                (mouthOutputMemo.totalRate * 100).toFixed(1)
                              )}
                              %
                            </div>
                          </div>
                        </Row.Col>
                        <Row.Col span={12}>
                          <div className="monthInfo">
                            <div className="item">
                              <span className="title">
                                {mouthOutputMemo.names[0]}交货
                              </span>
                              <span className="num c-red">
                                {mouthOutputMemo.data[0]}
                              </span>
                            </div>
                            <div className="item m-b">
                              <span className="title">进度达成</span>
                              <span className="num">
                                {parseFloat(
                                  (mouthOutputMemo.rates[0] * 100).toFixed(1)
                                )}
                                %
                              </span>
                            </div>
                            <div className="item">
                              <span className="title">
                                {mouthOutputMemo.names[1]}交货
                              </span>
                              <span className="num">
                                {mouthOutputMemo.data[1]}
                              </span>
                            </div>
                            <div className="item">
                              <span className="title">进度达成</span>
                              <span className="num">
                                {parseFloat(
                                  (mouthOutputMemo.rates[1] * 100).toFixed(1)
                                )}
                                %
                              </span>
                            </div>
                          </div>
                        </Row.Col>
                      </Row>
                    </Row.Col>
                    <Row.Col className="right" style={{ width: "40%" }}>
                      <div className="title pl-[42px] pr-[25px] text-center">
                        1-{lastYearMonthOpt}月汇总
                      </div>
                      <Chart ref={totalOutputChart} />
                    </Row.Col>
                  </Row>
                </Card>
              </Row.Col>
              <Row.Col style={{ height: "304px", marginBottom: `${bottom}px` }}>
                <Card
                  title={goalAchievementRateDateOpt + " 生产目标达成"}
                  titleSpace={true}
                  overVisible={true}
                >
                  <Chart ref={prodPlanAchieveChart} />
                </Card>
              </Row.Col>
              <Row.Col style={{ height: "338px" }}>
                <Card
                  title="原材料库存情况(t)"
                  titleSpace={false}
                  overVisible={true}
                >
                  <div className=" ml-44 text-lg absolute  text-white">
                    {materialInventoryAvailableDaysOpt !== undefined ? (
                      Object.keys(materialInventoryAvailableDaysOpt).map(
                        (item, index) => {
                          console.log(item);
                          return (
                            <span>
                              {item}可用
                              <span className="m-2 text-xl text-red-600">
                                {materialInventoryAvailableDaysOpt[item]}
                              </span>
                              天{index === 0 ? "，" : ""}
                            </span>
                          );
                        }
                      )
                    ) : (
                      <></>
                    )}
                  </div>
                  <Chart ref={rawMaterialInventoryChart} />
                </Card>
              </Row.Col>
            </Row>
          </Row.Col>
          <Row.Col style={{ width: "504px" }}>
            <Row>
              <Row.Col style={{ height: "436px", marginBottom: `${bottom}px` }}>
                <Card title="产品库存情况" titleSpace={true} overVisible={true}>
                  <div style={{ height: "20%", padding: "16px 20px 0" }}>
                    <SimpleTable {...prodInventoryTableOpt} />
                  </div>
                  <div style={{ height: "80%" }}>
                    <Chart ref={prodInventory} />
                  </div>
                </Card>
              </Row.Col>
              <Row.Col style={{ height: "436px" }}>
                <Card title="历史库存情况" titleSpace={true} overVisible={true}>
                  <Chart ref={historyInventory} />
                </Card>
              </Row.Col>
            </Row>
          </Row.Col>
        </Row>
      </div>
      {/* <Footer withTime={false} showDate={curDateOpt} /> */}
      <style jsx>{`
        .screen-container {
          height: 100vh;
          min-height: 1080px;
          min-width: 1920px;
          overflow: auto;
          background: url("/img/bg.png") center center;
          position: relative;
          padding-top: 96px;
          padding-bottom: 82px;
          overflow: hidden;
        }
        .screen-container-content {
          height: 100%;
          padding: 0 ${gutter}px;
        }
        .title {
          font-size: 14px;
          color: #fff;
          line-height: 22px;
          padding-top: 16px;
          margin-bottom: 6px;
        }
        .monthInfo-total {
          font-size: 18px;
          font-weight: bold;
          line-height: 28px;
          text-align: center;
          padding: 8px 4px 0;
        }
        .monthInfo-total .box {
          background: rgba(36, 53, 184, 0.5);
          color: #00f7fb;
        }
        .monthInfo {
          border-right: 2px solid rgba(255, 255, 255, 0.2);
        }
        .monthInfo .item.m-b {
          margin-bottom: 14px;
        }
        .monthInfo .num,
        .monthInfo .title {
          line-height: 30px;
          font-size: 18px;
          display: inline-block;
          vertical-align: middle;
        }
        .monthInfo .title {
          text-align: right;
          width: 130px;
          padding: 0;
          margin: 0;
        }
        .monthInfo .num {
          font-weight: bold;
          margin-left: 16px;
        }
        .monthInfo .num:not(.c-red) {
          color: #00f7fb;
        }
      `}</style>
      <style jsx global>{`
        .c-red {
          color: #ff005a;
        }
      `}</style>
    </div>
  );
}

function NumCard(props) {
  let { data = 0 } = props;
  const dataArr = useMemo(() => {
    let res = data + "";
    res = res.split("");
    while (res.length < 4) res.unshift("");
    return res;
  }, [data]);
  return (
    <div className="num-card">
      {dataArr.map((num, index) => (
        <div className="num-card-item" key={index}>
          <div className="text">{num}</div>
        </div>
      ))}
      <style jsx>{`
        .num-card {
          height: 100px;
          line-height: 100px;
          text-align: center;
          color: #00f7fb;
          font-size: 44px;
          font-weight: bold;
        }
        .num-card-item {
          float: left;
          height: 100%;
          width: ${100 / dataArr.length}%;
          position: relative;
          padding: 0 4px;
        }
        .num-card-item::before {
          content: "";
          display: block;
          background: linear-gradient(
            to bottom,
            rgba(0, 76, 167, 0.2),
            rgba(36, 53, 184, 0.5)
          );
          height: 100%;
          width: 100%;
        }
        .text {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      `}</style>
    </div>
  );
}
function SimpleTable(props) {
  let { cloumns = [], data = [] } = props;

  return (
    <div className="simple-table">
      <div className="simple-table-header row">
        {cloumns.map((text) => {
          return (
            <div key={text} className="item">
              {text}
            </div>
          );
        })}
      </div>
      <div className="simple-table-body">
        {data.map((rowData, index) => {
          return (
            <div key={index} className="row">
              {rowData.map((text) => {
                return (
                  <div key={text} className="item">
                    {text}
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
      <style jsx>{`
        .simple-table {
          line-height: 32px;
          text-align: center;
          font-size: 14px;
        }
        .simple-table-header {
          overflow: hidden;
          background: rgba(40, 163, 255, 25%);
          color: rgba(255, 255, 255, 85%);
        }
        .simple-table-body {
          overflow: hidden;
          background: rgba(40, 163, 255, 10%);
          color: #fff;
        }
        .simple-table .item {
          width: ${100 / (cloumns.length || 1)}%;
          float: left;
        }
        .simple-table .row:not(:last-child) {
          border-bottom: 1px solid;
        }
        .simple-table .item:not(:last-child) {
          border-right: 1px solid;
        }
        .simple-table .row:not(:last-child),
        .simple-table .item:not(:last-child) {
          border-color: #09213d;
        }
      `}</style>
    </div>
  );
}
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;
};

export default PlanDailyBoard;

// 月总产出
let mouthProd = {
  grid: {
    bottom: 30,
    top: 60,
    left: 60,
    right: 70,
  },
  legend: {
    top: 15,
    right: 10,
    textStyle: {
      fontSize: 14,
    },
  },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLabel: {
      color: "rgba(255,255,255,0.85)",
    },
  },
  yAxis: [
    {
      type: "value",
      min: 0,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "rgba(255,255,255,0.85)",
      },
    },
    {
      type: "value",
      min: 0,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "rgba(255,255,255,0.85)",
        formatter: (value) => `${100 * value}%`,
      },
    },
  ],
  series: [
    {
      data: [],
      type: "bar",
      barWidth: 28,
      name: "实际",
      itemStyle: {
        color: "#2D99FF",
      },
      label: {
        show: true,
        align: "center",
        width: 200,
        position: ["50%", "50%"],
        textBorderColor: "transparent",
        color: "#fff",
      },
    },
    {
      data: [],
      yAxisIndex: 1,
      type: "line",
      name: "达成率",
      itemStyle: {
        color: "#F5A623",
      },
      label: {
        show: true,
        position: "top",
        textBorderColor: "transparent",
        color: "#F5A623",
        formatter: (data) => `${parseInt(100 * data.value)}%`,
      },
    },
  ],
};
mouthProd.init = (res) => {
  if (!res) return;
  let opt = _.cloneDeep(mouthProd);
  let { category, data } = res;
  let { pect, prod } = data;
  prod = prod.map((i) => parseInt(i));
  pect = pect.map((i) => i);
  // 分类
  opt.xAxis.data = category;
  // 实际生产数据
  opt.series[0].data = prod;
  // 达成率
  opt.series[1].data = pect;

  return opt;
};

// 月生产目标达成
let mouthAchieve = {
  legend: {
    top: 15,
    right: 10,
    textStyle: {
      fontSize: 14,
    },
  },

  barWidth: 10,
  barGap: "40%",
  grid: {
    bottom: 40,
    top: 60,
    left: 60,
    right: 70,
  },
  xAxis: {
    type: "value",
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
    axisLabel: {
      color: "rgba(255,255,255,0.85)",
    },
  },
  yAxis: {
    type: "category",
    inverse: true,
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
    axisLabel: {
      color: "rgba(255,255,255,0.85)",
    },
    data: [],
  },
  series: [
    {
      name: "目标",
      type: "bar",
      data: [],
      label: {
        show: true,
        position: "right",
        textBorderColor: "transparent",
        color: "#fff",
      },
      itemStyle: {
        color: "#2D99FF",
      },
    },
    {
      name: "实际",
      type: "bar",
      data: [],
      label: {
        show: true,
        position: "right",
        textBorderColor: "transparent",
        color: "#fff",
      },
      itemStyle: {
        color: "#6FE621",
      },
    },
    {
      name: "达成率",
      type: "line",
      data: [],
      symbolSize: 0,
      lineStyle: {
        width: 0,
      },
      label: {
        show: true,
        position: "right",
        textBorderColor: "transparent",
        offset: [30, 0],
        color: "#F6BD16",
      },
      itemStyle: {
        color: "#F6BD16",
      },
    },
  ],
};
mouthAchieve.init = (res) => {
  if (!res) return;
  let opt = _.cloneDeep(mouthAchieve);
  let { category, data } = res;
  let { achievement, infect, plan } = data;
  // 分类
  opt.yAxis.data = category;
  // 目标 数据
  opt.series[0].data = plan.map((i) => parseFloat(i));
  // 实际 数据
  opt.series[1].data = infect.map((i) => parseFloat(i));
  // 达成率 数据
  opt.series[2].data = plan
    .map((planVal, index) => Math.max(planVal, infect[index]))
    .map((i) => parseFloat(i));
  opt.series[2].label.formatter = ({ dataIndex }) =>
    `  ${(100 * achievement[dataIndex]).toFixed(0)}%`;

  return opt;
};

// 出货汇总
let totalOutputBase = {
  type: "gauge",
  startAngle: 90,
  radius: "70%",
  max: 1,
  endAngle: -270,
  pointer: {
    show: false,
  },
  axisLine: {
    lineStyle: {
      width: 16,
      color: [[1, "#28A3FF"]],
      opacity: 0.15,
    },
  },
  splitLine: {
    show: false,
  },
  axisTick: {
    show: false,
  },
  axisLabel: {
    show: false,
  },
  progress: {
    show: true,
    overlap: false,
    clip: true,
    itemStyle: {
      color: "#2D99FF",
    },
  },
  title: {
    fontSize: 14,
    offsetCenter: [0, -14],
    color: "#fff",
  },
  detail: {
    width: 50,
    height: 14,
    fontSize: 20,
    formatter: (val) => `${parseInt(100 * val)}%`,
    valueAnimation: true,
    offsetCenter: [0, 10],
    color: "#fff",
  },
};
let totalOutput = {
  series: [
    Object.assign({ center: ["30%", "36%"] }, totalOutputBase),
    Object.assign({ center: ["75%", "36%"] }, totalOutputBase),
  ],
};
totalOutput.init = (res) => {
  if (!res) return;
  let opt = _.cloneDeep(totalOutput);
  let [res0, res1] = res;
  opt.series[0].data = [res0];
  opt.series[1].data = [res1];
  return opt;
};

// 生产目标达成
let prodPlanAchieve = {
  grid: {
    bottom: 40,
    top: 30,
    left: 70,
    right: 40,
  },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLabel: {
      color: "rgba(255,255,255,0.85)",
    },
  },
  yAxis: {
    type: "value",
    max: 1,
    axisLabel: {
      color: "rgba(255,255,255,0.85)",
      formatter: (value) => `${parseInt(100 * value)}%`,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
  },
  series: {
    data: [],
    type: "bar",
    barWidth: 28,
    showBackground: true,
    itemStyle: {
      color: "#6FE621",
    },
    label: {
      show: true,
      position: "top",
      textBorderColor: "transparent",
      color: "#fff",
      formatter: (data) => `${parseInt(100 * data.value)}%`,
    },
    backgroundStyle: {
      color: "rgba(45, 153, 255, 0.3)",
    },
  },
};
prodPlanAchieve.init = (res) => {
  if (!res) return;
  let opt = _.cloneDeep(prodPlanAchieve);
  let { category, data } = res;
  let { reach } = data;

  opt.xAxis.data = category;
  opt.series.data = reach.map((i) => parseFloat(i.toFixed(2)));
  return opt;
};

// 原材料库存
let rawMaterialInventory = {
  grid: {
    bottom: 40,
    top: 80,
    left: 70,
    right: 70,
  },
  legend: {
    top: 15,
    right: 10,
    textStyle: {
      fontSize: 14,
    },
  },
  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)",
      interval: 0,
      // rotate:45,
      formatter: function (value) {
        //x轴的文字改为竖版显示
        // var str = value.split("");
        return value.replace("-", "/");
      },
    },
  },
  yAxis: [
    {
      type: "value",
      // splitNumber: 3,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "rgba(255,255,255,0.85)",
        formatter: (value) => parseFloat(value.toFixed(1)),
      },
    },
    {
      type: "value",
      // splitNumber: 3,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "rgba(255,255,255,0.85)",
        formatter: (value) => parseFloat(value.toFixed(1)),
      },
    },
  ],
  series: [
    {
      name: "",
      type: "line",
      symbol: "rect",
      symbolSize: 0,
      smooth: 0.5,
      lineStyle: {
        width: 0,
      },
      areaStyle: {
        opacity: 0.6,
        color: "#2D99FF",
      },
      data: [],
      label: {
        show: true,
        position: "insideTop",
        textBorderColor: "transparent",
        color: "#fff",

        // padding:[100,0,0,0], //调整上的位置
      },
    },
    {
      name: "",
      type: "line",
      yAxisIndex: 1,
      label: {
        show: true,
        position: "top",
        textBorderColor: "transparent",
        color: "#F5A623",
      },
      data: [],
    },
  ],
};
rawMaterialInventory.init = (res) => {
  if (!res) return;
  let opt = _.cloneDeep(rawMaterialInventory);
  let { category, names, data } = res;

  opt.xAxis.data = category.map((date) => moment(date).format("M-D"));
  opt.series[0].data = data[0].map((i) => {
    if (i === null) return i;
    return parseFloat(i.toFixed(1));
  });
  opt.series[0].name = names[0] + " 库存量";
  data[1] &&
    (opt.series[1].data = data[1].map((i) => {
      if (i === null) return i;
      return parseFloat(i.toFixed(1));
    }));
  names[1] && (opt.series[1].name = names[1] + " 库存量");

  return opt;
};

// 产品库存
let prodInventory = {
  grid: {
    bottom: 40,
    top: 60,
    left: 70,
    right: 30,
  },
  barWidth: 32,
  legend: {
    top: 15,
    right: 10,
    textStyle: {
      fontSize: 14,
    },
  },
  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",
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
    axisLabel: {
      color: "rgba(255,255,255,0.85)",
    },
  },
  series: [
    {
      name: "合格数量",
      type: "bar",
      stack: "Ad",
      data: [],
      itemStyle: {
        color: "#6FE621",
      },
      label: {
        show: true,
        position: "inside",
        textBorderColor: "transparent",
        color: "#fff",
      },
    },
    {
      name: "待评审数量",
      type: "bar",
      stack: "Ad",
      data: [],
      itemStyle: {
        color: "#2D99FF",
      },
      label: {
        show: true,
        position: "inside",
        textBorderColor: "transparent",
        color: "#fff",
      },
    },
    {
      name: "在检未出数据",
      type: "bar",
      stack: "Ad",
      data: [],
      itemStyle: {
        color: "#F6BD16",
      },
      label: {
        show: true,
        position: "inside",
        textBorderColor: "transparent",
        color: "#fff",
      },
    },
    {
      name: "已评审待处理",
      type: "bar",
      stack: "Ad",
      data: [],
      itemStyle: {
        color: "#95D8B9",
      },
      label: {
        show: true,
        position: "inside",
        textBorderColor: "transparent",
        color: "#fff",
      },
    },
  ],
};
prodInventory.init = (res) => {
  if (!res) return;
  let opt = _.cloneDeep(prodInventory);
  let { category, data } = res;
  let { qualified, review, inspecting, inspected } = data;

  opt.xAxis.data = category;
  opt.series[0].data = qualified;
  opt.series[1].data = review;
  opt.series[2].data = inspecting;
  opt.series[3].data = inspected;

  return opt;
};

// 历史库存
let historyInventory = {
  grid: {
    bottom: 40,
    top: 30,
    left: 70,
    right: 30,
  },
  barWidth: 16,
  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",
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.65)",
      },
    },
    axisLabel: {
      color: "rgba(255,255,255,0.85)",
    },
  },
  series: [
    {
      name: "碳酸铁 库存量",
      type: "bar",
      data: [],
      itemStyle: {
        color: "#F6BD16",
      },
      label: {
        show: true,
        position: "top",
        textBorderColor: "transparent",
        color: "#fff",
      },
    },
  ],
};
historyInventory.init = (res) => {
  if (!res) return;
  let opt = _.cloneDeep(historyInventory);
  let { category, data } = res;

  opt.xAxis.data = category.map((date) => moment(date).format("M/D"));
  opt.series[0].data = data.map((i) => parseFloat(i.toFixed(0)));

  return opt;
};

let chartConfig = (() => {
  let chartOpt = {
    mouthProd,
    mouthAchieve,
    totalOutput,
    prodPlanAchieve,
    rawMaterialInventory,
    prodInventory,
    historyInventory,
  };
  let getOpt = (type) => chartOpt[type];
  return getOpt;
})();

// dev 数据
let dates1 = [];
for (let i = 0; i < 20; i++) dates1.push(`7-${i + 1}`);
let dates2 = [];
for (let i = 0; i < 10; i++) dates2.push(`7-${i + 1}`);
const devData = {
  curDate: "2022-08-03",
  mouthProd: {
    category: ["磷酸锂铁", "磷酸铁", "高镍三元"],
    data: {
      prod: [1269, 452, 852],
      pect: [0.89, 0.56, 0.763],
    },
  },
  mouthAchieve: {
    category: [
      "L1-A",
      "L1-B",
      "L2-A",
      "L2-B",
      "L3-B",
      "L3-B",
      "L4-A",
      "L4-B",
      "L5-A",
      "L5-B",
      "L6-B",
      "L6-B",
      "F1",
      "F2",
      "F3",
      "N1",
    ],
    data: {
      plan: [
        890, 600, 580, 720, 580, 580, 580, 890, 600, 580, 720, 580, 580, 890,
        600, 580,
      ],
      infect: [
        600, 200, 600, 384, 799, 600, 600, 600, 200, 600, 384, 799, 600, 600,
        200, 600,
      ],
      achievement: [
        0.6123, 0.6356, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6,
        0.6, 0.6, 0.6,
      ],
    },
  },
  mouthOutput: {
    total: 319 + 271,
    totalRate: 0.12,
    data: [319, 271],
    names: ["C公司", "非C公司"],
    rates: [0.12, 0.12],
  },
  totalOutput: [
    { value: 0.234, name: "C公司" },
    { value: 0.234, name: "非C公司" },
  ],
  prodPlanAchieve: {
    category: ["L1", "L2", "L3", "L4", "L5", "L6", "F1", "F2", "F3", "N1"],
    data: {
      reach: [0.79, 0.4, 1.09, 0.33, 0.4, 0.56, 0.4, 0.86, 0.49, 0.79],
    },
  },
  rawMaterialInventory: {
    category: dates1,
    names: ["碳酸铁", "碳酸锂"],
    data: [
      [
        3900,
        4900,
        null,
        4900,
        4300,
        3900,
        null,
        5100,
        null,
        4300,
        3900,
        4900,
        5100,
        4900,
        4300,
        4900,
        5100,
        null,
        4300,
        4300,
      ],
      [
        5100,
        6200,
        6400,
        5500,
        null,
        6200,
        6400,
        5500,
        5100,
        null,
        6400,
        null,
        5100,
        6200,
        6400,
        5500,
        5100,
        null,
        6400,
        6200,
      ],
    ],
  },
  prodInventory: {
    category: ["E80", "E80A", "E70", "E90", "W80S"],
    data: {
      qualified: [3900, 4900, 5100, 4900, 4300],
      review: [5100, 6200, 6400, 5500, 5100],
      inspecting: [5100, 6200, 6400, 5500, 5100],
      inspected: [5100, 6200, 6400, 5500, 5100],
    },
  },
  historyInventory: {
    category: dates2,
    data: [3900, 4900, 5100, 4900, 4300, 5100, 4900, 4300, 4900, 4300],
  },
};

// local 数据
const localDataParse = {
  // #当前日期
  curDate: "2022-06-03",
  // #8月产出
  goalAchievementDiagram: [
    {
      productName: "磷酸铁锂",
      achievingRate: 0.57,
      actualQty: 1268,
    },
  ],
  // #8月份生产目标达成
  goalAchievementHistogram: [
    {
      workLineName: "L1-A",
      goalQty: 890,
      actualQty: 600,
    },
  ],
  // #生产目标达成
  goalAchievementRate: [
    {
      workCenterName: "L1",
      achievingRate: 0.57,
    },
  ],
  // #产品库存情况
  productInventoryTable: [
    {
      productName: "E80",
      inventoryQty: 1000,
    },
  ],
  // #产品库存柱状图
  productInventoryHistogram: [
    {
      productName: "E80",
      okQty: 600,
      reviewQty: 300,
      pendingInspectionQty: 100,
    },
  ],
  // #原材料库存情况
  materialInventoryDiagram: [
    {
      inventoryDate: ["2022-08-02"],
      materialName: "磷酸铁锂",
      inventoryQty: [3532.45],
    },
    {
      inventoryDate: ["2022-08-02"],
      materialName: "碳酸锂",
      inventoryQty: [3932.45],
    },
  ],
  // #8月份出货
  shipmentDashBoard: {
    // #1-7月汇总
    shipmentPie: [
      {
        customerName: "C公司",
        rate: 0.76,
      },
      {
        customerName: "非C公司",
        rate: 1.76,
      },
    ],
    // #当月情况
    summary: {
      totalShipmentQty: 7339,
      totalAchievingRate: 1.11, //进度达成
      dtl: [
        {
          achievingRate: 1.11, //进度达成
          customerName: "C公司",
          shipmentQty: 4132,
          goalQty: 4500.0,
        },
        {
          achievingRate: 1.01, //进度达成
          customerName: "非C公司",
          shipmentQty: 4132,
          goalQty: 4400.0,
        },
      ],
    },
  },
  // #历史库存情况
  historyInventory: [
    {
      inventoryDate: "5/31",
      inventoryQty: 200,
    },
  ],
};
const localData = JSON.stringify(localDataParse);