<template>
  <div class="container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div class="content">
      <div class="c-left">
        <div class="left-header">
          <div>
            <img :src="titlePng" alt="logo" />
          </div>
        </div>
      </div>
      <div class="c-center">
        <div class="center-header">后悬装配线智慧系统</div>
      </div>
      <div class="c-right">
        <div class="right">
          <div class="right-head">
            <span>{{ time }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content_main">
      <div class="content_main_calendar">
        <el-col :span="6">
          <dv-border-box-12 class="items">
            <div style="margin: 5px 0 5px 10px">
              <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
              <span style="color: #fff"> 选择工艺文件</span>
            </div>
            <el-row>
              <el-table
                  ref="multipleTable"
                  :data="tableData"
                  :header-cell-style="{background:'#000d3a',color:'#ffffff',fontSize: '18px'}"
                  element-loading-text="数据加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.2)"
                  class="main"
                  tooltip-effect="dark"
                  height="830px"
                  style="width: 100%"
                  border
                  size="mini"
                  @row-click="rowClick">
                <el-table-column align="center" type="index" label="序号" width="80px" />
                <el-table-column align="center" label="文件名称">
                  <template slot-scope="scope">
                    {{ scope.row.fileName }}
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
<!--            <el-button type="primary" style="margin-left: 40px;margin-top: 10px" @click="routeJump('')">返回主页</el-button>-->
          </dv-border-box-12>
        </el-col>
        <el-col :span="17">
          <dv-border-box-12 class="items">
            <div style="margin: 5px 0 5px 10px">
              <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
              <span style="color: #fff"> 工艺文件内容【{{pdfName}}】</span>
              <span v-if="isLoaded" style="color: #ff0000">正在加载中</span>
            </div>
            <el-row style="margin: 20px 20px 0px 20px;border: 1px solid #29355e;height: 870px;">
              <iframe :src="pdfSrc" frameborder="0" style="width: 100%;height: 100%"></iframe>
            </el-row>
          </dv-border-box-12>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { action1, serverAddressDownloadFile } from '@/utils/request'
export default {
  data() {
    return {
      isLoaded: false,
      pdfName: '',
      pdfSrc: '',
      titlePng: '',
      titlePng1: '',
      timer: '',
      timer1: '',
      time: 'time',
      tableData: [],
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },

  created() {
  },
  mounted() {
    const that = this
    // 定时器部分
    this.timer = setInterval(() => {
      this.time = this.getNowTime()
    }, 1000)
    // 页面自适应大小部分
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
    })

    this.getLogo()
    // 数据库读取部分
    this.getMainPlanCountInfoData()
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer1)
  },
  methods: {
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    getNowTime() {
      const date = new Date()
      const month = this.zeroFill(date.getMonth() + 1)
      const day = this.zeroFill(date.getDate())
      const hour = this.zeroFill(date.getHours())
      const minute = this.zeroFill(date.getMinutes())
      const second = this.zeroFill(date.getSeconds())
      return (
        date.getFullYear() +
          '-' +
          month +
          '-' +
          day +
          ' ' +
          hour +
          ':' +
          minute +
          ':' +
          second
      )
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    getMainPlanCountInfoData() {
      axios.post(action1).then(res => {
        this.tableData = res.data
      })
    },
    rowClick(row) {
      if (this.isLoaded) {
        this.$message.warning('请等待！')
        return
      }
      this.pdfSrc = ''
      this.isLoaded = true
      this.pdfName = row.fileName
      axios.post(`${serverAddressDownloadFile}?name=${row.fullName}`, { }, { responseType: 'arraybuffer' }).then(res => {
        const blob = new Blob([res.data], { type: 'application/pdf;chartset=UTF-8' })
        this.pdfSrc = window.URL.createObjectURL(blob)
        this.isLoaded = false
      }).catch(() => {
        this.isLoaded = false
      })
    },
    // 处理pdf
    solvePdfUrl(content, type, fileName) {
      const bstr = atob(content)
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) { u8arr[n] = bstr.charCodeAt(n) }
      // 确定解析格式，可能可以变成img，没有深入研究
      const blob = new Blob([u8arr], { type: 'application/pdf;chartset=UTF-8' })
      return window.URL.createObjectURL(blob)
    },
    routeJump(val, state) {
      if (val.indexOf('/') !== -1) {
        val = val.substring(1)
      }
      this.$router.push({
        path: '/'
      })
      this.$router.go(0)
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../十字图片.jpg', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  },
  computed: {},
  watch: {},
  props: {},
  directives: {
    scroll: {
      bind(
        el,
        {
          value: { delay, speed } = {
            delay: 0,
            speed: 50
          }
        }
      ) {
        //  delay 延迟  //speed滚动速度
        // 数据少不滚动
        // 无缝滚动
        let scrollInterval
        setTimeout(() => {
          scrollInterval = setInterval(goScroll, speed)
        }, delay)
        el.addEventListener('mouseenter', () => {
          clearInterval(scrollInterval)
        })
        el.addEventListener('mouseleave', () => {
          scrollInterval = setInterval(goScroll, speed)
        })

        function goScroll() {
          const scrollTotalHeight = JSON.parse(JSON.stringify(el.scrollTop))
          el.scrollTop++
          if (scrollTotalHeight === el.scrollTop) {
            el.scrollTop = 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #000d3a;
  color: white;

  .content {
    width: 100%;
    height: 6%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 5px 0 20px 0;
    border-bottom: 2px solid #3d4a61;
    .c-left {
      width: 25%;
      background-color: #000d3a;
      .left-header {
        background-color: #000d3a;
        display: flex;
        align-items: center;
        margin-top: 20px;
        img {
          margin-left: 50px;
          height: 50px;
        }
        span {
          font-size: 3.5rem;
          margin-left: 1rem;
        }
      }
    }

    .c-center {
      width: 50%;
      background-color: #000d3a;
      box-sizing: border-box;
      .center-header {
        background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bold;
        letter-spacing: 15px;
      }
    }

    .c-right {
      width: 25%;
      background-color: #000d3a;
      .right-header {
        background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
      }
    }
  }
}
.right {
  width: 100%;
  height: 100%;
  background-color: #000d3a;
  padding-left: 1.5%;
  box-sizing: border-box;
  .right-head {
    height: 8%;
    display: flex;
    justify-content: flex-end;
    span {
      margin: 36px 25px 25px 25px;
      font-weight: 700;
      font-size: 35px;
      color: #fff;
    }
  }

  .main {
    height: 90%;
    .top {
      width: 100%;
      height: 35%;

      .cook-list {
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
      }
      .spot-check {
        span {
          font-size: 1rem;
        }
      }
    }

    .center {
      width: 100%;
      height: 35%;

      .center-main {
        width: 100%;
        height: 90%;
        .center-left {
          height: 100%;
          .left-top {
            height: 50%;
            display: flex;

            div {
              width: 33.33%;
              height: 100%;
            }
          }
          .left-bottom {
            height: 50%;
          }
        }

        .center-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          ::v-deep .row-item {
            .ceil {
              padding: 0;
            }
          }
        }
      }
      .year-plan {
        span {
          font-size: 1rem;
        }
      }
    }

    .bottom {
      width: 100%;
      height: 33%;
      .bottom-top {
        display: flex;
        width: 100%;
        height: 45%;
        .andong-left {
          width: 60%;
          height: 100%;
          > span {
            color: #fff;
          }

          .analyse {
            width: 100%;
            height: 90%;
          }
        }

        .andong-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          .call {
            width: 100%;
            height: 90%;
          }
        }
      }
      .bottom-bottom {
        width: 100%;
        height: 44.5%;

        ::v-deep .header-item {
          font-size: 6px;
          padding: 0;
        }
        ::v-deep .row-item {
          font-size: 4px;
          padding: 0;
          .ceil {
            padding: 0;
          }
        }
      }
    }
  }
}
.content_main {
  .content_main_calendar {
    margin: 20px 20px;
    ::v-deep .el-form-item__label {
      color: #fff!important;
    }
    .items {
      height: 940px;
      padding: 1rem;
      box-sizing: border-box;
      .item-head {
        height: 10rem;
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-content: center;
        box-sizing: border-box;
        padding-bottom: 1rem;

        background: linear-gradient(90deg, #043079 50%, transparent 0)
        repeat-x,
        linear-gradient(90deg, #043079 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y;
        background-size: 0px 10px, 20px 10px, 10px 0px, 10px 0px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;

        animation: linearGradientMove 0.3s infinite linear;
      }
      .opStatus_all {
        background-color: #21ffff;
        border-radius: 10px;
        font-size:20px;
        border: 1px solid #409eff;
        width: 260px ;
        height: 270px;
        margin-left: 45px;
        margin-bottom: 10px;
      }
      .opStatus_single {
        display: flex;
        justify-content: flex-start;
        margin: 10px 0 10px 10px;
      }
      .opStatus_single_value {
        width: 100px;
        background-color: #aaaaaa;
        text-align: left;
        padding: 0 3px;
        color: #000d3a;
        border-radius: 3px;
      }
      @keyframes linearGradientMove {
        100% {
          background-position: -20px 0, 20px 100%, 0 20px, 100% -20px;
        }
      }

      .item-content {
        box-sizing: border-box;
        margin-top: 50px;
        box-sizing: border-box;

        .bg {
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
        }

        .btns {
          position: absolute;
          margin-left: 1rem;
          z-index: 999;

          div {
            border: 2px solid #244d71;
            background-color: #000d3a;
            color: #ffffff;
            padding: 0.5rem 2rem;
            margin: 0.5rem 0;
            font-size: 1.2rem;
          }
        }
      }

      .item-head > div {
        display: flex;
        align-items: center;
        width: 15rem;

        img {
          height: 4.5rem;
          width: 4.5rem;
          object-fit: cover;
        }

        .data {
          display: flex;
          flex-direction: column;

          .data-value {
            font-size: 1.5rem;
            font-weight: bold;
          }
        }
      }
    }
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table td, .el-table th.is-leaf {
  border: 1px solid #7b8eb4;
  font-size: 16px;
}
::v-deep.el-table tbody tr:hover > td {
  background-color: transparent !important
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  color: rgb(255, 255, 255) !important;
}
::v-deep .el-table td, .el-table th {
  padding: 8px 0 !important;
}
</style>
