<!--
 * @Author: zwq
 * @Date: 2021-07-19 15:18:30
 * @LastEditors: zhp
 * @LastEditTime: 2022-01-25 16:50:41
 * @Description:
-->
<template>
  <div id="container" ref="container" class="visual-container">
    <el-row
      class="container-title"
      :style="{ height: beilv * 88 + 'px', lineHeight: beilv * 88 + 'px', fontSize: beilv * 32 + 'px' }"
    >
      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
      产线监控 产线一
      <el-button
        type="text"
        class="title-button"
        :style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
        @click="changeFullScreen"
      >
        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
        <svg-icon v-else icon-class="fullScreenView" />
      </el-button>
    </el-row>
    <el-row class="container-main">
      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
        <el-col :span="8">
          <el-row>
            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
              <base-container title="当前班组情况" title-icon="nowteam" :beilv="beilv">
                <!-- <base-container title="当前班组情况" title-icon="nowteam" :beilv="beilv" :height="360"> -->
                <now-team />
              </base-container>
            </el-col>
            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
              <base-container title="质量缺陷信息" title-icon="qualitydefect" :beilv="beilv">
                <!-- <base-container title="质量缺陷信息" title-icon="qualitydefect" :beilv="beilv" :height="296"> -->
                <base-table
                  :page="1"
                  :limit="6"
                  :beilv="beilv"
                  :table-config="qualityTableProps"
                  :table-data="qualityList"
                />
              </base-container>
            </el-col>
          </el-row>
        </el-col>

        <!-- <el-row>
            <el-col :style="{margin: 8 * beilv + 'px' + ' 0'}" :span="24">
              <base-container :beilv="beilv" :height="672">
                <base-video :video-height="624" :beilv="beilv" />
                <video-footer :beilv="beilv" />
              </base-container>
            </el-col>
          </el-row> -->

        <el-col :span="16">
          <el-row>
            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
              <base-container title="产量情况" title-icon="yield" :beilv="beilv">
                <!-- <base-container title="产量情况" title-icon="yield" :beilv="beilv" :height="318"> -->
                <top-radio-group />
                <three-bar-chart :name-list="clNameList" :data-list="clDataList" :height="192" :beilv="beilv" />
              </base-container>
            </el-col>
            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
              <base-container title="产线产量情况" title-icon="yieldline" :beilv="beilv" :height="338">
                <top-radio-group />
                <linear-bar-chart
                  :name-list="cxNameList"
                  :data-list="cxDataList"
                  :height="212"
                  :beilv="beilv"
                  :show-legend="true"
                />
              </base-container>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
        <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="15">
          <base-container title="质量缺陷信息月度总览" title-icon="qualitydefectmonth" :beilv="beilv" :height="256">
            <div class="visual-select">
              选择月(每天平均值)&nbsp;
              <el-select v-model="modelMonth" size="mini" placeholder="">
                <el-option key="1" value="12月" label="12月" default />
              </el-select>
            </div>
            <base-table
              :page="1"
              :limit="5"
              :show-index="false"
              :beilv="beilv"
              :table-config="qualityMonthTableProps"
              :table-data="qualityMonthList"
            />
          </base-container>
        </el-col>
        <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="9">
          <base-container title="质量缺陷信息年度总览" title-icon="qualitydefectyear" :beilv="beilv" :height="256">
            <div class="visual-select">
              选择年(每天平均值)&nbsp;
              <el-select v-model="modelYear" size="mini" placeholder="">
                <el-option key="1" value="2021年" label="2021年" default />
              </el-select>
            </div>
            <base-table
              :page="1"
              :limit="5"
              :show-index="false"
              :beilv="beilv"
              :table-config="qualityYearTableProps"
              :table-data="qualityYearList"
            />
          </base-container>
        </el-col>
      </el-row>

      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv" />
    </el-row>
  </div>
</template>

<script>
import baseContainer from './components/baseContainer'
import baseTable from './components/baseTable'
import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
import nowTeam from './components/ProductionLineMonitoringCockpit/nowTeam.vue'
import TopRadioGroup from './components/topRadioGroup'
import BaseTable from './components/baseTable.vue'
// import BaseVideo from './components/baseVideo.vue'
import ThreeBarChart from './components/threeBarChart.vue'
import LinearBarChart from './components/linearBarChart'
// import VideoFooter from './components/videoFooter'

const qualityTableProps = [
  {
    prop: 'createTime',
    label: '发生时间'
  },
  {
    prop: 'content',
    label: '缺陷内容'
  },
  {
    prop: 'productLine',
    label: '产线'
  },
  {
    prop: 'process',
    label: '发生工序'
  }
]

const qualityList = [
  { createTime: '12:00:01', content: '报废', productLine: '钢一线', process: '磨边' },
  { createTime: '11:20:51', content: '报废', productLine: '钢二线', process: '镀膜' },
  { createTime: '11:05:21', content: '报废', productLine: '钢三线', process: '钢化' },
  { createTime: '11:02:16', content: '报废', productLine: '钢四线', process: '钢化' },
  { createTime: '10:50:49', content: '报废', productLine: '钢五线', process: '包装' },
  { createTime: '10:30:35', content: '报废', productLine: '钢六线', process: '镀膜' }
]

const qualityMonthTableProps = [
  {
    prop: 'teamName',
    label: '班组名称'
  },
  {
    prop: '1',
    label: '2021/12/1'
  },
  {
    prop: '2',
    label: '2号'
  },
  {
    prop: '3',
    label: '3号'
  },
  {
    prop: '4',
    label: '4号'
  },
  {
    prop: '5',
    label: '5号'
  },
  {
    prop: '6',
    label: '6号'
  },
  {
    prop: '7',
    label: '7号'
  },
  {
    prop: '8',
    label: '8号'
  },
  {
    prop: '9',
    label: '9号'
  },
  {
    prop: '10',
    label: '10号'
  },
  {
    prop: '11',
    label: '11号'
  },
  {
    prop: '12',
    label: '12号'
  },
  {
    prop: '13',
    label: '13号'
  },
  {
    prop: '14',
    label: '14号'
  },
  {
    prop: '15',
    label: '15号'
  },
  {
    prop: '16',
    label: '16号'
  },
  {
    prop: '17',
    label: '17号'
  },
  {
    prop: '18',
    label: '18号'
  },
  {
    prop: '19',
    label: '19号'
  },
  {
    prop: '20',
    label: '20号'
  },
  {
    prop: '21',
    label: '21号'
  },
  {
    prop: '22',
    label: '22号'
  },
  {
    prop: '23',
    label: '23号'
  },
  {
    prop: '24',
    label: '24号'
  },
  {
    prop: '25',
    label: '25号'
  },
  {
    prop: '26',
    label: '26号'
  },
  {
    prop: '27',
    label: '27号'
  },
  {
    prop: '28',
    label: '28号'
  },
  {
    prop: '29',
    label: '29号'
  },
  {
    prop: '30',
    label: '30号'
  },
  {
    prop: '31',
    label: '31号'
  }
]

const qualityMonthList = [
  {
    teamName: '早班执行一组',
    '1': '97.2%',
    '2': '98.3%',
    '3': '97.3%',
    '4': '98.5%',
    '5': '98.67%',
    '6': '97.54%',
    '7': '97.43%',
    '8': '97.65%',
    '9': '97.34%',
    '10': '98.34%',
    '11': '98.76%',
    '12': '97.43%',
    '13': '98.65%',
    '14': '97.86%',
    '15': '98.77%',
    '16': '98.54%',
    '17': '97.59%',
    '18': '98.76%',
    '19': '98.55%',
    '20': '97.87%',
    '21': '98.76%',
    '22': '99.11%',
    '23': '98.12%',
    '24': '98.86%',
    '25': '98.34%',
    '26': '97.34%',
    '27': '98.54%',
    '28': '97.65%',
    '29': '98.76%',
    '30': '98.45%',
    '31': '97.65%'
  },
  {
    teamName: '早班执行二组',
    '1': '97.22%',
    '2': '98.37%',
    '3': '97.38%',
    '4': '98.52%',
    '5': '98.76%',
    '6': '97.55%',
    '7': '97.32%',
    '8': '97.23%',
    '9': '97.45%',
    '10': '98.75%',
    '11': '98.34%',
    '12': '97.34%',
    '13': '98.23%',
    '14': '97.65%',
    '15': '98.43%',
    '16': '98.57%',
    '17': '97.34%',
    '18': '98.86%',
    '19': '98.43%',
    '20': '97.34%',
    '21': '98.75%',
    '22': '99.43%',
    '23': '98.45%',
    '24': '98.32%',
    '25': '98.34%',
    '26': '97.43%',
    '27': '98.54%',
    '28': '97.64%',
    '29': '98.65%',
    '30': '98.43%',
    '31': '97.23%'
  },
  {
    teamName: '中班执行一组',
    '1': '98.43%',
    '2': '98.23%',
    '3': '97.53%',
    '4': '98.45%',
    '5': '98.87%',
    '6': '98.74%',
    '7': '98.13%',
    '8': '97.47%',
    '9': '97.99%',
    '10': '98.323%',
    '11': '98.99%',
    '12': '97.23%',
    '13': '98.23%',
    '14': '97.34%',
    '15': '98.65%',
    '16': '98.58%',
    '17': '97.64%',
    '18': '98.23%',
    '19': '98.32%',
    '20': '98.27%',
    '21': '98.23%',
    '22': '99%',
    '23': '98.62%',
    '24': '98.56%',
    '25': '98.44%',
    '26': '97.54%',
    '27': '98.23%',
    '28': '98.25%',
    '29': '98.72%',
    '30': '98.35%',
    '31': '97.25%'
  },
  {
    teamName: '中班执行三组',
    '1': '97.23%',
    '2': '98.23%',
    '3': '97.31%',
    '4': '98.53%',
    '5': '98.64%',
    '6': '97.34%',
    '7': '97.34%',
    '8': '97.23%',
    '9': '97.32%',
    '10': '98.23%',
    '11': '98.32%',
    '12': '97.55%',
    '13': '98.67%',
    '14': '97.23%',
    '15': '98.23%',
    '16': '98.64%',
    '17': '97.65%',
    '18': '98.19%',
    '19': '98.23%',
    '20': '97.17%',
    '21': '98.17%',
    '22': '99.38%',
    '23': '98.47%',
    '24': '98.23%',
    '25': '98.74%',
    '26': '97.23%',
    '27': '97.32%',
    '28': '97.78%',
    '29': '98.67%',
    '30': '98.23%',
    '31': '97.68%'
  },
  {
    teamName: '晚班执行一组',
    '1': '97.32%',
    '2': '98.34%',
    '3': '97.37%',
    '4': '98.58%',
    '5': '98.87%',
    '6': '97.34%',
    '7': '97.23%',
    '8': '97.35%',
    '9': '97.64%',
    '10': '98.33%',
    '11': '98.76%',
    '12': '97.23%',
    '13': '98.33%',
    '14': '97.44%',
    '15': '98.34%',
    '16': '98.43%',
    '17': '97.43%',
    '18': '98.43%',
    '19': '98.66%',
    '20': '97.45%',
    '21': '98.36%',
    '22': '99.14%',
    '23': '98.57%',
    '24': '98.32%',
    '25': '98.23%',
    '26': '97.78%',
    '27': '98.23%',
    '28': '97.23%',
    '29': '98.34%',
    '30': '98.54%',
    '31': '97.67%'
  }
]

const qualityYearTableProps = [
  {
    prop: 'teamName',
    label: '班组名称'
  },
  {
    prop: '1',
    label: '2021/1'
  },
  {
    prop: '2',
    label: '2月'
  },
  {
    prop: '3',
    label: '3月'
  },
  {
    prop: '4',
    label: '4月'
  },
  {
    prop: '5',
    label: '5月'
  },
  {
    prop: '6',
    label: '6月'
  },
  {
    prop: '7',
    label: '7月'
  },
  {
    prop: '8',
    label: '8月'
  },
  {
    prop: '9',
    label: '9月'
  },
  {
    prop: '10',
    label: '10月'
  },
  {
    prop: '11',
    label: '11月'
  },
  {
    prop: '12',
    label: '12月'
  }
]

const qualityYearList = [
  {
    teamName: '早班执行一组',
    '1': '98.2%',
    '2': '98.23%',
    '3': '98.23%',
    '4': '98.23%',
    '5': '98.67%',
    '6': '98.65%',
    '7': '98.43%',
    '8': '97.43%',
    '9': '98.43%',
    '10': '98.66%',
    '11': '98.45%',
    '12': '98.32%'
  },
  {
    teamName: '早班执行二组',
    '1': '98.76%',
    '2': '98.72%',
    '3': '98.6%',
    '4': '99%',
    '5': '98.4%',
    '6': '98.3%',
    '7': '99%',
    '8': '97.3%',
    '9': '98.2%',
    '10': '98.63%',
    '11': '98.32%',
    '12': '98.32%'
  },
  {
    teamName: '中班执行一组',
    '1': '98.5%',
    '2': '98.34%',
    '3': '97.65%',
    '4': '98.37%',
    '5': '98.53%',
    '6': '98.38%',
    '7': '98.32%',
    '8': '98.34%',
    '9': '98.58%',
    '10': '98.45%',
    '11': '97.45%',
    '12': '97.34%'
  },
  {
    teamName: '中班执行三组',
    '1': '97.65%',
    '2': '97.54%',
    '3': '98.44%',
    '4': '98.23%',
    '5': '97.43%',
    '6': '98.43%',
    '7': '98.34%',
    '8': '97.34%',
    '9': '98.34%',
    '10': '98.33%',
    '11': '98.56%',
    '12': '98.3%'
  },
  {
    teamName: '晚班执行一组',
    '1': '98.4%',
    '2': '98.65%',
    '3': '98.34%',
    '4': '98.34%',
    '5': '98.65%',
    '6': '98.34%',
    '7': '98.45%',
    '8': '98.34%',
    '9': '98.43%',
    '10': '98.34%',
    '11': '98.34%',
    '12': '97.43%'
  }
]

const clNameList = [
  '早班执行一组',
  '早班执行二组',
  '早班执行三组',
  '中班执行一组',
  '中班执行二组',
  '中班执行三组',
  '晚班执行一组',
  '晚班执行二组',
  '晚班执行三组'
]
const clDataList = [
  {
    topColor: '#7CB6FF',
    bottomColor: '#166BD6',
    name: '产量',
    data: [100, 150, 121, 97, 140, 180, 11, 180]
  }
]

const cxNameList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const cxDataList = [
  {
    topColor: '#9DD5FF',
    bottomColor: '#1295FF',
    name: '钢一线',
    data: [100, 150, 121, 97, 140, 111, 127]
  },
  {
    topColor: '#FF8BC3',
    bottomColor: '#EB46A1',
    name: '钢二线',
    data: [110, 110, 151, 77, 110, 98, 22]
  },
  {
    topColor: '#85F6E9',
    bottomColor: '#2EC6B4',
    name: '钢三线',
    data: [110, 120, 171, 287, 40, 160, 127]
  },
  {
    topColor: '#9496FF',
    bottomColor: '#6567FF',
    name: '钢四线',
    data: [140, 157, 122, 27, 240, 112, 21]
  },
  {
    topColor: '#F68E8A',
    bottomColor: '#E95552',
    name: '钢五线',
    data: [170, 180, 127, 17, 340, 111, 98]
  },
  {
    topColor: '#FFE873',
    bottomColor: '#E7AE2A',
    name: '钢六线',
    data: [140, 160, 121, 57, 170, 99, 123]
  }
]

export default {
  name: 'ProductionMonitoringCockpit',
  components: {
    baseContainer,
    baseTable,
    nowTeam,
    BaseTable,
    // BaseVideo,
    TopRadioGroup,
    ThreeBarChart,
    LinearBarChart
    // VideoFooter
  },
  data() {
    return {
      beilv: 1,
      isFullScreen: false,
      qualityTableProps,
      qualityList,
      qualityMonthTableProps,
      qualityMonthList,
      qualityYearTableProps,
      qualityYearList,
      clNameList,
      clDataList,
      cxNameList,
      cxDataList,
      modelMonth: '12月',
      modelYear: '2021年'
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    isFullScreen: function(val) {
      if (val) {
        this.beilv = document.body.offsetWidth / 1920
      } else {
        this.beilv = document.getElementById('container').offsetWidth / 1920
      }
    },
    'sidebar.opened': function(val) {
      console.log(val)
      if (!this.isFullScreen) {
        setTimeout(() => {
          this.beilv = document.getElementById('container').offsetWidth / 1920
        }, 300)
      }
    }
  },
  created() {
    this.init()
    console.log(this.qualityMonthTableProps)
    console.log(this.qualityMonthList)
  },
  mounted() {
    this.beilv = document.getElementById('container').offsetWidth / 1920
    window.addEventListener('resize', () => {
      if (this.isFullScreen) {
        this.beilv = document.body.offsetWidth / 1920
      } else {
        this.beilv = document.getElementById('container').offsetWidth / 1920
      }
    })
  },
  methods: {
    change() {
      this.isFullScreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    },
    changeFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs.container)
    }
  }
}
</script>

<style lang="scss" scoped>
.visual-container {
  width: 100%;
  min-width: 960px;
  background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
  background-size: cover;
  .container-title {
    width: 100%;
    background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
    background-size: 100% 100%;
    color: #00fff0;
    text-align: center;
    .title-button {
      color: #00fff0;
      font-size: 20px;
      position: absolute;
    }
  }
  .container-main {
    padding: 16px;
  }
  .visual-select {
    position: absolute;
    right: 1em;
    top: 2em;
    background: rgba($color: #31878c, $alpha: 0.29);
    padding-left: 1em;
    border-radius: 0.2em;
  }
}
</style>

<style lang="scss">
.visual-container {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
  }

  ::-webkit-scrollbar-track-piece {
    background: #1b2b3d;
  }

  ::-webkit-scrollbar-corner {
    background: #1b2b3d;
  }

  ::-webkit-scrollbar-track {
    width: 6px;
    background: #1b2b3d;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba($color: #5bc4be, $alpha: 0.7);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    transition: background-color 0.3s;
    cursor: pointer;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba($color: #5bc4be, $alpha: 1);
  }
  .el-input {
    min-height: 10px;
  }
  .el-input__inner {
    background-color: rgba($color: #31878c, $alpha: 0.29);
    border: rgba($color: #31878c, $alpha: 0.29);
    color: aliceblue;
  }
  .el-divider--vertical {
    height: 174px;
    width: 1px;
    border: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.15);
    margin-left: 3em;
  }
}
</style>
