import { Layout, Image, Col, Row } from 'antd';

import 'antd/dist/reset.css';
import './App.css';
import axios from 'axios';
import { Component } from 'react';
import { withRouter } from 'react-router-dom';
import TweenOne from 'rc-tween-one';
import PathPlugin from 'rc-tween-one/lib/plugin/PathMotionPlugin';
const { Header, Footer, Content } = Layout;
TweenOne.plugins.push(PathPlugin);
const headerStyle = {
  textAlign: 'center',
  color: '#fff',
  height: "5vh",
  paddingInline: 50,

  backgroundColor: 'rgb(49, 70, 89)',
};
const contentStyle = {
  textAlign: 'center',
  minHeight: "90vh",
  backgroundColor: 'black',

};
const footerStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: 'rgb(49, 70, 89)',
  fontSize: '2vw'
};
const empStyle = {
  lineHeight: '5vh',
  color: 'black',
  marginTop: "2px",
  fontFamily: "Yahei",
  textAlign: 'center',
  fontSize: '2vw'
}
const item = {
  employee_no: "M00001",
  name: "測試人員一",
  mfg_no: "電梯ID",
  fire: { colname: "火災", icon: "#", desc: "動作後取消呼梯指令,返基站開門停機" },
  screen: { colname: "光幕", icon: "#", desc: "光束被遮斷時,重新開門" },
  special_use: { colname: "專用", icon: "#", desc: "VIP模式,隻響應轎內指令" },
  open_lengthen: { colname: "開延長", icon: "#", desc: "延長電梯的開門保持時間" },
  fully_loaded: { colname: "滿載行駛", icon: "#", desc: "滿載時沿途層站不停靠" },
  returning: { colname: "再平層", icon: "#", desc: "載重變化時,自動識別並重新拉平層" },
  customer: "客戶名稱",
  spec: "規格",
  type: "機種",
  running: "運轉方式",
  panel_battery: 'PANEL 動力電源',
  panel_no: "PANEL編碼",
  motor: "馬達規格",
  door: "門機型號",
  hoisting_machine: "曳引機",
  electrocircuit: "電路型號",
  opb: "OPD",
  ind: "IND"
};




class Board extends Component {
  constructor(props) {
    super(props);
    //四個看闆資料
    this.state = {
      win1: item,
      win2: item,
      win3: item,
      win4: item,
      moment: null,
      paused: false,
      reverse: false,
      seq: 1,
      start: 0,  //從數據庫第0條開始讀
      total_record: 0
    };

  }
  componentDidMount() {
    const id = this.props.match;
    this.setState({ seq: id.params.seq });
    this.interval();


  }

  interval = () => {

    setInterval(() => this.fetchKabanData(), 20000);
  };
  //每次取四條記錄,
  fetchKabanData = async () => {
    const { seq, start } = this.state;
    let data = await axios.get(`https://www.masada.com.tw/kanban_api/index.php?kind=cc&seq=${seq}&start=${start}`)
      .then(function (response) {
        return {
          start: response.data[0],
          win1: response.data[1],
          win2: response.data[2],
          win3: response.data[3],
          win4: response.data[4],
          paused: false,
          reverse: false,
          moment: 0,
        }

      })
      .catch(function (error) {
        console.log(error);
      })
      .finally(function () {
        // always executed
      });
    this.setState(data, () => {
      this.setState({
        moment: null,
      });
    });

  }

  render() {
    let { win1, win2, paused, reverse, moment } = { ...this.state };
    let items = [win1, win2];
    return (
      <div>

        <Layout>
          <Header style={headerStyle}>
            <Row>
              <Col span={1}><Image
                width={"8vw"} src="../kb/masada.svg"
                preview={false}
              /></Col>
              <Col span={7} offset={7} style={{ fontSize: "1.5vw", textAlign: "center" }}  ><span>控製櫃看板</span>
              </Col>
              <Col span={1} offset={5}>
              </Col>
            </Row>
          </Header>

          <Layout >
            <Content style={contentStyle}>
              <Row style={{ height: "95vh", width: "100vw" }} gutter={[2, 2]}>
                {
                  items.map(function (element, index) {
                    return <Col key={index} span={12} style={empStyle} className={"col-empl"}>
                      <Row className={"員工信息"} style={{ backgroundColor: "#61dafb" }}>
                        <Col style={{ height: "5vh", fontSize: '2vw' }} span={24} >
                          <span style={{ textAlign: "top" }}>姓名:{element.name || ""}  </span>
                          <span style={{ textAlign: "top" }}>員工編號:{element.employee_no || ""} </span>
                          <span style={{ textAlign: "top" }}>電梯ID:{element.mfg_no || ""}  </span>
                        </Col>
                      </Row>
                      <Row className={'測試信息錶 '} style={{ width: "100%", }}>
                        <Col
                          style={{
                            height: "5vh",
                            backgroundColor: 'gray',
                            width: "100%",
                            color: "white",
                            fontSize: '2vw',
                            backdropFilter: " blur('3px')"
                          }}>測試信息錶
                        </Col>
                      </Row>

                      <Row gutter={[6, 2]} className={`電梯ID信息 test-up test-up-win${index}`} style={{ width: "100%" }}>
                        <Col
                          style={{ height: "45vh", fontSize: "1vw" }}
                          span={24} >
                          <Row style={{ height: '4vw' }}>
                            <Col offset={1} className={"test-up-title"} span={4}>火&nbsp;災</Col>
                            <Col span={3}  >
                              <Image preview={false} style={{ margin: "0 auto" }}
                                width={"2vw"} src="../kb/fire.svg"
                              /></Col>
                            <Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.fire.desc || ""}</Col>
                            <Col span={2} >
                              <svg width="35" height="26" version="1.2"
                                style={{ display: 'inline', transform: "scale(2.5)", margin: "0 auto" }}
                              >
                                <TweenOne
                                  animation={{ type: "from", SVGDraw: 0, duration: 1000 }}
                                  paused={paused}
                                  moment={moment}
                                  reverse={reverse}
                                  style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
                                  component="path"
                                  d="M2 18 ,L8 25 ,L20 10"
                                />
                              </svg>

                            </Col>
                          </Row>

                          <Row style={{ height: '4vw' }} >
                            <Col offset={1} className={"test-up-title"} span={4}>光&nbsp;幕</Col>
                            <Col span={3}>
                              <Image preview={false}
                                width={"2vw"} src="../kb/screen.svg"
                              /></Col>
                            <Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.screen.desc || " screen"}
                            </Col>
                            <Col span={2} >
                              <svg width="35" height="26" version="1.2"
                                style={{ display: 'inline', transform: "scale(2.5)" }}
                              >
                                <TweenOne
                                  animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 1000 }}
                                  style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
                                  paused={paused}
                                  moment={moment}
                                  reverse={reverse}
                                  component="path"
                                  d="M2 18 ,L8 25 ,L20 10"
                                />
                              </svg>

                            </Col>
                          </Row>
                          <Row style={{ height: '4vw' }} >
                            <Col offset={1} className={"test-up-title"} span={4}>專用</Col>
                            <Col span={3}>  <Image preview={false}
                              width={"2vw"} src="../kb/special_use.svg"
                            /></Col>
                            <Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.special_use.desc || ""}</Col>
                            <Col span={2} >
                              <svg width="35" height="26" version="1.2"
                                style={{ display: 'inline', transform: "scale(2.5)" }}
                              >
                                <TweenOne
                                  animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 2000 }}
                                  style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
                                  paused={paused}
                                  moment={moment}
                                  reverse={reverse}
                                  component="path"
                                  d="M2 18 ,L8 25 ,L20 10"
                                />
                              </svg>
                            </Col>
                          </Row>
                          <Row style={{ height: '4vw' }} >
                            <Col offset={1} className={"test-up-title"} span={4}>開延長</Col>
                            <Col span={3}>  <Image preview={false}
                              width={"2vw"} src="../kb/open_lengthen.svg"
                            /></Col>
                            <Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}  >{element.open_lengthen.desc || ""}</Col>
                            <Col span={2} >
                              <svg width="35" height="26" version="1.2"
                                style={{ display: 'inline', transform: "scale(2.5)" }}
                              >
                                <TweenOne
                                  animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 3000 }}
                                  style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
                                  paused={paused}
                                  moment={moment}
                                  reverse={reverse}
                                  component="path"
                                  d="M2 18 ,L8 25 ,L20 10"
                                />
                              </svg>

                            </Col>

                          </Row>
                          <Row style={{ height: '4vw' }} >
                            <Col offset={1} className={"test-up-title"} span={4}>滿&nbsp;載</Col>
                            <Col span={3}>     <Image preview={false}
                              width={"2vw"} src="../kb/fully_loaded.svg"
                            /></Col>
                            <Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.fully_loaded.desc || ""}</Col>
                            <Col span={2} >
                              <svg width="35" height="26" version="1.2"
                                style={{ display: 'inline', transform: "scale(2.5)" }}
                              >
                                <TweenOne
                                  animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 4000 }}
                                  style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
                                  paused={paused}
                                  moment={moment}
                                  reverse={reverse}
                                  component="path"
                                  d="M2 18 ,L8 25 ,L20 10"
                                />
                              </svg>

                            </Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"test-up-title"} span={4}>再平層</Col>
                            <Col span={3}>
                              <Image preview={false} style={{ margin: "0 auto" }}
                                width={"2vw"} src="../kb/returning.svg"
                              />
                            </Col>
                            <Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.returning.desc || ""}</Col>
                            <Col span={2} >
                              <svg width="35" height="26" version="1.2"
                                style={{ display: 'inline', transform: "scale(2.5)" }}
                              >
                                <TweenOne
                                  animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 4500 }}
                                  style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
                                  paused={paused}
                                  moment={moment}
                                  reverse={reverse}
                                  component="path"
                                  d="M2 18 ,L8 25 ,L20 10"
                                />
                              </svg>

                            </Col>
                          </Row>
                        </Col>
                      </Row>

                      <Row className={`電梯ID信息 mfg-down mfg-down-win${index}`}
                        style={{ marginTop: "1vh", width: "100%" }} >
                        <Col style={{ height: "40vh", lineHeight: "3vh" }} span={24} >
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>電梯ID：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.mfg_no || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>客戶名稱：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.customer || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>規格：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.spec || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>機種：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.type || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>運轉方式：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.running || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>PANNEL動力電源：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.panel_battery || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>PANNEL編碼：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.panel_no || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>馬達規格：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.motor || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>門機型號：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}> {element.door || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>曳引機型號：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.hoisting_machine || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>安全電路型號：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.electrocircuit || ""}</Col>
                          </Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>主OPB型式：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.opb || ""}</Col></Row>
                          <Row>
                            <Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>IND型式：</Col>
                            <Col span={14} style={{ fontSize: "1.5vw" }}>{element.ind || ""}</Col>
                          </Row>
                        </Col>
                      </Row>
                    </Col>
                  })

                }
              </Row>
            </Content>
          </Layout>
          <Footer style={footerStyle}>Footer</Footer>
        </Layout>

      </div>
    );
  }
}

export default withRouter(Board);