<template>
  <!-- 点位/表号功能号对应总览 -->
  <div id="pointTabOverview">
    <!-- 对话框 -->
    <el-dialog title="点位/表号功能号对应总览" :visible.sync="dialogVisiable">
      <el-tabs v-model="activeName" style="height:600px;overflow:auto;">
        <!-- 一对多数据 -->
        <el-tab-pane label="一对多" name="otm">
          <el-table :data="oTMData" style="width: 100%">
            <el-table-column prop="Description" label="点位名称" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column prop="Name" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
            <el-table-column prop="MeterList" label="表号功能号" show-overflow-tooltip min-width="100">
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.MeterList" :key="index">{{ item }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 多对一数据 -->
        <el-tab-pane label="多对一" name="mto">
          <el-table :data="mTOData" style="width: 100%">
            <el-table-column prop="Data" label="点位名称" show-overflow-tooltip min-width="100">
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.Data" :key="index">{{ item.Description }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="Data" label="数据源" show-overflow-tooltip min-width="100">
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.Data" :key="index">{{ item.Name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="MeterFunc" label="表号功能号" show-overflow-tooltip min-width="100"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { tableFuncRelatedOverview } from '@/api/scan/request'
export default {
  data() {
    return {
      activeName: "otm", //默认展示一对多
      dialogVisiable: false, //显示对话
      mTOData: [], //多对一数据
      oTMData: [] //一对多数据
    };
  },
  methods: {
    //加载数据
    loadOverviewData() {
      tableFuncRelatedOverview({}, res => {
        this.dialogVisiable = true;
        //去掉非多对一数据
        let mD = res.Content[0].MtoO;
        this.mTOData = [];
        for (let k in mD) {
          if (mD[k].length > 1) {
            this.mTOData.push({
              "MeterFunc": k,
              "Data": mD[k]
            })
          }
        };
        //去掉非一对多数据
        this.oTMData = [];
        let oD = res.Content[0].OtoM;
        for (let k in oD) {
          if (oD[k].MeterList.length > 1) {
            this.oTMData.push(oD[k]);
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>