<template>
  <div id="tabFunDetail">
    <!-- 查询 新增 -->
    <div class="query-area" style="padding:10px;">
      <el-select v-model="originName" placeholder="请选择数据源" clearable @change="changeHandleSelect">
        <el-option
          v-for="(item,index) in selectAggregate.originList"
          :key="index"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select v-model="statusName" placeholder="请选择状态" clearable @change="changeHandleSelect">
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="accessList" placeholder="请选择获取方式" clearable @change="changeHandleSelect">
        <el-option
          v-for="item in getAccessMethods"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span style="float: right">
      <el-button @click="handleControl">控制测试</el-button>
        <i class="el-icon-refresh" style="cursor: pointer;padding: 0 15px" title="刷新" @click="getOverViewList"/>
        <i class="el-icon-download" style="cursor: pointer" @click="downloads" title="下载"/>
        <!--        <a class="el-icon-download" style="cursor: pointer"   href="/pointconfig/datasource/pointdetail-download"-->
        <!--           download="检测详情"title="下载"/>-->
      </span>
    </div>
    <!-- 数据表格 -->
    <div class="table-area">
      <el-table
        :data="tableData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading"
        :header-cell-style="headerStyle"
        @row-click="handleClickRow"
      >
        <el-table-column label="序号" type="index" align='center' width="55">
          <template slot-scope="scope">
            {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop='Status' label='状态' show-overflow-tooltip align='center' width="45">
          <template slot-scope="scope">
            <div v-if="scope.row.Status ==0" class="circular green"></div>
            <div v-if="scope.row.Status ==1" class="circular yellow"></div>
            <div v-else class="circular red"></div>
          </template>
        </el-table-column>
        <el-table-column prop='Meterfunc' label='整合ID' show-overflow-tooltip align='center'/>
        <el-table-column prop='Description' label='点位描述' show-overflow-tooltip align='center'/>
        <el-table-column prop='Data.Data' label='data' show-overflow-tooltip align='center' style="position:relative;"/>
        <el-table-column prop='Data.Time' label='data.Time' show-overflow-tooltip align='center'/>
        <el-table-column prop='Data.Delay' label='延迟(s)' show-overflow-tooltip align='center'/>
        <el-table-column prop='DatasourceName' label='数据源' show-overflow-tooltip align='center'/>
        <el-table-column prop='Method' label='获取方式' show-overflow-tooltip align='center'/>
        <el-table-column prop='MeterFunc' label='查看曲线' show-overflow-tooltip align='center'>
          <template slot-scope="scope">
            <el-button style="padding:7px 15px;font-size:15px;" @click="handleDrawer(scope.row, 0)">
              <i class="el-icon-s-data"/></el-button>
          </template>
        </el-table-column>
        <el-table-column prop='Quality' label='质量评价' show-overflow-tooltip align='center'/>

      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="float:right;margin-top:10px;padding:2px 5px;">
      </el-pagination>
    </div>
    <curve ref="curve"/>
  </div>
</template>

<script>
import {testDetail, originalHistory} from '@/api/scan/request'
import lStorage from '@/utils/localStorage'
import {mapGetters} from "vuex";
import curve from './curve'
import axios from "axios";
import moment from 'moment'

export default {
  /** 运行状态 */
  // 0：正常 1：异常 2：停用 3：间接
  /** 启动状态 */
  // 0：未启动 1：已启动
  /** 状态 */
  // 0：延迟<30min 1：延迟>30min 2：无数据
  /** method */
  // 0：订阅 1：推送 2：查询 3：其他
  /** read-write */
  // 0：读 1：写 2：读写
  data() {
    return {
      //表格头样式
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      // allTableData: [],//所有表格数据
      tableData: [],
      pageSizes: [10, 20, 50, 100],
      pageSize: 50,
      currentPage: 1,
      total: 0,
      loading: false,//加载
      tabFunNum: null,//表号功能号
      //抽屉
      drawers: [
        {drawer: false, direction: 'rtl', objId: ''},
        {drawer: false, direction: 'rtl', objId: ''},
        {drawer: false, direction: 'rtl', objId: '', value: ''},
        {drawer: false, direction: 'rtl', objId: ''}
      ],
      originName: '',
      statusName: '',
      accessList: '',
      statusList: [
        {value: '0', label: '正常'},
        {value: '1', label: '异常'},
        {value: '2', label: '停用'},
        {value: '3', label: '间接'}
      ],
      getAccessMethods: [
        {value: '0', label: '推送'},
        {value: '1', label: '订阅'},
        {value: '2', label: '查询'},
        {value: '3', label: '其他'}
      ],
      seven: ''
    }
  },
  props: ['selectAggregate'],
  methods: {
    //查看曲线
    handleDrawer(row, index) {
      this.$refs.curve.open(row, 0)
    },
    //控制测试
    handleControl() {
      this.$router.push({
        path: "control"
      })
    },
    //点击下载
    downloads() {
      let param = {
        method: 'post',
        url: `/pointconfig/datasource/pointdetail-download`,
        responseType: 'blob',
        headers: {
          //头信息中的 ProjectId 改为 projectId    nh-2021.11.25
          projectId: this.projectId
        },
        data: {},
      }

      axios(param).then(function (res) {
        var blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        });
        var fileName = res.headers['content-disposition'];
        if (fileName)
          fileName = fileName.substring(fileName.indexOf('=') + 1);
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      }).catch(function (err) {
      })
    },
    handleClickRow(row, column, event) {//点击表格行
      lStorage.set('screen_data', {
        path: this.$route.path,
        data: {MeterFunc: row.MeterFunc, RelatedInstance: row.RelatedInstance}
      })
    },
    //筛选
    changeHandleSelect() {
      this.currentPage = 1
      this.getOverViewList()
    },
    //获取统计数据
    getOverViewList() {
      let _this = this
      _this.loading = true;
      let param = {
        PageNumber: this.currentPage,
        PageSize: this.pageSize
      }, Filters = ''
      if (_this.originName) {
        Filters += `DatasourceName='${_this.originName}';`
      }
      if (_this.statusName) {
        Filters += `Status='${_this.statusName}';`
      }
      if (_this.accessList) {
        Filters += `Method='${_this.accessList}';`
      }
      let index = Filters.lastIndexOf(';')
      Filters = Filters.substring(0, index)
      param.Filters = Filters !== '' ? Filters : undefined
      testDetail(param, res => {
        _this.tableData = res.Content
        _this.total = res.Total
        _this.loading = false;
      })

    },
    //刷新当前行数据
    // refreshThisRow(row) {
    //   let index = this.tableData.indexOf(row);
    //   let pa = {
    //     MeterFunc: row.MeterFunc
    //   }
    //   getTabFunNumOverview(pa, res => {
    //     res.Content.forEach(t => {
    //       if (t.MeterFunc == row.MeterFunc) {
    //         if (t.Data) {
    //           this.tableData[index].Data.Data = t.Data.Data || '';
    //           this.tableData[index].Data.Time = t.Data.Time || '';
    //         }
    //         this.tableData[index].DataQuality = t.DataQuality;
    //         this.tableData[index].RelatedInstance = t.RelatedInstance;
    //         this.tableData[index].RelatedPoint = t.RelatedPoint;
    //       }
    //     })
    //     Message.success('已刷新');
    //   });
    // },
    //分页更换size
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getOverViewList()
    },
    //分页更换页
    handleCurrentChange(val) {
      console.log(val, 'val')
      this.currentPage = val;
      this.getOverViewList()
    },
    //子组件关闭抽屉
    // closeDrawer() {
    //   this.drawers[3].drawer = false;
    // },
    //新建自定义后重载页面
    reloadData() {
      this.$emit('reloadData');
    },
    init() {
      this.getOverViewList();
    }
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters("layout", [
      "projectId"
    ])
    //根据分页，获取要展示的tableData
    // tableData: function () {
    //   return this.allTableData.slice(
    //     (this.currentPage - 1) * this.pageSize,
    //     (this.currentPage * this.pageSize < this.allTableData.length) ? this.currentPage * this.pageSize : this.allTableData.length);
    // }
  },
  components: {curve}
}
</script>

<style lang="less" scoped>
#tabFunDetail {
  border-top: 5px solid #eee;
  height: calc(100% - 5px);
  width: 100%;
  overflow: hidden;
}

.table-area {
  height: calc(100% - 72px);
  padding: 0px 10px 10px 10px;

  .circular {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    //margin: 0 auto;
  }

  .green {
    background: #1abc9c;
  }

  .yellow {
    background: yellow;
  }

  .red {
    background: red;
  }
}

.table-area i {
  text-align: right;
  font-size: 12px;
  cursor: pointer;
  float: right;
}

.dialog-btn {
  display: none;
  height: 29px;
}

/deep/ .el-drawer__body {
  height: 90%;
  overflow-y: auto;
}

/deep/ .el-table__body-wrapper tr:hover {
  .dialog-btn {
    display: inline;
  }
}

/deep/ .el-dialog__body {
  padding-bottom: 20px;
}

/deep/ .el-drawer__header > :first-child:focus {
  outline: none;
}
</style>
