<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <!-- 智能张拉——设备管理 -->
      <el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
        <el-form-item label="设备名称">
          <el-select v-model="searchForm.devSn" clearable placeholder="请选择">
            <el-option v-for="(item, index) in devList" :key="index" :label="item.devName" :value="item.devSn">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getList">{{
            $t("message.energyManage.waybill.query")
          }}</el-button>
          <el-button type="warning" plain @click="refresh">{{
            $t("message.deviceManage.refresh")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap">
      <vue-scroll style="height: calc(100% - 83px);">
        <div class="list-content">
          <div class="list-content-item" v-for="(item, index) in List" :key="index">
            <div class="item-top">
              <div class="line"></div>
              <span>{{ item.devName }}</span>
              <div @click="showDetail(item)">查看详情</div>
            </div>
            <div class="item-subtop">
              {{ item.updateDate }}
            </div>
            <div class="item-bottom">
              <div>
                <span>PH值</span>
                <span>{{ item.phValue }}</span>
              </div>
              <div>
                <span>电导率(μS/cm)</span>
                <span>{{ item.conductivity }}</span>
              </div>
              <div>
                <span>水温(℃)</span>
                <span>{{ item.waterTemperature }}</span>
              </div>
              <div>
                <span>溶解氧(mg/L)</span>
                <span>{{ item.dissolvedOxygen }}</span>
              </div>
              <div>
                <span>浊度值(NTU)</span>
                <span>{{ item.turbidityValue }}</span>
              </div>
              <div>
                <span>流速(m/s)</span>
                <span>{{ item.flowVelocity }}</span>
              </div>
              <div>
                <span>水位(m)</span>
                <span>{{ item.waterLevel }}</span>
              </div>
            </div>
          </div>
        </div>
      </vue-scroll>
      <el-pagination class="pagerBox" @size-change="SizeChange" @current-change="CurrentChange"
        :current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize"
        layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background></el-pagination>
    </div>
    <el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="dialogShow" width="800px">
      <div class="dialog_content">
        <div class="search-form">
          <el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
            <el-form-item label="时间">
              <el-date-picker v-model="searchForm.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="getMonitorList">{{
                $t("message.energyManage.waybill.query")
              }}</el-button>
              <el-button type="primary" plain @click="exportData">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-table">
          <el-table class="tables" :data="historyList">
            <el-table-column prop="createDate" align="center" width="200" label="上报时间"></el-table-column>
            <el-table-column prop="phValue" align="center" label="PH值"></el-table-column>
            <el-table-column prop="turbidityValue" align="center" label="浊度值"></el-table-column>
            <el-table-column prop="conductivity" align="center" label="电导率"></el-table-column>
            <el-table-column prop="dissolvedOxygen" align="center" label="溶解氧"></el-table-column>
            <el-table-column prop="waterTemperature" align="center" label="水温"></el-table-column>
            <el-table-column prop="flowVelocity" align="center" label="流速"></el-table-column>
            <el-table-column prop="waterLevel" align="center" label="水位"></el-table-column>
          </el-table>
        </div>
        <div class="dialog-pagination">
          <el-pagination class="pagerBox" @size-change="monitorSizeChange" @current-change="monitorCurrentChange"
            :current-page="pagMonitorInfo.pageNo" :page-sizes="$store.state.PAGESIZRS"
            :page-size="pagMonitorInfo.pageSize" layout="total, sizes, prev, pager, next"
            :total="Number(pagMonitorInfo.total)" background></el-pagination>
        </div>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogShow = false" size="medium">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  sewageDataPage,
  sewageDevList,
  sewageMonitorDataPage,
  sewageMonitorDataExport
} from "@/assets/js/api/sewageMonitor.js";
export default {
  mounted() { },
  created() {
    this.getList();
    this.getDevList();
  },
  data() {
    return {
      title: "",
      dialogShow: false,
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      pagMonitorInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      devList: [],
      List: [],
      historyList: [],
      searchForm: {
        devSn: "",
        time: "",
      },
      devSn: ""
    };
  },
  methods: {
    // 导出数据
    async exportData(){
      let requestData = {
        devSn: this.devSn
      }
      if(this.searchForm.time && this.searchForm.time.length > 0){
        requestData.createDate_begin = this.searchForm.time[0]
        requestData.createDate_end = this.searchForm.time[1]
      }
      fetch(this.$http.defaults.baseURL + 'xmgl/sewageData/exportXls', {
        method: 'post',
        headers: {
          'Authorization': this.$store.state.userInfo.token,
          'Content-Type': 'application/json' // 设置请求头的内容类型为JSON
        },
        body: JSON.stringify(requestData) // 将data对象转换为JSON字符串并作为请求体发送
      })
        .then(response => {
          // 处理响应
          if (!response.ok) {
            throw new Error('下载失败');
          }
          return response.blob();
        })
        .then(blob => {
          // 创建一个下载链接
          const url = window.URL.createObjectURL(blob);
          // 创建一个<a>元素
          const link = document.createElement('a');
          link.href = url;
          link.download = '监测数据.xlsx'; // 指定下载文件的文件名
          // 模拟点击下载链接
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          // 释放URL对象
          window.URL.revokeObjectURL(url);
          // 处理导出的文件
          // 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
          console.log("下载",link,url)
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    },
    // 查看详情
    async showDetail(obj) {
      console.log(obj)
      this.title = "监测记录";
      this.searchForm.time = null;
      this.devSn = obj.devSn
      this.getMonitorList();
      this.dialogShow = true;
    },
    // 查询监测记录
    async getMonitorList(devSn) {
      let requestData = {
        devSn:this.devSn,
        pageNo: this.pagMonitorInfo.pageNo,
        pageSize: this.pagMonitorInfo.pageSize
      }
      if(this.searchForm.time && this.searchForm.time.length > 0){
        requestData.createDate_begin = this.searchForm.time[0]
        requestData.createDate_end = this.searchForm.time[1]
      }
      const res = await sewageMonitorDataPage(requestData);
      if (res.success) {
        this.historyList = res.result.records;
        this.pagMonitorInfo.total = res.result.total;
      }
    },
    // 查询设备列表
    getDevList() {
      sewageDevList().then((result) => {
        if (result.success) {
          this.devList = result.result;
        }
      });
    },
    //查询列表
    getList() {
      sewageDataPage({
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        projectSn: this.$store.state.projectSn,
        devSn: this.searchForm.devSn,
      }).then((result) => {
        if (result.success) {
          this.List = result.result.records;
          this.pagInfo.total = result.result.total;
        }
      });
    },
    close() {
      this.dialogShow = false;
    },
    monitorSizeChange(val) {
      this.pagMonitorInfo.pageSize = val;
      this.getMonitorList();
    },
    monitorCurrentChange(val) {
      this.pagMonitorInfo.pageNo = val;
      this.getMonitorList();
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val;
      this.getList();
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val;
      this.getList();
    },
    refresh() {
      this.searchForm = {};
      this.pagInfo.pageNo = 1; //页数
      this.pagInfo.pageSize = 10; //条数
      this.getList();
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}

.list-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;

  &-item {
    width: 330px;
    height: 350px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .item-top {
      .flex();

      .line {
        width: 3px;
        height: 15px;
        background-color: #5181f6;
        border-radius: 10px;
        margin-right: 8px;
      }

      >span {
        margin-right: auto;
      }

      >div:last-child {
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #5181f6;
        border-radius: 3px;
        color: white;
        font-size: 14px;
        cursor: pointer;
      }
    }

    .item-subtop {
      margin-top: 10px;
      color: #a2a4af;
      font-size: 14px;
    }

    .item-bottom {
      >div {
        margin-top: 20px;
        .flex();

        span:nth-child(1) {
          color: #7c829e;
          font-size: 18px;
          margin-right: auto;
        }

        span:nth-child(2) {
          font-size: 18px;
        }
      }
    }
  }
}

.dialog_content {
  padding: 0px;

  .search-form {
    margin: 0 20px;
  }
}

/deep/.el-dialog__body {
  padding-left: 0px;
  padding-right: 0px;
}
</style>
