<template>
  <div class="main">
    <div class="topBar">
      <div class="logo">
        <div class="img"></div>
        <div class="text">以精立业 &nbsp;&nbsp;&nbsp; 以质取胜</div>
      </div>
      <div class="title">精力轴承圆锥内圈装配线-{{ lineNo.split('_')[1] }}</div>
    </div>
    <div class="dataBox">
      <div class="item">
        <div class="name">生产型号：</div>
        <div class="value" @click="updateValue('机型号')">{{ dateObject.productionModel }}</div>
      </div>
      <div class="item">
        <div class="name">班次目标：</div>
        <div class="value" @click="updateValue('班次目标')">{{ dateObject.shiftTargeting }}</div>
      </div>
      <div class="item">
        <div class="name">当前批次：</div>
        <div class="value" @click="updateValue('当前批次')">{{ dateObject.theCurrentBatch }}</div>
      </div>
      <div class="item">
        <div class="name">班次产量：</div>
        <div class="value">{{ dateObject.shiftOutput }}</div>
      </div>
      <div class="item">
        <div class="name">批次数量：</div>
        <div class="value">{{ dateObject.batchQuantity }}</div>
      </div>
      <div class="item">
        <div class="name">完成率：</div>
        <div class="value">{{ dateObject.completionRate }}%</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {inject, onMounted, reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage, ElMessageBox} from 'element-plus'

const ExecDatabaseByParam = inject('ExecDatabaseByParam')

const lineNo = ref('')
const lineUrl = ref('')
const dateObject = reactive({
  productionModel: '', // 生产型号
  shiftTargeting: '',  // 班次目标
  theCurrentBatch: '', // 当前批次
  shiftOutput: '', // 班次产量
  batchQuantity: '', // 批次数量
  completionRate: '', // 完成率
})
var timer1 = null;
onMounted(() => {
  const url = new URL(window.location.href); // 获取URL参数
  console.log(url.searchParams)
  lineNo.value = url.searchParams.get('lineNo');
  getLineUrl()
  getData()
  timer1 = setInterval(() => {
    getData()
  }, 1000 * 5)
})

const getLineUrl = () => {
  for (let key in window.g.lineUrlList) {
    if (key == lineNo.value) {
      lineUrl.value = window.g.lineUrlList[key]
    }
  }
  if (lineUrl.value == '') {
    ElMessage.error('未找到对应产线配置URL 请配置对应URL信息')
  }
}

const getData = async () => {
  // var param = []
  // let response = await ExecDatabaseByParam('11', '小看板_数据查询', param)
  // if (response.data.length > 0) {
  //   let data = response.data[0]
  //   dateObject.productionModel = data.生产型号
  //   dateObject.shiftTargeting = data.班次目标
  //   dateObject.theCurrentBatch = data.当前批次
  //   dateObject.shiftOutput = data.班次产量
  //   dateObject.batchQuantity = data.批次数量
  //   dateObject.completionRate = data.完成率
  // }

  var param = []
  var data = {name: '小看板_数据查询', param: JSON.stringify(param), type: "11", ModularID: "/MiniTV/index"}
  let response = await axios.post(lineUrl.value, data)
  if (response.data.length > 0) {
    let data = response.data[0]
    dateObject.productionModel = data.生产型号
    dateObject.shiftTargeting = data.班次目标
    dateObject.theCurrentBatch = data.当前批次
    dateObject.shiftOutput = data.班次产量
    dateObject.batchQuantity = data.批次数量
    dateObject.completionRate = data.完成率
  }
}

const updateValue = async (name) => {
  const {value} = await ElMessageBox.prompt('请输入新值', '提示')
  var param = []
  param.push({name: '列名', value: name})
  param.push({name: '值', value: value})
  var data = {name: '小看板_数据修改', param: JSON.stringify(param), type: "11", ModularID: "/MiniTV/index"}
  let response = await axios.post(lineUrl.value, data)
  if (response.data.length > 0) {
    console.log(response)
    if (response.data[0].result == 1) {
      ElMessage.success(response.data[0].msg)
      await getData()
    } else {
      ElMessage.error(response.data[0].msg)
    }
  } else {
    ElMessage.error('数据异常')
  }
}

</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-color: #22b04c;
  padding-top: 6vh;
  box-sizing: border-box !important;

  .topBar {
    height: 15vh;
    line-height: 15vh;
    width: 94vw;
    background-color: #fff;
    display: flex;
    margin: 0 auto;

    .logo {
      width: 25%;
      height: 100%;

      .img {
        width: 100%;
        height: 70%;
        background-image: url("/public/TopLogo.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .text {
        height: 30%;
        width: 100%;
        font-weight: bold;
        font-size: 1.8vw;
        line-height: 2vw;
        text-align: center;
        letter-spacing: 0.4vw;
      }
    }

    .title {
      font-size: 5vw;
      width: 75%;
      text-align: center;
    }
  }

  .dataBox {
    margin: 10vh auto 0 auto;
    width: 90vw;
    display: flex;
    flex-wrap: wrap;
    font-size: 3vw;
    color: #fff;

    .item {
      width: 50%;
      display: flex;
      margin: 5vh 0;

      .name {
        width: 40%;
        text-align: right;
      }

      .value {
        width: 60%;
        overflow: auto;
      }
    }
  }
}
</style>