<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="16">
          <el-row>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar1.value" :valueError="calendar1.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar2.value" :valueError="calendar2.valueError" :begin="calendar2.begin" :end="calendar2.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar3.value" :valueError="calendar3.valueError" :begin="calendar3.begin" :end="calendar3.end" :weeks="calendar3.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar4.value" :valueError="calendar4.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar5.value" :valueError="calendar5.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar6.value" :valueError="calendar6.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar7.value" :valueError="calendar7.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar8.value" :valueError="calendar8.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar9.value" :valueError="calendar9.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar10.value" :valueError="calendar10.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar11.value" :valueError="calendar11.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content_main_calendar_div">
                <calendar :value="calendar12.value" :valueError="calendar12.valueError" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" />
              </div>
            </el-col>
          </el-row>
          <el-row>
<!--            <el-button type="primary" style="position: absolute;left: 5px;top:0" @click="routeJump('')">返回主页</el-button>-->
            <div style="text-align: center">
              <span style="font-size: 40px">连续安全运行</span>
              <span style="font-size: 45px;margin: 0 20px;color: #00893d">{{safeDays}}</span>
              <span style="font-size: 40px">天</span>
            </div>
          </el-row>
        </el-col>
        <el-col :span="8">
          <div style="height: 850px;display: flex;justify-content: center;align-items: center;">
            <img :src="titlePng1" width="500px" alt="sss" />
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
import calendar from '@/components/Calendar/calendar.vue'
import axios from 'axios'

export default {
  data() {
    return {
      calendar1: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // 月的显示
        events: {} // 上不上班
      },
      calendar2: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar3: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar4: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar5: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar6: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar7: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar8: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar9: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar10: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar11: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      calendar12: {
        value: [],
        valueError: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      titlePng: '',
      titlePng1: '',
      safeDays: 0,
      timer: '',
      timer1: '',
      time: 'time',
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },
  components: {
    calendar
  },
  created() {
    // this.dt_IframeUrl = window.ConnectConfig.dt_IframeUrl
  },
  mounted() {
    const that = this
    // 定时器部分
    this.timer = setInterval(() => {
      this.time = this.getNowTime()
    }, 1000)
    // 页面自适应大小部分
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
    })

    this.getLogo()

    // 数据库读取部分
    this.getMainPlanCountInfoData()

    this.timer = setInterval(() => {
      this.getMainPlanCountInfoData()
    }, 3000)
    this.timer1 = setInterval(() => {
    }, 3000)
  },
  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() {
      const data = this.CreateData1('11', 'TV_安全十字_查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length > 0) {
          this.safeDays = res.data[0].安全天数
          console.log(res.data)
          this.calendar1.value = [res.data[0].年, res.data[0].月, 1]
          this.calendar2.value = [res.data[1].年, res.data[1].月, 1]
          this.calendar3.value = [res.data[2].年, res.data[2].月, 1]
          this.calendar4.value = [res.data[3].年, res.data[3].月, 1]
          this.calendar5.value = [res.data[4].年, res.data[4].月, 1]
          this.calendar6.value = [res.data[5].年, res.data[5].月, 1]
          this.calendar7.value = [res.data[6].年, res.data[6].月, 1]
          this.calendar8.value = [res.data[7].年, res.data[7].月, 1]
          this.calendar9.value = [res.data[8].年, res.data[8].月, 1]
          this.calendar10.value = [res.data[9].年, res.data[9].月, 1]
          this.calendar11.value = [res.data[10].年, res.data[10].月, 1]
          this.calendar12.value = [res.data[11].年, res.data[11].月, 1]
          this.calendar1.valueError = res.data[0].事故天.split(',')
          this.calendar2.valueError = res.data[1].事故天.split(',')
          this.calendar3.valueError = res.data[2].事故天.split(',')
          this.calendar4.valueError = res.data[3].事故天.split(',')
          this.calendar5.valueError = res.data[4].事故天.split(',')
          this.calendar6.valueError = res.data[5].事故天.split(',')
          this.calendar7.valueError = res.data[6].事故天.split(',')
          this.calendar8.valueError = res.data[7].事故天.split(',')
          this.calendar9.valueError = res.data[8].事故天.split(',')
          this.calendar10.valueError = res.data[9].事故天.split(',')
          this.calendar11.valueError = res.data[10].事故天.split(',')
          this.calendar12.valueError = res.data[11].事故天.split(',')
        }
      })
    },
    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 {
    .content_main_calendar_div {
      height: 290px;
      padding: 5px;
    }
  }
}

::v-deep .calendar td{
  height: 38px;
}
</style>
