<template>
  <div>
    <el-row :gutter="10" class="main-box">
      <el-col :span="4">
        <div class="left-box">
          <el-tree
            :data="treeData"
            node-key="name"
            :props="defaultTime"
            default-expand-all
            :highlight-current="true"
            @node-click="clickDevice"
            ref="deviceTree"
          >
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-row :gutter="10">
              <el-col :span="18">
                <div class="top-left">
                  <div>
                    <search-bar
                      :formConfigs="formConfig"
                      @headBtnClick="buttonClick"
                    />
                    <base-table
                      :page="listQuery.current"
                      :limit="listQuery.size"
                      :page-width="50"
                      :table-props="tableProps"
                      :table-data="tableData"
                      :max-height="tableH"
                    />
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="top-right">
                  <div>
                    <span class="title">{{ eqName }}计划产能</span>
                    <svg-icon
                      icon-class="device_edit"
                      class="icon-style"
                      @click="editPower"
                    />
                  </div>
                  <el-row>
                    <el-col :span="12">
                      <base-table
                        :table-props="tableProps2"
                        :table-data="tableData2"
                        :max-height="tableH"
                      />
                    </el-col>
                    <el-col :span="12">
                      <base-table
                        :table-props="tableProps2"
                        :table-data="tableData3"
                        :max-height="tableH"
                      />
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <div class="right-bottom">
              <device-oee-line ref="oeeLine" :chartMsg="tableData" />
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 编辑 -->
    <base-dialog
      dialogTitle="产能维护"
      :dialogVisible="centervisible"
      :close-on-click-modal="false"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :before-close="handleCancel"
    >
      <product-power-edit ref="productPower" @successSubmit="successSubmit" />
    </base-dialog>
  </div>
</template>
<script>
import { getTreeData } from '@/api/app'
import { tableHeight, timeFormatter } from '@/utils/index'
import {
  performanceAnalysisGet,
  performanceAnalysisPlan
} from '@/api/deviceManagement'
import productPowerEdit from './../components/productPowerEdit.vue'
import deviceOeeLine from './../components/deviceOeeLine.vue'
// import moment from 'moment'
const tableProps = [
  {
    prop: 'recordDate',
    label: '时间',
    minWidth: 160,
    filter: timeFormatter
  },
  {
    prop: 'operationHours',
    label: '开动时长(h)',
    minWidth: 100
  },
  {
    prop: 'loadHours',
    label: '负荷时长(h)',
    minWidth: 100
  },
  {
    prop: 'actualCapacity',
    label: '实际产能',
    minWidth: 90
  },
  {
    prop: 'planCountDay',
    label: '设计产能',
    minWidth: 90
  },
  {
    prop: 'activation',
    label: '时间开动率',
    minWidth: 100
  },
  {
    prop: 'performance',
    label: '性能开动率',
    minWidth: 100
  },
  {
    prop: 'combinedEfficiency',
    label: '综合效率OEE',
    minWidth: 110
  },
  {
    prop: 'failureHours',
    label: '故障时长',
    minWidth: 90
  },
  {
    prop: 'failurePercent',
    label: '设备故障率',
    minWidth: 100
  }
]
const tableProps2 = [
  {
    prop: 'month',
    label: '月份',
    width: 60
  },
  {
    prop: 'value',
    label: '设计产能',
    minWidth: 80
  }
]
export default {
  name: 'deviceOEEPage',
  data() {
    return {
      treeData: [],
      defaultTime: {
        children: 'children',
        label: 'name'
      },
      eqName: '',
      chooseMonth: '',
      formConfig: [
        {
          type: 'datePicker',
          label: '月份选择',
          dateType: 'month',
          format: 'yyyy-MM',
          valueFormat: 'yyyy-MM',
          placeholder: '月份选择',
          param: 'timePosition',
          defaultSelect: '',
          width: 200
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        }
      ],
      listQuery: {
        current: 1,
        size: 500,
        timePosition: '',
        name: ''
      },
      tableProps,
      tableData: [],
      tableH: tableHeight(214) / 2 - 75,
      tableProps2,
      tableData2: [],
      tableData3: [],
      centervisible: false
    }
  },
  components: { productPowerEdit, deviceOeeLine },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(214) / 2 - 75
    })
    this.setDefaultVal()
    this.getTree()
  },
  methods: {
    setDefaultVal() {
      let date = new Date()
      let year = date.getFullYear()
      let month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      this.formConfig[0].defaultSelect = year + '-' + month
      this.listQuery.timePosition = year + '-' + month
    },
    getTree() {
      getTreeData().then((res) => {
        this.treeData = res.data
        this.eqName = res.data[0].children[0].children[0].name
        this.listQuery.name = this.eqName
        setTimeout(() => {
          this.$refs.deviceTree.setCurrentKey(this.eqName)
        }, 100)
        this.getList()
        this.getPlan()
      })
    },
    getList() {
      // 获取设备OEE
      performanceAnalysisGet({ ...this.listQuery }).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
      this.$refs.oeeLine.getChart()
    },
    buttonClick(val) {
      if (val.btnName === 'search') {
        this.listQuery.timePosition = val.timePosition
        this.getList()
        this.getPlan()
      }
    },
    getPlan() {
      // 获取计划产能
      let date = new Date(this.listQuery.timePosition)
      let year = date.getFullYear()
      let arr = [
        { month: '1月', value: null, type: 'january' },
        { month: '2月', value: null, type: 'february' },
        { month: '3月', value: null, type: 'march' },
        { month: '4月', value: null, type: 'april' },
        { month: '5月', value: null, type: 'may' },
        { month: '6月', value: null, type: 'june' },
        { month: '7月', value: null, type: 'july' },
        { month: '8月', value: null, type: 'august' },
        { month: '9月', value: null, type: 'september' },
        { month: '10月', value: null, type: 'october' },
        { month: '11月', value: null, type: 'november' },
        { month: '12月', value: null, type: 'december' }
      ]
      performanceAnalysisPlan({ name: this.eqName, year: year }).then((res) => {
        if (res.code === 0 && !!res.data) {
          let obj = res.data
          for (let i = 0; i < arr.length; i++) {
            arr[i].value = obj[arr[i].type]
          }
        } else {
          for (let i = 0; i < arr.length; i++) {
            arr[i].value = null
          }
        }
        this.tableData2 = arr.slice(0, 6)
        this.tableData3 = arr.slice(6, 12)
      })
    },
    clickDevice(val) {
      if (!val.children) {
        // 设备
        this.listQuery.name = val.name
        this.eqName = val.name
        // this.getList()
        // this.getPlan()
      }
    },
    editPower() {
      this.centervisible = true
      this.$nextTick(() => {
        this.$refs.productPower.init(this.listQuery)
      })
    },
    handleCancel() {
      this.$refs.productPower.formClear()
      this.centervisible = false
    },
    handleConfirm() {
      this.$refs.productPower.submitForm()
    },
    successSubmit() {
      this.handleCancel()
      this.getPlan()
    }
  }
}
</script>
<style lang="scss" scoped>
.main-box {
  width: 100%;
  padding: 0px 6px 0 16px;
  .left-box {
    padding-top: 16px;
    border-radius: 8px;
    background-color: #fff;
  }
  .top-left,
  .top-right,
  .right-bottom {
    padding: 16px 10px 0;
    border-radius: 8px;
    background-color: #fff;
  }
  .left-box {
    overflow-y: auto;
    height: calc(100vh - 204px);
  }
  .top-left,
  .top-right,
  .right-bottom {
    height: calc((100vh - 214px) / 2);
  }
  .top-right,
  .top-left {
    .title {
      display: inline-block;
      margin-right: 8px;
      margin-bottom: 22px;
    }
    .title::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #0b58ff;
      border-radius: 1px;
      margin-right: 8px;
      vertical-align: middle;
    }
    .icon-style {
      font-size: 14px;
      margin-left: 18px;
      cursor: pointer;
    }
  }
  .right-bottom {
    margin-top: 10px;
  }
}
</style>
