<template>
  <div style="cursor: default;width:99%;">
    <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="equipMsg">
        <span>设备ID：{{ this.$route.params.e_id }}</span>
        <span>设备名称：{{ equipStatus.device_name || "无" }}</span>
        <span>位置：{{ equipStatus.address || "无" }}</span>
      </div>
      <DateSearch
        ref="timeCirculation"
        @dateChange="dateChange"
        @timeScreen="timeScreen"
      ></DateSearch>
    </div>
    <div class="ctrl-check">
      <el-button type="primary" size="mini" @click="$throttle(refresh, 2000)"
        >刷新</el-button
      >
      <el-button type="primary" size="mini" @click="lookSIMCode('sim')"
        >SIM 卡</el-button
      >
    </div>
    <!-- 统计图 -->
    <el-row :gutter="10">
      <el-col :md="24" :lg="9">
        <el-card class="box-card">
          <el-row :gutter="10">
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon1.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <strong>{{ equipStatus.ds ? "开机" : "关机" }}</strong>
                  <p>设备状态</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon2.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <!-- <strong>{{ equipStatus.ts ? "时控" : "光控" }}</strong> -->
                  <strong>{{ equipStatus.ts == "1" ? "时控" : "光控" }}</strong>
                  <p>定时模式</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon3.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <strong>{{ equipStatus.upds == 1 ? "落虫" : "排水" }}</strong>
                  <p>通道状态</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon4.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <!-- <strong>{{ equipStatus.hs ? "加热" : "正常" }}</strong> -->
                  <strong>{{ equipStatus.hs == "1" ? "加热" : "正常" }}</strong>
                  <p>加热状态</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon5.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <!-- <strong>{{ equipStatus.upds ? "打开" : "关闭" }}</strong> -->
                  <strong>{{
                    equipStatus.upds == "1" ? "打开" : "关闭"
                  }}</strong>
                  <p>上仓门</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon6.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <!-- <strong>{{ equipStatus.dpds ? "打开" : "关闭" }}</strong> -->
                  <strong>{{
                    equipStatus.dpds == "1" ? "打开" : "关闭"
                  }}</strong>
                  <p>下仓门</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon7.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <strong>{{ equipStatus.csq }}</strong>
                  <p>信号强度</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon8.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <strong :title="equipStatus.dver">{{
                    equipStatus.dver | ellipsis
                  }}</strong>
                  <p>设备版本</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon9.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <strong>{{ equipStatus.tph }}</strong>
                  <p>高温限值</p>
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="6" :lg="12">
              <div class="equipStatus">
                <div class="equipIcon">
                  <img
                    src="@/assets/images/forecasting/cbd/staticIcon10.png"
                    alt
                  />
                </div>
                <div class="equipParams">
                  <strong>{{ equipStatus.tpl }}</strong>
                  <p>低温限值</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :md="24" :lg="15">
        <el-card class="box-card">
          <div class="charts" id="charts">
            <highcharts :options="options"></highcharts>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="dataTableSearch">
      <div>
        <el-button type="primary" size="mini" @click="deriveData()"
          >导出</el-button
        >
      </div>
    </div>
    <el-card class="box-card" v-if="showControl">
      <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]"
          :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, jumper"
        :total="total"
        v-if="tableData.length"
        :current-page="queryInfo.page"
        @current-change="changePage"
      ></el-pagination>
    </el-card>
    <!-- SIM卡对话框 -->
    <el-dialog
      title="SIM卡"
      :visible.sync="simCodeVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template>
        <el-tabs
          v-loading="simLoading"
          element-loading-text="数据请求中"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <!-- <el-tab-pane label="SIM卡流量" name="sim"> -->
          <el-tab-pane label="数据SIM卡流量" name="sim">
            <div class="simCodeBox">
              <div>
                <span class="simCodeTitle">ICCID：</span>
                <div>{{ sim.iccid }}</div>
              </div>
              <div>
                <span class="simCodeTitle">状态：</span>
                <!-- <div>{{ sim.account_status | simStatus }}</div> -->
                <div>{{ sim.account_status }}</div>
              </div>
              <div>
                <span class="simCodeTitle">套餐：</span>
                <div>
                  <el-progress
                    :show-text="false"
                    :percentage="100"
                  ></el-progress>
                </div>
                <!-- <span>{{ sim.data_plan | retainThree }}MB</span> -->
                <span v-if="code == 2">{{ sim.data_plan }}MB</span>
                <span v-if="code == 1">{{ sim.data_plan }}</span>
                <!-- <span>{{ sim.data_plan }}</span> -->
              </div>
              <div>
                <span class="simCodeTitle">已用流量：</span>
                <div>
                  <template v-if="!isNaN(data_usage_Per)">
                    <el-progress
                      :show-text="false"
                      :percentage="data_usage_Per"
                    ></el-progress>
                  </template>
                </div>
                <span>{{ sim.data_usage | retainThree }}MB</span>
              </div>
              <!-- <div>
                <span class="simCodeTitle">剩余流量：</span>
                <div>
                  <template v-if="!isNaN(data_balance_per)">
                    <el-progress
                      :show-text="false"
                      :percentage="data_balance_per"
                    ></el-progress>
                  </template>
                </div>
                <span>{{ sim.data_balance | retainThree }}MB</span>
              </div> -->
              <div>
                <span class="simCodeTitle">到期时间：</span>
                <div>{{ sim.expiry_date }}</div>
              </div>
              <div class="operateBtn">
                <el-button size="mini" @click="simCodeVisible = false"
                  >关闭</el-button
                >
              </div>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="海康SIM卡流量" name="hksim" v-if="showHksimFlag"> -->
          <el-tab-pane label="图片SIM卡流量" name="hksim" v-if="showHksimFlag">
            <div class="simCodeBox">
              <div>
                <span class="simCodeTitle">ICCID：</span>
                <div>{{ hksim.iccid }}</div>
              </div>
              <div>
                <span class="simCodeTitle">状态：</span>
                <!-- <div>{{ hksim.account_status | simStatus }}</div> -->
                <div>{{ hksim.account_status }}</div>
              </div>
              <div>
                <span class="simCodeTitle">套餐：</span>
                <div>
                  <el-progress
                    :show-text="false"
                    :percentage="100"
                  ></el-progress>
                </div>
                <!-- <span>{{ hksim.data_plan | retainThree }}MB</span> -->
                <span v-if="code == 2">{{ hksim.data_plan }}MB</span>
                <span v-if="code == 1">{{ hksim.data_plan }}</span>
              </div>
              <div>
                <span class="simCodeTitle">已用流量：</span>
                <div>
                  <template v-if="!isNaN(hkdata_usage_Per)">
                    <el-progress
                      :show-text="false"
                      :percentage="hkdata_usage_Per"
                    ></el-progress>
                  </template>
                </div>
                <span>{{ hksim.data_usage | retainThree }}MB</span>
              </div>
              <!-- <div>
                <span class="simCodeTitle">剩余流量：</span>
                <div>
                  <template v-if="!isNaN(hkdata_balance_per)">
                    <el-progress
                      :show-text="false"
                      :percentage="hkdata_balance_per"
                    ></el-progress>
                  </template>
                </div>
                <span>{{ hksim.data_balance | retainThree }}MB</span>
              </div> -->
              <div>
                <span class="simCodeTitle">到期时间：</span>
                <!-- <div>{{ (hksim.expiry_date * 1000) | formatTime }}</div> -->
                <div>{{ hksim.expiry_date }}</div>
              </div>
              <div>
                <span class="simCodeTitle">更换ICCID：</span>
                <div>
                  <el-input
                    v-model="hksiminp"
                    placeholder="请输入ICCID"
                    @input="hksiminpinput"
                  ></el-input>
                </div>
              </div>
              <div class="operateBtn">
                <el-button type="primary" size="mini" @click="changeHkSim"
                  >确定</el-button
                >
                <el-button size="mini" @click="simCodeVisible = false"
                  >取消</el-button
                >
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
    <!-- 导出对话框 -->
    <el-dialog
      title="导出信息"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- <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">下载类型：</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";
import Circulation from "../../../../static/js/equipState_dict.json";
// import { component } from 'vue/types/umd';

export default {
  data() {
    return {
      // 请求sim卡获取到需要回显的数据
      simLoading: true, //sim卡加载loading
      showHksimFlag: true, //是否显示hksim卡标识
      simCodeVisible: false,
      simFlag: true, //是否重复加载hksim卡
      sim: {
        iccid: "",
        account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
        data_plan: 0, //套餐大小
        data_usage: 0, //当月用量
        data_balance: 0, //剩余流量
        expiry_date: 0, //到期日期
      },
      hksimFlag: true, //是否重复加载hksim卡
      hksim: {
        iccid: "",
        account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
        data_plan: 0, //套餐大小
        data_usage: 0, //当月用量
        data_balance: 0, //剩余流量
        expiry_date: 0, //到期日期
      },
      hksiminp: "",
      timeRange: "", //时间范围picker
      btnSelected: null, //时间按钮高亮
      dataList: [], //所有数据
      options: {},
      // 状态信息
      equipStatus: {},
      // 统计图表信息
      equipChartData: [],
      //总数据条数
      total: 0,
      // 动态表头
      tableHeadTxt: [
        ["环境温度(°C)", "at"],
        ["环境湿度(%)", "ah"],
        ["加热仓温度(°C)", "hrt"],
        ["雨控状态", "rps"],
        ["温控状态", "tps"],
        ["光控状态", "lps"],
        ["灯管状态", "blbs"],
        ["信号强度", "csq"],
        ["电流(mA)", "current"],
        ["电压(V)", "vbat"],
        ["经度", "lng"],
        ["纬度", "lat"],
        ["上报时间", "addtime"],
      ],
      // 表格数据
      tableData: [],
      timeRange: "",
      queryInfo: {
        begin: "",
        end: "",
        e_id: this.$route.params.e_id,
        d_id: this.$route.params.d_id,
        // e_id: this.$route.query.e_id,
        // d_id: this.$route.query.d_id,
        page: 1,
      },
      //图表实时否有数据
      isEchartData: true,
      //表格和图表按钮样式切换参数
      display: "0", //0代表表格、1代表图表
      // 表格和图表显示切换控制
      showControl: true,
      //echarts图表参数
      echartOptions: [],
      // 动态表头
      tableHead: [],
      // 表格数据
      hisData: [],
      simCodeDialogVisible: false,
      f_id: "",
      // sim卡切换状态
      activeName: "sim",
      //导出弹框
      dialogVisible: false,
      optionsA: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "时间段",
        },
        // {
        //   value: "选项2",
        //   label: "时间段",
        // },
      ],
      value: "", //文件名称
      value1: "", //下载类型
      value2: "", //时间段
      timeShow: false, //选择时间
      ChartData: [
        {
          name: "温度（°C）",
          dat: [],
        },
        {
          name: "湿度（%）",
          dat: [],
        },
        {
          name: "加热仓温度（°C）",
          dat: [],
        },
      ],
      loadingInstance: {},
      equipStateDict: {}, //
      timeScreenData: null,
      code: null, //标识
      //保存一个标识，用来区分是点击还是自动获取
      sign: null,
    };
  },
  filters: {
    simStatus(val) {
      switch (val) {
        case 0:
          return "未知";
        case 1:
          return "测试期";
        case 2:
          return "沉默期";
        case 3:
          return "使用中";
        case 4:
          return "停机";
        case 5:
          return "停机保号";
        case 6:
          return "预销号";
        case 7:
          return "销号";
      }
    },

    retainThree(value) {
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        // 截取当前数据到小数点后三位
        let tempVal = parseFloat(value).toFixed(4);
        realVal = tempVal.substring(0, tempVal.length - 1);
      } else {
        realVal = "–";
      }
      return realVal;
    },

    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 15) + "...";
      }
      return value;
    },
  },
  computed: {
    data_usage_Per: function () {
      let aa = Number(this.sim.data_usage / this.sim.data_plan) * 100;
      return aa;
    },
    data_balance_per: function () {
      let aa = Number(this.sim.data_balance / this.sim.data_plan) * 100;
      return aa;
    },
    hkdata_usage_Per: function () {
      let aa = Number(this.hksim.data_usage / this.hksim.data_plan) * 100;
      return aa;
    },
    hkdata_balance_per: function () {
      let aa = Number(this.hksim.data_balance / this.hksim.data_plan) * 100;
      return aa;
    },
  },
  mounted() {
    this.equipStateDict = Circulation;
    this.getEquipStatus();
    this.refreshData();
    this.loadingInstance = Loading.service({
      fullscreen: false,
      target: document.getElementById("charts"),
    });
    this.options = this.optionFn(this.ChartData);
  },
  methods: {
    // 设置hightcharts配置
    refreshData() {
      HighCharts.setOptions({
        // 所有语言文字相关配置都设置在 lang 里
        lang: {
          resetZoom: "刷新",
          resetZoomTitle: "重置缩放比例",
        },
      });
    },
    optionFn(ChartData) {
      return {
        chart: {
          zoomType: "x",
        },
        title: {
          text: "环境温湿度",
          align: "left",
        },
        lang: {
          noData: "暂无数据",
        },
        noData: {
          style: {
            fontWeight: "bold",
            fontSize: "15px",
            color: "#303030",
          },
        },
        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: ChartData[0].name,
            data: ChartData[0].dat,
          },
          {
            name: ChartData[1].name,
            data: ChartData[1].dat,
          },
          {
            name: ChartData[2].name,
            data: 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",
                },
              },
            },
          ],
        },
        previous: 0,
      };
    },
    //获取折线图数据
    getChartLine() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_polyline_data",
        data: this.qs.stringify({
          device_type_id: 3,
          d_id: this.queryInfo.d_id,
          start_time: this.queryInfo.begin,
          end_time: this.queryInfo.end,
        }),
      }).then((res) => {
        console.log(this.sign + "这是变量");
        console.log(this.queryInfo.begin + "这是开始时间");
        console.log(res.data);
        // if (res.data.data && this.timeScreenData == null) {
        if (res.data.data.length == 0 && this.timeScreenData == null) {
          if (this.sign == this.queryInfo.begin || this.sign == null) {
            this.$refs.timeCirculation.say();
            console.log("这是自动的");
          } else {
            console.log("这是点击的");
          }
          this.sign = this.queryInfo.begin; //保存一个标识，用来区分是点击还是自动获取
        }

        if (res.data.message == "") {
          var data = res.data.data;
          this.ChartData[0].dat = [];
          this.ChartData[1].dat = [];
          this.ChartData[2].dat = [];
          for (let item of data) {
            if (item.new_tem) {
              this.ChartData[0].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                Number(item.new_tem),
              ]);
            } else {
              this.ChartData[0].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                Number(item.temperature),
              ]);
            }
            if (item.new_hum) {
              this.ChartData[1].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                Number(item.new_hum),
              ]);
            } else {
              this.ChartData[1].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                Number(item.humidity),
              ]);
            }
            this.ChartData[2].dat.unshift([
              item.addtime * 1000 + 8 * 3600000,
              Number(item.others),
            ]);
          }
          this.options = this.optionFn(this.ChartData);
          console.log(this.ChartData);
        }
        this.loadingInstance.close();
      });
    },
    // 获取状态信息
    getEquipStatus() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_status",
        data: this.qs.stringify({
          device_id: this.queryInfo.e_id,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.equipStatus = res.data.data;
          if (res.data.data.dver.indexOf("HK") != "-1" || res.data.data.dver.indexOf('HK') !== "-1") {
          // if (res.data.data.dver.indexOf("HK") != "-1") {
            //判断版本是否包含HK的
            this.showHksimFlag = true;
          } else {
            this.showHksimFlag = false;
          }
        } else {
          this.equipStatus.device_name = this.$route.query.name;
          this.equipStatus.address = this.$route.query.addr;
        }
      });
    },
    dateChange(data) {
      console.log(data);
      this.queryInfo.page = 1;
      this.queryInfo.begin = data.begin;
      this.queryInfo.end = data.end;
      this.getChartLine();
      this.getHisDataList();
    },
    // 当使用日期筛选
    timeScreen(data) {
      this.timeScreenData = data;
    },
    //获取表格数据
    getHisDataList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_history_data",
        data: this.qs.stringify({
          device_type_id: 3,
          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;
          this.tableData = [];
          if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
              var dht = data[i].d_h_t;
              dht.addtime = this.formatTime(dht.addtime * 1000);
              dht.rps = this.equipStateDict.rps.value[dht.rps];
              dht.tps = this.equipStateDict.tps.value[dht.tps];
              dht.lps = this.equipStateDict.lps.value[dht.lps];
              if (dht.ws == 0) {
                dht.blbs = "待机";
              } else {
                dht.blbs = this.equipStateDict.lamp.value[dht.lamp];
              }
              // if (dht.new_hum) {
              //   dht.ah = dht.new_hum;
              // }
              // if (dht.new_tem) {
              //   dht.at = dht.new_tem;
              // }
              this.tableData.push(dht);
            }
            console.log(this.tableData);
          }
        }
      });
    },
    //改变page
    changePage(val) {
      this.queryInfo.page = val;
      this.getHisDataList();
    },
    // SIM卡
    lookSIMCode(flag) {
      this.simLoading = true;
      this.simCodeVisible = true;
      if (flag == "sim") {
        if (!this.simFlag) {
          this.simLoading = false;
          return false;
        }
      }
      this.$axios({
        method: "post",
        url: "/api/api_gateway?method=monitor_manage.cbd_manage.device_sim",
        data: this.qs.stringify({
          d_id: this.queryInfo.d_id,
          type: flag,
        }),
      }).then((res) => {
        if (res.data.message == "" && res.data.data.length !== 0) {
          if (flag == "sim") {
            this.sim.iccid = res.data.data[0].iccid;
          } else {
            this.hksim.iccid = res.data.data[0].iccid;
          }
          var curriccid = res.data.data[0].iccid;
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=monitor_manage.cbd_manage.sim_query",
            data: this.qs.stringify({
              iccid: curriccid,
            }),
          }).then((res) => {
            let data = res.data.data.data.data;
            console.log(data);
            console.log(res.data.data.data);
            this.code = res.data.data.code;
            if (res.data.data.code == 2) {
              // 合宙
              if (res.data.data.data.msg == "") {
                this.simLoading = false;
                let cardInfo = res.data.data.data.data;
                if (flag == "sim") {
                  if (cardInfo) {
                    this.sim = res.data.data.data.data;
                    this.sim.expiry_date = this.formatTime(
                      res.data.data.data.data.expiry_date * 1000
                    );
                    // this.sim.data_plan = res.data.data.data.data.data_plan + 'MB';
                    this.sim.account_status =
                      this.equipStateDict.simStatus.value[
                        cardInfo.account_status
                      ].name;
                  } else {
                    this.sim = {
                      iccid: curriccid,
                      account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
                      data_plan: 0, //套餐大小
                      data_usage: 0, //当月用量
                      data_balance: 0, //剩余流量
                      expiry_date: 0, //到期日期
                    };
                  }
                } else {
                  if (cardInfo) {
                    this.hksim = res.data.data.data.data;
                    this.hksim.expiry_date = this.formatTime(
                      res.data.data.data.data.expiry_date * 1000
                    );
                    this.hksim.account_status =
                      this.equipStateDict.simStatus.value[
                        cardInfo.account_status
                      ].name;
                  } else {
                    this.hksim = {
                      iccid: curriccid,
                      account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
                      data_plan: 0, //套餐大小
                      data_usage: 0, //当月用量
                      data_balance: 0, //剩余流量
                      expiry_date: 0, //到期日期
                    };
                  }
                }
              } else {
                this.$message({
                  type: "info",
                  message: "查询失败",
                });
              }
            } else if (res.data.data.code == 1) {
              // 企鹏
              if (res.data.data.data.message == "OK") {
                let cardInfo = data;
                this.simLoading = false;
                if (flag == "sim") {
                  if (cardInfo) {
                    // 卡状态
                    if (data.status == "testing") {
                      var a = "测试中";
                    } else if (data.status == "inventory") {
                      var a = "库存";
                    } else if (data.status == "pending-activation") {
                      var a = "待激活";
                    } else if (data.status == "activation") {
                      var a = "已激活";
                    } else if (data.status == "deactivation") {
                      var a = "已停卡";
                    } else if (data.status == "retired") {
                      var a = "已销卡";
                    }
                    // 套餐
                    // var b = data.iratePlanName;
                    // b = b.split("M/月");

                    this.sim = {
                      iccid: curriccid,
                      account_status: a,
                      // data_plan: Number(b[0]), //套餐大小
                      data_plan: data.iratePlanName, //套餐大小
                      data_usage: data.dataUsage, //当月用量
                      // data_balance: Number(b[0]) - data.dataUsage, //剩余流量
                      expiry_date: data.expireDate, //到期日期
                    };
                  } else {
                    this.sim = {
                      iccid: curriccid,
                      account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
                      data_plan: 0, //套餐大小
                      data_usage: 0, //当月用量
                      data_balance: 0, //剩余流量
                      expiry_date: 0, //到期日期
                    };
                  }

                  this.simFlag = false;
                } else {
                  if (cardInfo) {
                    // this.hksim = cardInfo;
                    // 卡状态
                    if (data.status == "testing") {
                      var a = "测试中";
                    } else if (data.status == "inventory") {
                      var a = "库存";
                    } else if (data.status == "pending-activation") {
                      var a = "待激活";
                    } else if (data.status == "activation") {
                      var a = "已激活";
                    } else if (data.status == "deactivation") {
                      var a = "已停卡";
                    } else if (data.status == "retired") {
                      var a = "已销卡";
                    }
                    // 套餐
                    // var b = data.iratePlanName;
                    // b = b.split("M/月");
                    console.log(data.iratePlanName);

                    this.hksim = {
                      iccid: curriccid,
                      account_status: a,
                      // data_plan: Number(b[0]), //套餐大小
                      data_plan: data.iratePlanName, //套餐大小
                      data_usage: data.dataUsage, //当月用量
                      // data_balance: Number(b[0]) - data.dataUsage, //剩余流量
                      expiry_date: data.expireDate, //到期日期
                    };
                    console.log(this.hksim.data_plan);
                  } else {
                    this.hksim = {
                      iccid: curriccid,
                      account_status: 0, //卡状态 0-7 未知 测试期 沉默期 使用中 停机 停机保号 预销号 销号
                      data_plan: 0, //套餐大小
                      data_usage: 0, //当月用量
                      data_balance: 0, //剩余流量
                      expiry_date: 0, //到期日期
                    };
                  }
                }
              } else {
                this.$message({
                  type: "info",
                  message: "查询失败",
                });
              }
            } else if (res.data.data.code == 3) {
              this.$message({
                type: "info",
                message: "查询失败",
              });
              // this.simCodeVisible = false;
            }
            this.simLoading = false;
          });
        } else {
          this.$message({
            type: "info",
            message: "查询失败",
          });
          // this.simCodeVisible = false;
        }
        this.simLoading = false;
      });
    },
    //sim卡状态
    handleClick(tab, event) {
      // if (event.target.innerText == "海康SIM卡流量" && this.hksimFlag) {
      if (event.target.innerText == "图片SIM卡流量" && this.hksimFlag) {
        this.hksimFlag = false;
        console.log(event.target.innerText);
        this.lookSIMCode("hksim");
      }
    },
    //绑定更换海康SIM
    changeHkSim() {
      if (this.hksiminp) {
        this.$axios({
          method: "post",
          url: "/api/api_gateway?method=monitor_manage.cbd_manage.device_sim",
          data: this.qs.stringify({
            d_id: this.newd_id,
            iccid: this.hksiminp,
            type: "change",
          }),
        }).then((res) => {
          this.hksiminp = "";
          if (res.data.data == "1") {
            // this.lookSIMCode("hksim");
            this.$message({
              type: "success",
              message: "绑定成功",
            });
            this.simSet(this.simID, "hksim");
            this.lookSIMCode("hksim");
          }else{
            this.$message.error(res.data.message)
          }
        });
      }else{
        this.$message.error("ICCID不能为空！")
      }
    },
    //刷新按钮
    refresh() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.cbd_manage.cbd_device_control",
        data: this.qs.stringify({
          device_type_id: 3,
          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;
      console.log(this.value1);
      if (that.value == ""|| that.value1 == "") {
        this.$message({
          message: "请将必填项填写完整",
          type: "warning",
          duration: 1500,
        });
      } else{
        var begin = "";
        var end = "";
        // if (that.value1 == "") {
        //   // begin = parseInt(new Date(that.value2[0]).getTime() / 1000);
        //   // end = parseInt(new Date(that.value2[1]).getTime() / 1000);
        //   begin = this.queryInfo.begin;
        //   end = this.queryInfo.end;
        // } else {
        //   begin = "";
        //   end = "";
        // }
        if (that.value1=="选项2") {
          begin = this.queryInfo.begin;
          end = this.queryInfo.end;
        } else if(that.value1=="选项1"){
          begin = "";
          end = "";
        }
        var username = localStorage.getItem("cUsername")
        window.location.href =
          this.$deriveData +
          // "http://192.168.1.77:8002"+
          "/api/cbd_export?device_id=" +
          that.$route.params.d_id +
          "&filename=" +
          that.value +
          "&start_time=" +
          begin +
          "&end_time=" +
          end +
          "&device_type=3"+
          "&username=" +
          username;
      }

      // 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=" +
      //     that.$route.params.d_id +
      //     "&filename=" +
      //     that.value +
      //     "&start_time=" +
      //     begin +
      //     "&end_time=" +
      //     end +
      //     "&device_type=3";
      // }
    },
    setWidth(item) {
      if (item[1] == "addtime") {
        return 180 + "px";
      }
    },
    hksiminpinput() {
      // const reg = /.*[\u4e00-\u9fa5]+.*$/gi;
      // if (reg.test(this.hksiminp)) {
      //   this.hksiminp = "";
      // }
      if (!/^[0-9][a-z][A-Z]+$/.test(this.accountName)) {
        this.$message.error("只能输入数字及英文");
      }
    },
  },
  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;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 8px;
  .equipMsg {
    font-size: 14px;
    color: #3d3d3d;
  }
}
.ctrl-check {
  margin-bottom: 20px;
}

.time-check {
  display: flex;
  justify-content: space-between;
  .el-button {
    border-radius: 30px;
  }
  .el-input__inner {
    width: 222px;
  }
}
.charts {
  // height: 445px;
  height: 450px;
}
.equipStatus {
  display: flex;
  justify-content: left;
  margin: 10px 0;
  .equipIcon {
    margin: 0 10%;
  }
  .equipParams {
    min-width: 80px;
    line-height: 27px;
    p {
      color: #a6a6a6;
    }
  }
}

.dataTableSearch {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  .el-input__inner {
    width: 222px;
  }
}
.echarts {
  width: 100%;
  height: 300px;
}
.simCodeBox {
  > div {
    line-height: 40px;
    display: flex;
    align-content: center;
    .simCodeTitle {
      width: 100px;
      text-align: right;
      font-size: 14px;
      color: #333;
    }
    > div {
      flex: 1;
      .el-progress {
        margin-top: 17px;
      }
    }
    span {
      width: 85px;
      font-size: 12px;
      padding-left: 3px;
      color: #909090;
    }
    .el-input {
      width: 60%;
    }
  }
  .operateBtn {
    display: block;
    text-align: right;
  }
}

.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%;
}

// 表格文字居中
/deep/.el-table th > .cell {
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}
</style>