<template>
  <div style="cursor: default">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>测报系统</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/bzy' }"
        >孢子仪</el-breadcrumb-item
      >
      <el-breadcrumb-item>数据详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="success" size="small" @click="goBackPage()"
      ><i class="el-icon--left el-icon-d-arrow-left"></i>返回</el-button
    >
    <div class="equipInfo">
      <div class="detail">
        <span>设备ID：{{ id }}</span>
        <span>设备名称：无</span>
        <span>位置：黑龙江省，鸡西市，鸡东县</span>
        <span>已培养时间(h)：0</span>
      </div>
      <DateSearch @dateChange="dateChange"></DateSearch>
    </div>
    <div class="ctrl-check">
      <el-button type="primary" size="mini" @click="$throttle(refresh,2000)">刷新</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :md="24" :lg="12">
        <el-card class="box-card" id="box-card1">
          <highcharts :options="option1"></highcharts>
        </el-card>
      </el-col>
      <el-col :md="24" :lg="12">
        <el-card class="box-card" id="box-card2">
          <highcharts :options="option2"></highcharts>
        </el-card>
      </el-col>
    </el-row>
    <div class="dataTableSearch">
      <el-button type="primary" size="mini" @click="deriveData()"
        >导出</el-button
      >
    </div>
    <el-card class="box-card">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          v-for="(item, index) in tableHeadTxt"
          :key="index"
          :prop="item[1]"
          :label="item[0]"
          :show-overflow-tooltip="true"
          :width="setWidth(item)"
        >
          <template slot-scope="scope">{{
            scope.row[scope.column.property]
          }}</template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="queryInfo.page"
        @current-change="changePage"
      ></el-pagination>
    </el-card>

    <!-- 导出对话框 -->
    <el-dialog title="导出信息" :visible.sync="dialogVisible" width="30%">
      <!-- <span>这是一段信息</span> -->

      <!-- 下拉框和输入框 -->
      <ul class="iptUl">
        <li class="iptList">
          <div class="iptTxt"><span style="color: red">*</span>文件名称：</div>
          <div class="iptBox">
            <el-input placeholder="请输入文件的名称" v-model="value" clearable>
            </el-input>
          </div>
        </li>
        <li class="iptList">
          <div class="iptTxt"><span style="color: red">*</span>下载类型：</div>
          <div class="iptBox">
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in optionsA"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </li>
        <li class="iptList" v-show="timeShow">
          <div class="iptTxt"><span style="color: red">*</span>时间段：</div>
          <div class="iptBox">
            <el-date-picker
              v-model="value2"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </li>
      </ul>
      <!-- 下拉框和输入框 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导出对话框 -->
  </div>
</template>

<script>
import DateSearch from "@/components/DateSearch";
import HighCharts from "highcharts";
import HighchartsNoData from "highcharts/modules/no-data-to-display";
HighchartsNoData(HighCharts);
import { Loading } from "element-ui";
export default {
  data() {
    return {
      id: this.$route.params.e_id,
      btnSelected: "",
      timeRange: "",
      lineTime: "",
      tableHeadTxt: [
        ["设备开关", "on_off"],
        ["环境温度(°C)", "at"],
        ["环境湿度(%)", "ah"],
        ["保温仓设定温度(°C)", "set_temp"],
        ["保温仓当前温度(°C)", "pre_temp"],
        ["电池状态", "batStatus"],
        ["雨控状态", "rps"],
        ["摄像头状态", "usb_sta"],
        ["电压(V)", "v_bat"],
        ["海拔高度", "alti"],
        ["信号强度", "csq"],
        ["设备版本", "dver"],
        ["上报时间", "addtime"],
      ],
      queryInfo: {
        begin: "",
        end: "",
        e_id: this.$route.params.e_id,
        d_id: this.$route.params.d_id,
        page: 1,
      },
      // 表格数据
      tableData: [],
      total: 0,
      //导出弹框
      dialogVisible: false,
      optionsA: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "时间段",
        },
      ],
      value: "", //文件名称
      value1: "", //下载类型
      value2: "", //时间段
      timeShow: false, //选择时间
      loadingInstance1: {},
      loadingInstance2: {},
      ChartData: [
        {
          name: "温度（°C）",
          dat: [],
        },
        {
          name: "湿度（RH）",
          dat: [],
        },
        {
          name: "保温仓温度（°C）",
          dat: [],
        },
      ],
    };
  },
  mounted() {
    this.getChartDataList();
    this.getHisDataList();
    this.refreshData();
    this.loadingInstance1 = Loading.service({
      fullscreen: false,
      target: document.getElementById("box-card1"),
    });
    this.loadingInstance2 = Loading.service({
      fullscreen: false,
      target: document.getElementById("box-card2"),
    });
  },
  computed: {
    option1() {
      return {
        chart: {
          zoomType: "x",
        },
        title: {
          text: "环境温湿度",
          align: "left",
        },
        lang: {
          noData: "暂无数据",
        },
        noData: {
          style: {
            fontWeight: "bold",
            fontSize: "15px",
            color: "#303030",
          },
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          crosshair: true, //十字基准线
          type: "datetime",
          dateTimeLabelFormats: {
            //根据时间间距X轴自动显示哪种格式
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
        },
        yAxis: {
          title: {
            text: "",
          },
        },
        legend: {
          // layout: 'vertical',
          align: "right",
          verticalAlign: "top",
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false,
            },
            pointStart: 2010, //该参数定义了数据点的起点
          },
        },
        series: [
          {
            name: this.ChartData[0].name,
            data: this.ChartData[0].dat,
          },
          {
            name: this.ChartData[1].name,
            data: this.ChartData[1].dat,
          },
        ],
        colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
        credits: {
          //去掉默认的highcharts.com
          enabled: false,
        },
        tooltip: {
          // crosshairs: true,
          shared: true, //折线共享
          headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>",
        },
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      };
    },
    option2() {
      return {
        chart: {
          zoomType: "x",
        },
        title: {
          text: "保温仓温度",
          align: "left",
        },
        lang: {
          noData: "暂无数据",
        },
        noData: {
          style: {
            fontWeight: "bold",
            fontSize: "15px",
            color: "#303030",
          },
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          crosshair: true, //十字基准线
          type: "datetime",
          dateTimeLabelFormats: {
            //根据时间间距X轴自动显示哪种格式
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
        },
        yAxis: {
          title: { text: "" },
        },
        legend: {
          // layout: 'vertical',
          align: "right",
          verticalAlign: "top",
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false,
            },
            pointStart: 2010,
          },
        },
        series: [
          {
            name: this.ChartData[2].name,
            data: this.ChartData[2].dat,
          },
        ],
        colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
        credits: {
          //去掉默认的highcharts.com
          enabled: false,
        },
        tooltip: {
          // crosshairs: true,
          shared: true, //折线共享
          headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>",
        },
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom",
                },
              },
            },
          ],
        },
      };
    },
  },
  methods: {
    // 设置hightcharts配置
    refreshData() {
      HighCharts.setOptions({
        // 所有语言文字相关配置都设置在 lang 里
        lang: {
          resetZoom: "刷新",
          resetZoomTitle: "重置缩放比例",
        },
      });
    },
    //获取折线数据
    getChartDataList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.device_polyline_data",
        data: this.qs.stringify({
          device_type_id: 7,
          d_id: this.queryInfo.d_id,
          start_time: this.queryInfo.begin,
          end_time: this.queryInfo.end,
        }),
      }).then((res) => {
        if (res.data.message == "" && res.data.data.length !== 0) {
          var data = res.data.data;
          for (let item of data) {
            this.ChartData[0].dat.unshift([
              item.addtime * 1000 + 8 * 3600000,
              item.temperature,
            ]);
            this.ChartData[1].dat.unshift([
              item.addtime * 1000 + 8 * 3600000,
              item.humidity,
            ]);
            this.ChartData[2].dat.unshift([
              item.addtime * 1000 + 8 * 3600000,
              item.others,
            ]);
          }
        }
        this.loadingInstance1.close();
        this.loadingInstance2.close();
      });
    },
    //获取表格数据
    getHisDataList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.device_history_data",
        data: this.qs.stringify({
          device_type_id: 7,
          device_id: this.queryInfo.e_id,
          start_time: this.queryInfo.begin,
          end_time: this.queryInfo.end,
          page: this.queryInfo.page,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.total = res.data.data.counts;
          var data = res.data.data.data;
          if (data.length > 0) {
            this.tableData = [];
            for (var i = 0; i < data.length; i++) {
              var dht = data[i].d_h_t;
              dht.addtime = this.formatTime(dht.addtime * 1000);
              dht.on_off = dht.on_off == 0 ? "关" : "开";
              dht.batStatus = dht.batStatus == 0 ? "正常" : "电量过低";
              dht.rps = dht.rps == 0 ? "正常" : "雨控";
              dht.usb_sta = dht.usb_sta == 0 ? "正常" : "异常"; //摄像头状态
              if (dht.lamp != undefined) {
                if (dht.ws == 1) {
                  if (stat.lamp == 1) {
                    dht.blbs = "工作中";
                  } else if (dht.lux == 0) {
                    dht.blbs = "N/A（未检测到传感器）";
                  } else {
                    dht.blbs = "异常";
                  }
                } else {
                  dht.blbs = "关闭";
                }
              } else {
                dht.blbs = "--";
              }
              this.tableData.push(dht);
            }
          }
        }
      });
    },
    dateChange(data) {
      this.queryInfo.page = 1;
      this.queryInfo.begin = data.begin;
      this.queryInfo.end = data.end;
      this.getHisDataList();
      this.getChartDataList();
    },
    changePage(val) {
      this.queryInfo.page = val;
      this.getHisDataList();
    },
    setWidth(item) {
      if (item[1] == "addtime") {
        return 180 + "px";
      }
    },
    refresh() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.get_device_config",
        data: this.qs.stringify({
          device_type_id: 7,
          d_id: this.queryInfo.d_id,
          control_type: "data",
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("刷新成功");
        } else {
          this.$message.err("刷新失败");
        }
      });
    },
    //返回上一页
    goBackPage() {
      this.$router.go(-1);
    },

    // 导出数据
    deriveData() {
      this.dialogVisible = true;
    },
    //导出数据确定
    addData() {
      var that = this;
      if (that.value == "" && that.value1 == "" && that.value2 == "") {
        this.$message({
          message: "请将必填项填写完整",
          type: "warning",
          duration: 1500,
        });
      } else if (
        that.value !== "" &&
        that.value1 == "选项2" &&
        that.value2 == ""
      ) {
        this.$message({
          message: "请填写导出时间段",
          type: "warning",
          duration: 1500,
        });
      } else if (
        that.value !== "" &&
        (that.value1 == "选项1" ||
          (that.value1 == "选项2" && that.value2 !== ""))
      ) {
        var begin = "";
        var end = "";
        if (that.value2) {
          begin = parseInt(new Date(that.value2[0]).getTime() / 1000);
          end = parseInt(new Date(that.value2[1]).getTime() / 1000);
        } else {
          begin = "";
          end = "";
        }
        window.location.href =
          this.$deriveData +
          "/api/cbd_export?device_id=" +
          this.$route.params.d_id +
          "&filename=" +
          that.value +
          "&start_time=" +
          begin +
          "&end_time=" +
          end +
          "&device_type=7";
      }
    },
  },
  components: {
    DateSearch,
  },
  watch: {
    value1(val) {
      if (val == "选项2") {
        this.timeShow = true;
      }
      if (val == "选项1") {
        this.timeShow = false;
      }
    },
    dialogVisible(val) {
      if (val == false) {
        this.value = "";
        this.value1 = "";
        this.value2 = "";
        this.timeShow = false;
      }
    },
  },
};
</script>

<style lang='less' scoped>
.equipInfo {
  display: flex;
  margin-top: 10px;
  margin-bottom: 8px;
  justify-content: space-between;
  .detail {
    font-size: 14px;
    color: #666;
    span {
      margin-right: 20px;
    }
  }
}
.dataTableSearch {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.el-input__inner {
  width: 222px !important;
}
.ctrl-check {
  margin-bottom: 20px;
}

.iptList {
  display: flex;
  margin: 15px 0 15px 0;
}
.iptTxt {
  text-align: right;
  width: 20%;
  margin: 0 5% 0 0;
  display: inline-block;
}
.iptBox {
  width: 40%;
}
</style>