<template>
  <el-dialog
    :model-value="modelValue"
    fullscreen
    :title="props.title"
    destroy-on-close
    :before-close="() => emits('update:modelValue', false )"
  >
    <el-row>
      <el-col :span="20">
        <el-row
          style="height: 20vh"
        >
          <v-chart
            class="chart1"
            autoresize
            :option="option1"
          />
        </el-row>

        <el-row
          style="height: 20vh"
        >
          <v-chart
            class="chart2"
            autoresize
            :option="option2"
          />
        </el-row>

        <el-row
          style="height: 20vh"
        >
          <v-chart
            class="chart3"
            autoresize
            :option="option3"
          />
        </el-row>

        <el-col style="height: 10vh; text-align: center; margin-top: 10px">
          <el-button
            class="btn-right"
            style="background: #5B79D7;"
          >
            上一班次
          </el-button>

          <span
            style="font-size: 26px;vertical-align: middle;margin: 20px"
          >当前班次:{{ currentFrequency }}</span>

          <el-button
            class="btn-right"
            style="background: #5B79D7;"
          >
            下一班次
          </el-button>
        </el-col>

      </el-col>

      <el-col :span="4">
        <div
          style="font-size: 22px; margin-left: 30px"
        >设备状态：</div><br>
        <el-button
          class="btn-right"
          :class="{ 'active': activeBtn === '待单'}"
          @click="handleBtnActive"
        >待单</el-button><br>
        <el-button
          class="btn-right"
          :class="{ 'active': activeBtn === '维修' }"
          @click="handleBtnActive"
        >维修</el-button><br>
        <el-button
          class="btn-right"
          :class="{ 'active': activeBtn === '保养' }"
          @click="handleBtnActive"
        >保养</el-button><br>
        <el-button
          class="btn-right"
          :class="{ 'active': activeBtn === '测试' }"
          @click="handleBtnActive"
        >测试</el-button><br>
        <el-button
          class="btn-right"
          :class="{ 'active': activeBtn === '打样' }"
          @click="handleBtnActive"
        >打样</el-button><br>
        <el-button
          class="btn-right"
          :class="{ 'active': activeBtn === '待料' }"
          @click="handleBtnActive"
        >待料</el-button><br>
        <el-button
          class="btn-right"
          :class="{ 'active': activeBtn === '装版' }"
          @click="handleBtnActive"
        >装版</el-button><br>
        <el-button
          class="btn-right"
          :class="{ 'active': activeBtn === '生产' }"
          @click="handleBtnActive"
        >生产</el-button><br>
      </el-col>
    </el-row>
  </el-dialog>

</template>
<script>
export default {
  name: 'Shebeizhuangtai',
}
// 机台数据详情
import service from '@/utils/request'
export const getMachineDetail = (params) => {
  return service({
    url: '/mes_server/facility/MachineDetail',
    method: 'get',
    params
  })
}

</script>

<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
import { defineEmits, defineProps, provide, ref } from 'vue'

const props = defineProps(['modelValue', 'title'])
const emits = defineEmits(['update:modelValue'])

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  ScatterChart,
  GridComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
])
// provide(THEME_KEY, 'dark')

const activeBtn = ref(null)
const handleBtnActive = (e) => {
  activeBtn.value = e.target.innerText
}

const currentFrequency = ref('2023-01-02 08:30')

const option1 = ref({
  xAxis: {
    data: ['待单', '维修', '保养', '测试', '打样', '待料', '装版', '生产'],
  },
  yAxis: {
    name: '状态时长（小时）',
    nameLocation: 'end',
    nameGap: 5,
    nameTextStyle: {
      align: 'left',
      verticalAlign: 'bottom',
    },
  },
  grid: {
    left: '8%',
    right: '2%',
    top: '22%',
    bottom: '15%',
  },
  series: {
    type: 'bar',
    label: {
      show: true,
      position: 'top',
    },
    data: [
      0, 0, 0, 0, 0, 0, 2.39, 19.36,
    ],
  },
  textStyle: {
    fontWeight: 'bolder',
    fontSize: 16,

  },
})

// 生成横坐标（每分钟一个点，显示时间格式为 "HH:mm"）
const data = []
for (let i = 510; i <= 1230; i++) { // 08:30 到 20:30 的分钟数范围
  const hours = Math.floor(i / 60)
  const minutes = i % 60
  const time = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes)
  data.push([time, Math.random() * 1000])
}
const xAxisData = data.map(item => item?.[0])

const option2 = ref({
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 59, // 控制显示的刻度标签间隔，每小时一个
    },
  },
  yAxis: {
    name: '实时产量',
    nameLocation: 'end',
    nameGap: 5,
    nameTextStyle: {
      align: 'left',
      verticalAlign: 'bottom',
    }
  },
  grid: {
    left: '8%',
    right: '2%',
    top: '22%',
    bottom: '15%',
  },
  tooltip: {
    trigger: 'axis'
  },
  series: {
    name: '速度',
    type: 'line',
    data: data,
  },
  textStyle: {
    fontWeight: 'bolder',
    fontSize: 16,
  },
})

const option3 = ref({
  xAxis: {
    // type: 'value',
    data: xAxisData,
    axisLabel: {
      interval: 59, // 控制显示的刻度标签间隔，每小时一个
    },
  },
  yAxis: {
    name: '检验时间',
    nameLocation: 'end',
    nameGap: 5,
    nameTextStyle: {
      align: 'left',
      verticalAlign: 'bottom'
    },
    axisLine: {
      show: true,
    },
    data: ['IPQC检验', '机台检验', '首件与过程'],
  },
  tooltip: {
    trigger: 'item'
  },
  grid: {
    left: '8%',
    right: '2%',
    top: '22%',
    bottom: '15%',
  },
  series: {
    type: 'scatter',
    symbol: 'arrow',
    symbolSize: 20,
    label: {
      show: true,
      position: 'right',
      formatter: '{@value}' // 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
    },
    data: [
      ['08:30', 'IPQC检验'],
      ['10:30', 'IPQC检验'],
      ['11:30', '机台检验'],
      ['17:30', '机台检验'],
    ],
  },
  textStyle: {
    fontWeight: 'bolder',
    fontSize: 16,
  },
})

</script>

<style scoped>
.active {
  background-color: #528B34 !important;
}

.btn-right {
  width: 100px;
  height: 50px;
  margin-bottom: 5px;
  margin-left: 30px;
  color: #FFFFFF;
  background-color: #C6BEC4;
  font-size: 20px;
  font-style: italic;
}
</style>
