<!--
 * @FilePath: \screenFront\src\views\electronicControl\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: "Aging_Rack_5", id: 1 ,label:'老化架',time:"2023-3-28 15:25:02",status:false},
  { name: "Graph_Plotter_4", id: 2 ,label:'绘图仪',time:"2023-3-28 15:35:02",status:false},
  { name: "Aging_Table_5", id: 3 ,label:'老化台',time:"2023-3-28 15:45:02",status:false},
  { name: "Aging_Table_6", id: 4 ,label:'老化台',time:"2023-3-28 15:55:02",status:false},
  { name: "Graph_Plotter_1", id: 5 ,label:'绘图仪',time:"2023-3-28 16:05:02",status:false},
];
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)
let devTipList = val.alarmList.length>0?val.alarmList:data2
devTipRef.value.setData(devTipList);
}
onMounted(() => {
  
});
defineExpose({
  setDataList
})
</script>

<style scoped>
.content-right {
  width: 100%;
}
.el-col{
  margin-bottom:20px;
}
</style>
