<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\InPlantProducts\content\bottom.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:30:38
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
  <div class="content-left">
    <el-row>
      <el-col :span="5">
        <!-- <installtable ref="install1" :title="'汽车军团 设备安装进度'"></installtable> -->
        <!-- <installtable ref="install2" :title="'服装军团 设备安装进度'"></installtable> -->
        <el-row>
          <el-col :span="24"
            ><installtable
              ref="install1"
              :color="['#ee6666', '#a14646']"
              :title="t('messages.QiCheDevSchedule')"
            ></installtable
          ></el-col>
          <el-col :span="24"
            ><installtable
              ref="install2"
              :color="['#5470C6', '#384a81']"
              :title="t('messages.FuZhuangDevSchedule')"
            ></installtable
          ></el-col>
        </el-row>
      </el-col>
      <el-col :span="14">
        <devList ref="devlist1" :title="t('messages.InPlantProductsDevList')"></devList>
      </el-col>
      <el-col :span="5">
        <installtable
          ref="install3"
          :color="['#FAC858', '#ac8b40']"
          :title="t('messages.JiaFangDevSchedule')"
        ></installtable>
        <installtable
          ref="install4"
          :color="['#91cc75', '#658c52']"
          :title="t('messages.YiFangDevSchedule')"
        ></installtable>
        <!-- <el-row>
  <el-col :span="24"></el-col>
  <el-col :span="24"></el-col>
</el-row> -->
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { calcWH } from "@/components/ts/selfAdaption";
import installtable from "./chart/installtable.vue";
import devList from "./chart/deviceslist.vue";
//   import { getnoiseData } from "@/http/environment";
import { getDeviceInPlant, getprogressOfCorps } from "@/http/InPlantProducts";
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useInPlantProductsStore();
let props = defineProps<{
  width: number;
  height: number;
}>();

watch(
  () => props,
  (newVal, oldVal) => {
    //监听父组件宽高变化，随时重置本组件尺寸
    reset(newVal);
  },
  { immediate: true, deep: true, flush: "post" }
);

let deviceList = reactive(null);
//内容dom-------------------------
let install1 = ref();
let install2 = ref();
let install3 = ref();
let install4 = ref();
let devlist1 = ref();

//---------------------------

//---------------------------

function reset(val: any) {
  //宽高为0时跳出该方法
  if (!val.width && !val.height) return;
  installbox(val.width, val.height);
  devlistBox(val.width, val.height);
}

const installbox = (width: any, height: any) => {
  let a = calcWH(height, width, 2, 1, 0);
  a.oHeight = a.oHeight - 40;
  //修改高度
  install1.value.setchartWH(a.oWidth, a.oHeight);
  install2.value.setchartWH(a.oWidth, a.oHeight);
  install3.value.setchartWH(a.oWidth, a.oHeight);
  install4.value.setchartWH(a.oWidth, a.oHeight);
};
const devlistBox = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 24, 0);
  // a.oHeight=a.oHeight-40
  //修改高度
  devlist1.value.setchartWH(a.oWidth * 14, a.oHeight-60);
};
watch(
  () => store.devlist,
  (newVal, oldVal) => {
    devlist1.value.setData(newVal);
  },
  { deep: true, flush: "post" }
);
async function getDeviceInPlantfun() {
  let result: any = await getDeviceInPlant();

  if (result.code == 200) {
    // console.log(result);
    let a=[]
    result.data.forEach(ele=>{
      if(ele.label){
        a.push(ele)
      }
    });
    deviceList = a
    let newdata = deviceList.map((res, index) => {
      res["index"] = index + 1;
        return res
    });

    store.setDevList(newdata);
  }
}

async function getprogressOfCorpsfun() {
  let result: any = await getprogressOfCorps();

  if (result.code == 200) {
    console.log(result);
    result.data.forEach((res) => {
      if (res.deptId == "15") {
        //医防
        install4.value.setData(
          { accomplish: res.accomplish, counts: res.counts },
          1
        );
      } else if (res.deptId == "5") {
        //汽车
        install1.value.setData(
          { accomplish: res.accomplish, counts: res.counts },
          1
        );
      } else if (res.deptId == "4") {
        //家纺
        install3.value.setData(
          { accomplish: res.accomplish, counts: res.counts },
          1
        );
      } else if (res.deptId == "3") {
        //服装
        install2.value.setData(
          { accomplish: res.accomplish, counts: res.counts },
          1
        );
      }
    });
  }
}
function setdata() {}
onMounted(() => {
  getDeviceInPlantfun();
  getprogressOfCorpsfun();
  // setdata();
});
</script>

<style scope>
.content-left {
  width: 100%;
}
</style>
