<template>
  <div class="app-container">
    <div class="left-content">
      <div class="top-box">
        <div class="device-info">
          <div class="info-title">
            <i class="iconfont icon-shebeixinxi" style="color: #46B3F8;font-size: 30px;"></i>
            {{ tLang('device', '设备信息') }}
          </div>
          <div class="info-content">
            <el-row justify="space-evenly">
              <el-col :span="12">{{ tLang('device', '设备编码') }}:</el-col>
              <el-col :span="12">{{ info.code }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">{{ tLang('device', '设备名称') }}:</el-col>
              <el-col :span="12">{{ info.name }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">{{ tLang('device', '运行时长') }}:</el-col>
              <el-col :span="12">{{ info.runTime || 0 + tLang('common', '分钟') }}</el-col>
            </el-row>
          </div>
        </div>
        <div class="user-info">
          <div class="info-title">
            <svg-icon icon-class="renyuanxinxi" style="font-size: 30px;" />
            {{ tLang('user', '人员信息') }}
          </div>
          <div class="info-content">
            <el-row justify="space-evenly">
              <el-col :span="12">{{ tLang('user', '操作员') }}:</el-col>
              <el-col :span="12">{{ info.userName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">{{ tLang('user', '人员ID') }}:</el-col>
              <el-col :span="12">{{ info.userCode }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="produce-info">
        <div class="info-title">
          <svg-icon icon-class="shengchanxinxi" style="font-size: 30px;" />
          {{ tLang('produce', '生产信息') }}
        </div>
        <div class="info-content">
          <el-row justify="space-evenly">
            <el-col :span="6">{{ tLang('product', '产品名称') }}:</el-col>
            <el-col :span="6">{{ info.productionName }}</el-col>
            <el-col :span="6">{{ tLang('product', '产品编码') }}:</el-col>
            <el-col :span="6">{{ info.productionCode }}</el-col>
          </el-row>
          <el-row v-for="item in info.info">
            <el-col :span="4">{{ tLang('product', '面线信息') }}:</el-col>
            <el-col :span="4">{{ item.surfacelineCode }}</el-col>
            <el-col :span="4">{{ tLang('product', '底线信息') }}:</el-col>
            <el-col :span="4">{{ item.bottomlineCode }}</el-col>
            <el-col :span="4">{{ tLang('product', '梭芯信息') }}:</el-col>
            <el-col :span="4">{{ item.shuttlecoreCode }}</el-col>
          </el-row>
        </div>
      </div>
      <div class="barchart">
        <v-chart ref="barChart" class="chart-class" :option="bar_option" />
      </div>
    </div>
    <div class="right-content">
      <div class="zhangli">
        <v-chart ref="lineChart" class="chart-class" :option="line_option" />
      </div>
      <div class="table">
        <el-table :data="qualityList" stripe style="width: 100%">
          <el-table-column type="index" :label="tLang('common', '序号')" align="center" width="60" />
          <el-table-column :label="tLang('quality', '产品序列号')" align="center" prop="serialNumber" />
          <el-table-column :label="tLang('quality', '开始时间')" align="center" prop="starttime">
            <!-- <template #default="scope">
              <span>{{ parseTime(scope.row.starttime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
            </template> -->
          </el-table-column>
          <el-table-column :label="tLang('quality', '完成时间')" align="center" prop="endtime">
            <!-- <template #default="scope">
              <span>{{ parseTime(scope.row.endtime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
            </template> -->
          </el-table-column>
          <el-table-column :label="tLang('product', '底线编码')" align="center" prop="bottomlineCode" />
          <el-table-column :label="tLang('product', '面线编码')" align="center" prop="surfacelineCode" />

          <el-table-column :label="tLang('quality', '状态')" align="center" prop="state">
            <template #default="scope">
              <div>
                <el-tag type="success" size="mini" v-if="scope.row.state === '0'">{{ tLang('common', '合格') }}</el-tag>
                <el-tag type="danger" size="mini" v-else-if="scope.row.state === '1'">{{ tLang('common', '不合格')
                  }}</el-tag>
                <el-tag type="warning" size="mini" v-else>{{ tLang('common', '未完成') }}</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getBaseInfoNew, halfHourOutputPassInfo, getNewestFiveInfo,getTensionInfo } from "@/api/home";

import { getCurrentInstance } from "vue";


const { proxy } = getCurrentInstance();
let pass = ref([0]);
let noPass = ref([0]);
let bar_option = ref({
  title: {
    text: proxy.tLang('home', '产量'),
    textStyle: {
      color: '#797979'
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: [proxy.tLang('common', '合格'), proxy.tLang('common', '不合格')],
    textStyle: {
      color: '#797979'
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['0'],
      axisLabel: {
        fontSize: 12,
        color: '#797979'
      },
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {

        fontSize: 12,
        color: '#797979'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: proxy.tLang('common', '合格'),
      type: 'bar',
      stack: 'Ad',
      shape: 'circle',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#91cc75'
      },
      barWidth:'30%',
      data: [0]
    },
    {
      name: proxy.tLang('common', '不合格'),
      type: 'bar',
      stack: 'Ad',
      shape: 'circle',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#c81623'
      },
      barWidth:'30%',
      data: [0],
      label: {
        show: true,
        position: 'top',
        color: "#797979",
        formatter: function (p) {
          let sum = +pass.value[p.dataIndex] + (+noPass.value[p.dataIndex]);
          return sum;
        }
      }
    }
  ]
})

let line_option = ref({
  title: {
    text: proxy.tLang('home', '张力值'),
    left: '0',
    textStyle: {
      color: '#000'
    }
  },
  xAxis: {
    name: proxy.tLang('home', '针数'),
    type: 'category',
    data: [1],
    boundaryGap: false,
    axisLine: {
      onZero: false    //-----------重点
    }
  },
  yAxis: {
    name: proxy.tLang('home', '张力'),
    type: 'value',
    min: -10,
    max: 10
  },
  series: [
    {
      name: proxy.tLang('home', '针1'),
      data: [0],
      type: 'line',
      smooth: true
    },
    {
      name: proxy.tLang('home', '针2'),
      data: [0],
      type: 'line',
      smooth: true
    }
  ]
})

let timer = null;
let info = ref({});
let qualityList = ref([]);
let barChart = ref(null);
let lineChart = ref(null);

function getData() {
  getNewestFiveInfo().then(res => {
    qualityList.value = res.data;
  });
  getBaseInfoNew().then(res => {
    info.value = res.data;
  });
  getTensionInfo().then(res => {
    let round = [];
    let one = [];
    let two = [];
    res.data.forEach(item => {
      round.push(item.round);
      one.push(...item.one);
      two.push(...item.two);
    });
    line_option.value.xAxis.data = one.map((item, index) => index + 1);
    line_option.value.series[0].data = one;
    line_option.value.series[1].data = two;
  })
  halfHourOutputPassInfo().then(res => {
    pass.value = res.data.pass;
    noPass.value = res.data.noPass;
    bar_option.value.series[0].data = res.data.pass;
    bar_option.value.series[1].data = res.data.noPass;
    bar_option.value.xAxis[0].data = res.data.timePass;
  });

}
onMounted(() => {
  getData();
  timer = setInterval(() => {
    getData();
  }, 30000);
});
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 828px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: auto;

  .left-content {
    width: 50%;
    height: 100%;
    margin-right: 15px;

    .info-title {
      height: 50px;
      font-size: 26px;
      color: #797979;
      font-weight: bold;
      line-height: 50px;

      .iconfont {
        margin-right: 10px;
      }
    }

    .info-content {
      width: 100%;
      height: 158px;
      font-size: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .top-box {
      width: 100%;
      height: 208px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;



      .device-info {
        width: 48%;
        height: 100%;
        padding: 5px 5px 5px 10px;
        box-sizing: border-box;
        background-color: #E9F3FA;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      }

      .user-info {
        width: 48%;
        height: 100%;
        padding: 5px 5px 5px 10px;
        box-sizing: border-box;
        background-color: #FAF1EB;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      }
    }

    .produce-info {
      width: 100%;
      height: 208px;
      padding: 5px 5px 5px 10px;
      box-sizing: border-box;
      background-color: #F0F8F0;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
    }

    .barchart {
      width: 100%;
      height: calc(100% - 416px - 30px);
      padding: 5px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);


    }


  }

  .chart-class {
    width: 100%;
    height: 100%;
  }

  .right-content {
    flex: 1;
    height: 100%;

    .zhangli {
      width: 100%;
      height: 431px;
      padding: 5px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
    }

    .table {
      width: 100%;
      height: calc(100% - 416px - 30px);
      padding: 5px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }

  }
}
</style>
