<template>
  <div>
    <el-card>
      <span class="show-text">工位:</span>
      <el-select
        v-model="OpName"
        clearable
        filterable
        placeholder="请选择工位号"
        size="small"
        style="width: 200px">
        <el-option
          v-for="item in OpNameList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          size="mini"/>
      </el-select>
      <span class="show-text">采集时间:</span>
      <el-date-picker
        v-model="date"
        placeholder="选择日期"
        type="date"
        value-format="yyyy-MM-dd HH:mm:ss"/>
      <!--      <el-date-picker-->
      <!--        v-model="collectionTime"-->
      <!--        :clearable="false"-->
      <!--        :picker-options="pickerOptions"-->
      <!--        popper-class="virtual-cell-time-picker"-->
      <!--        value-format="yyyy-MM-dd HH:mm:ss"-->
      <!--        format="yyyy-MM-dd HH:mm:ss"-->
      <!--        type="datetimerange"-->
      <!--        range-separator="-"-->
      <!--        style="width: 360px;margin-right: 16px;vertical-align: top"-->
      <!--        start-placeholder="开始时间"-->
      <!--        end-placeholder="结束时间"/>-->
      <el-button :disabled="loading" icon="el-icon-search" plain type="primary" @click="searchTable()">查询</el-button>
      <div style="margin-top: 10px;display: flex">
        <div>
          <el-table
            v-loading="loading"
            :data="tableData"
            :header-row-style="{fontSize: '18px',fontFamily:'MiSans Demibold',height: '64px',backgroundColor:'#fff'}"
            :row-style="{fontSize: '16px',fontFamily:'MiSans Regular',height: '64px'}"
            border
            element-loading-background="rgba(0, 0, 0, 0.2)"
            element-loading-spinner="el-icon-loading"
            element-loading-text="数据加载中"
            height="707"
            size="mini"
            style="width: 1001px"
            tooltip-effect="dark">
            <el-table-column align="center" label=" " type="index" width="100"/>
            <el-table-column align="center" label="工位号" width="150">
              <template slot-scope="scope">
                {{ scope.row.工位号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="小时">
              <template slot-scope="scope">
                {{ scope.row.HH }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="合格数">
              <template slot-scope="scope">
                {{ scope.row.DataCountOK }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="不合格数">
              <template slot-scope="scope">
                {{ scope.row.DataCountNG }}
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top: 10px;">
            <el-pagination
              v-if="!loading"
              :current-page="pageList"
              :page-size="pageSize"
              :page-sizes="[50, 100, 200, 300]"
              :total="total"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
          </div>
        </div>
        <div id="Echarts" style="width: 1200px; height: 640px;"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      OpName: '',
      OpNameList: '',
      showEchartsType: '1',
      date: '',
      collectionTime: [],
      tableDataExcel: [],
      loading: false,
      tableData: [],
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      pageList: 1 // 后台获取页,
    }
  },
  created() {
    this.getOpName()
    var now = new Date()
    this.date = now
    setTimeout(() => {
      this.searchTable()
    }, 500)
  },
  methods: {
    // 查询工位号
    getOpName() {
      var param = []
      var Data = this.CreateData('11', '工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.OpNameList = []
        for (const item of response.data) {
          this.OpNameList.push({ label: item.工位号, value: item.工位号 })
        }
        this.OpName = this.OpNameList[0].value
      })
    },
    // 查询
    searchTable() {
      if (this.date.length === 0) {
        this.$message.error('请选择需要查询的日期！')
        return
      }
      if (this.OpName.length === 0) {
        this.$message.error('请选择需要查询的工位号！')
        return
      }
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['工位号', this.OpName]
      param[1] = ['日期', this.date]
      var Data = this.CreateData('11', '产量管理_JPH_网页_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
        // this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
        this.initEcharts()
      })
    },
    initEcharts() {
      const data = this.tableData
      const obj = {}
      for (const item of data) {
        if (item.HH in obj) {
          obj[item.HH].合格 += item.DataCountOK
          obj[item.HH].不合格 += item.DataCountNG
        } else {
          obj[item.HH] = { 合格: item.DataCountOK, 不合格: item.DataCountNG }
        }
      }
      const xAxis = []
      const yAxis = []
      // 遍历 00 到 23 把ojb 根据小时key 取出来
      for (let i = 0; i < 24; i++) {
        const key = i < 10 ? '0' + i : i
        if (key in obj) {
          xAxis.push(key)
          yAxis.push(obj[key].合格)
        }
      }
      // for (const key in obj) {
      //   xAxis.push(key)
      //   yAxis.push(obj[key].合格)
      // }
      console.log(xAxis, yAxis)
      const doc = echarts.init(document.getElementById('Echarts'))
      doc.clear()
      doc.setOption({
        legend: {
          top: '0%',
          right: '15%', // 将图例放置在右侧
          icon: 'circle', // 设置图例的标识样式为实心圆点
          itemWidth: 10, // 设置图例标记的宽度
          itemHeight: 10, // 设置图例标记的高度
          textStyle: {
            fontSize: 14,
            color: function(params) {
              // 获取对应的系列项
              var series = option.series[0].data
              for (var i = 0; i < series.length; i++) {
                if (series[i].name === params) {
                  // 返回对应系列项的颜色
                  return series[i].itemStyle.color
                }
              }
              return '#000' // 默认颜色，如果没有匹配到
            }
          }
        },
        grid: {
          top: '15%',
          left: '7%',
          right: '5%',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisLabel: {
            interval: 0, // 显示所有标签
            fontSize: 10, // 设置x轴文字的大小
            color: '#3c3f43'
          }
        },
        yAxis: {
          name: '台',
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed' // 分隔线类型设置为虚线
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: '合格台数',
            data: yAxis, // [40, 22, 47, 39],
            type: 'bar',
            itemStyle: { color: '#4572a7' },
            barWidth: 25
          }
        ]
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.searchTable()
    }
  }
}
</script>
