<!--
 * @FilePath: \code\Goats-Cloud-ui\src\views\big\device\components\devInfo.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-06-27 10:33:55
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <el-drawer
    :model-value="prop.visible"
    title="prop.title"
    :with-header="false"
    @close="handleClose"
    class="drawer-class"
  >
    <div class="info-header">
      <h2>{{ prop.title }}</h2>
      <span>设备详情 </span>
      <el-button text circle  type="" icon="CloseBold" size="small" class="closs-button" @click="handleClose"></el-button>
    </div>
    <div class="info-body">
      <el-tabs v-model="activeinfo" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="详情" name="info">
          <div style="margin: 0 20px">
            <Wform :config="formconfig" :data="formdata"></Wform>
            <!-- <Wdescriptions :data="descriptionsData"></Wdescriptions> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="属性" name="attribute">
          <el-row style=" margin-bottom: 10px;">
            <el-col :span="20"></el-col>
            <el-col :span="2"><el-button :icon="Refresh" circle @click="researchtable"/></el-col>
            <el-col :span="2"></el-col>
          </el-row>
          <Wtable
            :config="tableConfig"
            :tableData="tableData"
            @gettabellist="getTableList"
            :page="pageval"
          ></Wtable>
        </el-tab-pane>
        <el-tab-pane label="最新遥测数据" name="newDAata">
          <el-row style=" margin-bottom: 10px;">
            <el-col :span="20"></el-col>
            <el-col :span="2"><el-button :icon="Refresh" circle @click="researchtelemetrytable"/></el-col>
            <el-col :span="2"></el-col>
          </el-row>
          <Wtable
            :config="telemetrytableConfig"
            :tableData="telemetrytableData"
            @gettabellist="gettelemetryTableList"
            :page="telemetrypageval"
          ></Wtable>
        </el-tab-pane>
        <el-tab-pane label="pdf" name="pdf">
          <el-row style=" margin-bottom: 10px;">
            <el-col :span="2"></el-col>
            <el-col :span="18">
              <el-button
                     type="info"
                     plain
                     icon="Upload"
                     @click="handleImportPDF"
                  >文件上传</el-button></el-col>
            <el-col :span="2"><el-button :icon="Refresh" circle @click="researchPDFtable"/></el-col>
            <el-col :span="2"></el-col>
          </el-row>
          <Wtable
            :config="PDFConfig"
            :tableData="PDFtableData"
            @gettabellist="getPDFTableList"
            :page="PDFpageval"
          ></Wtable>
        </el-tab-pane>
      </el-tabs>
    </div>
    <upLoad :uploadConfig="uploadConfig"></upLoad>
  </el-drawer>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from "vue";
import { getDeviceinfo,getDeviceattribute,gettelemetrydata,getDevicePDF } from '@/api/big/device'
import Wform from "./Wform.vue";
import Wdescriptions from "./Wdescriptions.vue";
import upLoad from "./upLoad.vue";
import Wtable from "./Wtable.vue";
import type { TabsPaneContext } from "element-plus";
const { proxy } = getCurrentInstance() as any;
import {
    Refresh,
    CloseBold
} from '@element-plus/icons-vue'
const activeinfo = ref("info");
const prop = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "信息详情",
  },
  form: {
    type: Object,
    default: {
      id: "",
      inspector: "",
      assemblyGroup: "",
      electricGroup: "",
    },
  },
});

//表单组件的配置及数据
const formconfig = ref({
  labelPosition: "top",
  formItem: [
    {
      label: "名称",
      labelWidth: "auto",
      content: {
        type: "input",
        model: "name",
        readonly: true,
        disabled: true,
      },
    },
    {
      label: "设备配置",
      labelWidth: "auto",
      content: {
        type: "input",
        model: "devconfig",
        readonly: true,
        disabled: true,
      },
    },
    {
      label: "机架号",
      labelWidth: "auto",
      content: {
        type: "input",
        model: "label",
        readonly: true,
        disabled: true,
      },
    },
    {
      label: "是否网关",
      labelWidth: "auto",
      content: {
        type: "checkbox",
        model: "checkbox",
        value: [
          {
            id: 1,
            val: "是否网关",
            disabled: true,
          },
        ],
      },
    },
    {
      label: "说明",
      labelWidth: "auto",
      content: {
        type: "input",
        model: "caption",
        readonly: true,
        disabled: true,
        textarea: true,
      },
    },
  ],
});
const formdata = ref({
  name: "默认",
  devconfig:"",
  label:"",
  checkbox: ["是否网关"],
  model:"model",
});
//描述列表数据配置
const descriptionsData = ref({
  name: prop.title,
  devLabel: "00111",
  label: "00111",
  iswangguan: true,
  remark: "说明",
});

//遥测数据表格配置及数据
const telemetrytableConfig = ref({
  height: 430,
  column: [
    {
      prop: "nowTime",
      label: "最后更新时间",
      width: "",
    },
    {
      prop: "keyName",
      label: "键名",
      width: "",
    },
    {
      prop: "keyValue",
      label: "值",
      width: "",
    },
  ],
});
const telemetrytableData = ref([
  {
    nowTime: "1",
    keyName: "1",
    keyValue: "1",
  },
  {
    nowTime: "2",
    keyName: "2",
    keyValue: "2",
  },
  {
    nowTime: "3",
    keyName: "3",
    keyValue: "3",
  },
]);
const telemetrypageval=ref({page:1,pageSize:5,total:1})

//表格配置及数据
const tableConfig = ref({
  height: 430,
  column: [
    {
      prop: "nowTime",
      label: "最后更新时间",
      width: "",
    },
    {
      prop: "keyName",
      label: "键名",
      width: "",
    },
    {
      prop: "keyValue",
      label: "值",
      width: "",
    },
  ],
});
const tableData = ref([
  {
    nowTime: "1",
    keyName: "1",
    keyValue: "1",
  },
  {
    nowTime: "2",
    keyName: "2",
    keyValue: "2",
  },
  {
    nowTime: "3",
    keyName: "3",
    keyValue: "3",
  },
]);
const pageval=ref({page:1,pageSize:5,total:1})

//pdf导入按钮操作
const handleImportPDF=()=>{
  uploadConfig.value.openDialog=true
  console.log(uploadConfig.value);
  
}
//PDF配置及数据
const PDFConfig = ref({
  height: 430,
  column: [
    {
      prop: "nowTime",
      label: "最新时间",
      width: "",
    },
    {
      prop: "Name",
      label: "名称",
      width: "",
    },
    {
      prop: "address",
      label: "地址",
      width: "",
    },
    {
      prop: "more",
      label: "更多",
      width: "",
    },
  ],
});
const PDFtableData = ref([
  {
    nowTime: "1",
    Name: "1",
    address: "1",
    more: "1",
  },
  {
    nowTime: "2",
    Name: "2",
    address: "2",
    more: "1",
  },
  {
    nowTime: "3",
    Name: "3",
    address: "3",
    more: "1",
  },
]);
const PDFpageval=ref({page:1,pageSize:5,total:1})

//关闭抽屉
const handleClose = () => {
  //baseFormRef.value.reset()
  emit("closeDialog");
};
//切换tab标签方法
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
};
//获取设备详情信息
const getdevinfoFun =  async (val) => {
  let result=  await getDeviceinfo()
  if(result.code==200){
     formdata.value.name = result.data.name
     formdata.value.devconfig = result.data.devconfig
     formdata.value.label = result.data.label
     formdata.value.checkbox = result.data.checkbox
     formdata.value.model = result.data.model
  }else{
    proxy.$modal.msgError(result.msg)
  }
};
//刷新属性数据方法
const researchtable=()=>{
    pageval.value.page=1
    pageval.value.pageSize=5
    getTableList()
}
//获取数据数据方法
const getTableList = async (val) => {
  let result=  await getDeviceattribute({page:pageval.value.page,pageSize:pageval.value.pageSize})
  if(result.code==200){
    tableData.value=result.data
    pageval.value.total=result.total
  }else{
    proxy.$modal.msgError(result.msg)
  }
};
//刷新遥测数据方法
const researchtelemetrytable=()=>{
  telemetrypageval.value.page=1
  telemetrypageval.value.pageSize=5
    getTableList()
}
//获取遥测数据方法
const gettelemetryTableList = async (val) => {
  let result=  await gettelemetrydata({page:pageval.value.page,pageSize:pageval.value.pageSize})
  if(result.code==200){
    telemetrytableData.value=result.data
    telemetrypageval.value.total=result.total
  }else{
    proxy.$modal.msgError(result.msg)
  }
};

//刷新PDF数据方法
const researchPDFtable=()=>{
  PDFpageval.value.page=1
  PDFpageval.value.pageSize=5
    getTableList()
}
//获取DFT数据方法
const getPDFTableList = async (val) => {
  let result=  await getDevicePDF({page:pageval.value.page,pageSize:pageval.value.pageSize})
  if(result.code==200){
    PDFtableData.value=result.data
    PDFpageval.value.total=result.total
  }else{
    proxy.$modal.msgError(result.msg)
  }
};
//PDF上传功能配置
const uploadConfig=ref({
        //上传文件的类型限制
        accept:[''],
         // 弹出层标题
        title:"",
        //弹出层宽度
        width:'400px',
         // 是否显示弹出层
        openDialog:false,
        //上传文件的数量限制
        limit:1,
        multiple:false
})
//打开dialog获取数据信息
const getdata = (val)=>{
  //获取设备详情信息
  getdevinfoFun(val)
  getTableList(val)
  gettelemetryTableList(val)
  getPDFTableList(val)
}


// 刷新表格事件
const emit = defineEmits(["closeDialog"]);
onMounted(() => {
  
})
//抛出获取信息方法
defineExpose({
  getdata
});
</script>

<style lang="scss" scoped>
.info-header {
  width: 100%;
  height: 130px;
  background-color: #409eff;
  color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  & h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
  }
  & .closs-button{
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10px
  }
}
:deep(.el-tabs__nav) {
  margin-left: 20px;
}
</style>
