<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\MicrofactoryDev\content\top.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-10 10:36:35
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="content-left">
    <table1 :title="tabledata.title" :data="tabledata" ref="tableref"></table1>
    <topSwiper ref="swiperref"> </topSwiper>
    <chart
      :title="SewingTime.title"
      :option="SewingTime.option"
      ref="chartref"
    ></chart>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import chart from "@/components/assembly/chart.vue";
import topSwiper from "../component/swiper.vue";
import table1 from "@/components/assembly/RotationTable.vue";
import { useMicrofactoryDevStore } from "@/store/module/MicrofactoryDev";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useMicrofactoryDevStore();
let props = defineProps<{
  width: number;
  height: number;
}>();
let chartref = ref(null);
let tableref = ref();
let swiperref = ref(null);
let tabledata = reactive({
  title: t('messages.MicrofactoriesDevinfo'),
  data: {
    header: [t('messages.SerialNum'), t('messages.DevName'), t('messages.DevStatus'), `${t('messages.runTime')}(min)`],
    data: [],
    headerBGC: "#3469F3",
    oddRowBGC: "#100C2A",
    evenRowBGC: "#100C2A",
    rowNum: 10,
    waitTime: 3000,
    carousel: "page",
    hoverPause: true,
    align: [
      "center",
      "center",
      "center",
      "center",
      "center",
      "center",
      "center",
      "center",
      "center",
    ],
  },
});
let SewingTime = reactive({
  title: "",
  option: {
    title: {
      text: "",
      textStyle: {
        color: "rgb(255,255,255,0.9)",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      textStyle: {
        color: "rgb(255,255,255,0.9)",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",

      // boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: "category",
      name: "min",
      axisLabel: {
        interval: 0, //控制X轴刻度全部显示
        // rotate: 45, //倾斜角度
      },
      data: ["暂无数据"],
    },
    series: [
      {
        name: t('messages.SewingTime'),
        type: "bar",
        itemStyle: {
          // color: function(params) {
          // 	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
          //     var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
          //     return colorList[params.dataIndex]
          // }
          color: " #d48265",
        },
        data: [],
        label: {
          normal: {
            show: true,
            position: "right",
            textStyle: {
              color: "rgb(255,255,255,0.9)",
            },
          },
        },
      },
    ],
  },
});
watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);
function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return;
  box(val.width, val.height);
}
const box = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 3, 0);
  chartref.value.setchartWH(a.oWidth, a.oHeight);
  tableref.value.setchartWH(a.oWidth, a.oHeight);
  swiperref.value.setchartWH(a.oWidth, a.oHeight);
};

//监听设备列表
watch(
  () => store.devlist,
  (newVal, oldVal) => {
    changedevlist(newVal);
    swiperref.value.changeImagelist(newVal);
  },
  { deep: true, flush: "post" }
);
//修改设备列表
function changedevlist(val: any) {
  let list = [];
  val.forEach((res, index) => {
    list.push([
      index + 1,
      res.name,
      JSON.parse(res.deviceStatus) ? t('messages.onLine') : t('messages.offline'),
      res.runTime,
    ]);
  });
  tabledata.data.data = list;
  tableref.value.changeData(tabledata.data);
}
//监听微工厂网关状态及在线、离线设备数量
watch(
  () => store.gateway,
  (newVal, oldVal) => {
    swiperref.value.changeData(newVal);
  },
  { deep: true, flush: "post" }
);
//监听缝纫时间
watch(
  () => store.SewingTime,
  (newVal, oldVal) => {
    let y = [];
    let x = [];
    newVal.forEach((res) => {
      y.push(res.name);
      x.push(res.workTime);
    });
    SewingTime.option.yAxis.data = y;
    SewingTime.option.series[0].data = x;
    chartref.value.changeData(SewingTime.option);
  },
  { deep: true, flush: "post" }
);
</script>

<style scoped>
.content-left {
  width: 100%;
  display: flex;
}
</style>
