<!--
 * @FilePath: \screenFront\src\views\Offsite\child\childContent\right.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-13 09:09:03
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="content-right">
    <el-row>
      <el-col>
        <chart
          :title="DevType.title"
          :option="DevType.option"
          ref="chartref"
        ></chart>
      </el-col>
      <el-col>
        <devtip ref="devTipRef" :title="t('messages.DevReminder')"></devtip>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import chart from "@/components/assembly/chart.vue";
import devtip from "./chart/devTip.vue";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let props = defineProps<{
  width: number;
  height: number;
}>();
let chartref = ref(null);
let devTipRef = ref(null);
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, 2, 1, 0);

  //   a.oHeight=a.oHeight
  //修改高度
  devTipRef.value.setchartWH(a.oWidth, a.oHeight);
  chartref.value.setchartWH(a.oWidth, a.oHeight);
  // tableref.value.setchartWH(a.oWidth, a.oHeight*3);
  // offsitegatewayref.value.setchartWH(a.oWidth, a.oHeight);
};
let DevType = reactive({
  title: "",
  option: {
    title: {
      text: t('messages.DevType'),
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      type: "scroll",
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["20%", "50%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          // borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: true,
          formatter: "{b}: {c}",
        },
        labelLine: {
          show: true,
        },
        data: [],
      },
    ],
  },
});
// let data2 = [
//         {
//             "name": "全自动铺布机",
//             "label": "50945",
//             "ts": "2023-05-12 08:36:37",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡全自动铺布机，时间：2023-05-11 17:36:37",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "电脑绣花机",
//             "label": "0201112",
//             "ts": "2023-05-12 08:36:37",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡电脑绣花机，时间：2023-05-11 17:36:37",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "全自动双头垫板式冲孔机",
//             "label": "1170824#",
//             "ts": "2023-05-12 08:36:47",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡全自动双头垫板式冲孔机，时间：2023-05-11 17:36:47",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "三合一裁床",
//             "label": "040720",
//             "ts": "2023-05-12 08:37:05",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:三合一裁床，时间：2023-05-11 17:37:05",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "全自动任意转单针缝纫机",
//             "label": "RHUL-01",
//             "ts": "2023-05-12 08:37:05",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡全自动任意转单针缝纫机，时间：2023-05-11 17:37:05",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "特种缝纫机",
//             "label": "RPS-1108-165",
//             "ts": "2023-05-12 08:37:05",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡特种缝纫机，时间：2023-05-11 17:37:05",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "全自动缝纫机(零等待)",
//             "label": "170321NS064",
//             "ts": "2023-05-12 08:37:06",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡全自动缝纫机(零等待)，时间：2023-05-11 17:37:06",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "激光雕刻切割机",
//             "label": "170322798",
//             "ts": "2023-05-12 08:37:06",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡激光雕刻切割机，时间：2023-05-11 17:37:06",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "电脑绣花机(三合一)",
//             "label": "1885",
//             "ts": "2023-05-12 08:37:25",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡电脑绣花机(三合一)，时间：2023-05-11 17:37:25",
//             "remark": "常规警报数据-设备离线"
//         },
//         {
//             "name": "全自动电脑裁床",
//             "label": "50231",
//             "ts": "2023-05-12 08:37:25",
//             "status": "false",
//             "deptId": null,
//             "context": "设备离线提醒:富怡全自动电脑裁床，时间：2023-05-11 17:37:25",
//             "remark": "常规警报数据-设备离线"
//         }
//     ]
function setDataList(val:any){
  let echartdata=[]
val.typenum.forEach(res=>{
  echartdata.push({name:res.name,value:res.counts})
})
DevType.option.series[0].data=echartdata
chartref.value.changeData(DevType.option)

devTipRef.value.setData(val.data2);
}
onMounted(() => {
  
});
defineExpose({
  setDataList
})
</script>

<style scoped>
.content-right {
  width: 100%;
}
</style>
