<template>
  <el-dialog
    class="parameterSetDialog"
    title="参数设置"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="1100px"
    @close="handleclose"
  >
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <!-- <el-tab-pane label="装置时间" name="1">
        <div class="deviceTime">
          <el-form
            :model="deviceTimeForm"
            label-position="right"
            label-width="84px"
          >
            <el-form-item label="装置时间">
              <el-input
                v-model="deviceTimeForm.zztime"
                disabled="disabled"
              ></el-input>
            </el-form-item>
            <el-form-item label="新装置时间">
              <el-input v-model="deviceTimeForm.newzztime"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchTime">查询</el-button>
              <el-button type="primary" @click="setTime">设置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane> -->
      <el-tab-pane label="采样参数" name="2">
        <div class="tabsBox">
          <el-tabs v-model="tabsActive" type="card" @tab-click="handleClick">
            <el-tab-pane label="查询实际参数" name="first">
              <div class="queryParam">
                <el-form
                  :model="samplingForm"
                  label-position="right"
                  label-width="152px"
                >
                  <el-form-item label="采集时间周期（分钟）">
                    <el-input
                      v-model="samplingForm.mainTime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="高速采样点数">
                    <el-input
                      v-model="samplingForm.sampleCount"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="高速采样频率">
                    <el-input
                      v-model="samplingForm.sampleFrequency"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="心跳上送周期（分钟）">
                    <el-input
                      v-model="samplingForm.heartbeatTime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="samplingSearch"
                      >查询</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="设置参数" name="second">
              <div class="queryParam">
                <el-form
                  :model="samplingForm"
                  label-position="right"
                  label-width="164px"
                  ref="samplingFormref"
                  :rules="samplingrules"
                >
                  <el-form-item label="采集时间周期（分钟）">
                    <el-input v-model="samplingForm.mainTime"></el-input>
                  </el-form-item>
                  <el-form-item label="高速采样点数">
                    <el-input v-model="samplingForm.sampleCount"></el-input>
                  </el-form-item>
                  <el-form-item label="高速采样频率">
                    <el-input v-model="samplingForm.sampleFrequency"></el-input>
                  </el-form-item>
                  <el-form-item
                    label="心跳上送周期（分钟）"
                    prop="heartbeatTime"
                  >
                    <el-input v-model="samplingForm.heartbeatTime"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="samplingSet"
                      >设置</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="上位机信息" name="3">
        <div class="tabsBox">
          <el-tabs v-model="tabsActive" type="card">
            <el-tab-pane label="查询实际参数" name="first">
              <div class="queryParam">
                <el-form
                  :model="deviceTimeForm"
                  label-position="right"
                  label-width="124px"
                >
                  <el-form-item label="IP地址">
                    <el-input
                      v-model="deviceTimeForm.zztime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="端口号">
                    <el-input
                      v-model="deviceTimeForm.newzztime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="域名">
                    <el-input
                      v-model="deviceTimeForm.newzztime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="设置参数" name="second">
              <div class="queryParam">
                <el-form
                  :model="deviceTimeForm"
                  label-position="right"
                  label-width="124px"
                >
                  <el-form-item label="IP地址">
                    <el-input v-model="deviceTimeForm.zztime"></el-input>
                  </el-form-item>
                  <el-form-item label="端口号">
                    <el-input v-model="deviceTimeForm.newzztime"></el-input>
                  </el-form-item>
                  <el-form-item label="域名">
                    <el-input v-model="deviceTimeForm.newzztime"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">设置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="ID参数" name="4">
        <div class="tabsBox">
          <el-tabs v-model="tabsActive" type="card">
            <el-tab-pane label="查询实际参数" name="first">
              <div class="queryParam">
                <el-form
                  :model="deviceTimeForm"
                  label-position="right"
                  label-width="124px"
                >
                  <el-form-item label="CMD_ID">
                    <el-input
                      v-model="deviceTimeForm.zztime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="杆塔ID">
                    <el-input
                      v-model="deviceTimeForm.newzztime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="原始ID">
                    <el-input
                      v-model="deviceTimeForm.newzztime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="设置参数" name="second">
              <div class="queryParam">
                <el-form
                  :model="deviceTimeForm"
                  label-position="right"
                  label-width="124px"
                >
                  <el-form-item label="CMD_ID">
                    <el-input v-model="deviceTimeForm.zztime"></el-input>
                  </el-form-item>
                  <el-form-item label="杆塔ID">
                    <el-input v-model="deviceTimeForm.newzztime"></el-input>
                  </el-form-item>
                  <el-form-item label="原始ID">
                    <el-input
                      v-model="deviceTimeForm.newzztime"
                      disabled="disabled"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">设置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图像采集参数" name="5">
        <div class="tabsBox">
          <imageCapture ref="imageCaptureref"></imageCapture>
        </div>
      </el-tab-pane>

      <el-tab-pane label="视频采集参数" name="6">
        <div class="tabsBox">
          <videoCapture ref="videoCaptureref"></videoCapture>
        </div>
      </el-tab-pane>
      <el-tab-pane label="装置运行状态报" name="7">
        <div class="runform">
          <el-form :model="runStatusForm" :inline="true" label-width="150px">
            <el-form-item label="4G信号强度">
              <el-input
                v-model="runStatusForm.zztime"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="2G信号强度">
              <el-input
                v-model="runStatusForm.newzztime"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="剩余运行内存">
              <el-input
                v-model="runStatusForm.newzztime"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="剩余存储内存">
              <el-input
                v-model="runStatusForm.newzztime"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="上次启动时间">
              <el-input
                v-model="runStatusForm.newzztime"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="查询最新时间">
              <el-input
                v-model="runStatusForm.newzztime"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item class="runformbtn">
              <el-button type="primary" @click="runstatusSearch"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="GPS位置" name="8">
        <div class="runform">
          <el-form :model="gpsForm" :inline="true" label-width="150px">
            <!-- <el-form-item label="坐标类型">
              <el-input v-model="gpsForm.zztime" :disabled="true"></el-input>
            </el-form-item> -->

            <el-form-item label="经度">
              <el-input v-model="gpsForm.longitude" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="纬度">
              <el-input v-model="gpsForm.latitude" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="半径">
              <el-input v-model="gpsForm.radius" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="查询最新时间">
              <!-- <el-input
                v-model="gpsForm.updatetime"
                :disabled="true"
              ></el-input> -->
              <el-date-picker
                :disabled="true"
                v-model="gpsForm.updatetime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item class="runformbtn">
              <el-button type="primary" @click="gpsSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="基本操作" name="9">
        <div class="resetDevice">
          <h3>装置复位</h3>
          <el-button type="primary" @click.native.stop="handleDeviceReset"
            >复位</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  resetTerminalApi,
  getTermLastGPSPosition,
  setTermCamera,
  getTermCameraRequest,
} from "@/utils/api/index";

import imageCapture from "./imageCapture.vue";
import videoCapture from "./videoCapture.vue";
export default {
  props: {
    photoDialog: {
      type: Boolean,
    },
  },
  components: {
    imageCapture,
    videoCapture,
  },
  data() {
    return {
      isShow: false,
      activeName: "2",
      deviceTimeForm: {
        zztime: "", //装置时间
        newzztime: "", //新装置时间
      },
      //采样参数
      samplingForm: {
        mainTime: "",
        sampleCount: "",
        sampleFrequency: "",
        heartbeatTime: "",
      },
      samplingrules: {
        heartbeatTime: [
          { required: true, message: "请输入心跳周期", trigger: "blur" },
        ],
      },

      runStatusForm: {},
      gpsForm: {}, //gps位置
      tabsActive: "first",
      rowData: {},
      requestid: "",
      timer: null,
      i: 0,
    };
  },
  mounted() {},
  created() {},
  watch: {},
  methods: {
    //tab被触发
    handleClick(tab, event) {
      console.log(tab, event);
      //每次切换重置选项卡
      this.tabsActive = "first";
      if (tab.label == "图像采集参数") {
        console.log("图像采集参数");
        this.$refs.imageCaptureref.getSingleAccess(this.rowData);
        this.$refs.imageCaptureref.getRatio();
      } else if (tab.label == "视频采集参数") {
        console.log("视频采集参数");
        this.$refs.videoCaptureref.getSingleAccess(this.rowData);
        this.$refs.videoCaptureref.getRatio();
      }
    },
    //装置时间查询
    searchTime() {},
    //装置时间设置
    setTime() {},
    //重置数据
    handleClick() {
      this.samplingForm = {};
    },
    //采样参数查询
    // -act=sampling [0xA4 ] --flag=[Request Set Flag, default is set=1, 0: request] --rf=[Request Flag] --reqtype=[Request Type] --maintime=[Main Time] --samplecount=[Sample Count] --samplingfreq=[Sample Frequency] --heartbeat=[Heartbeat Time]
    samplingSearch() {
      let params = [
        {
          name: "act",
          value: "sampling",
        },
        {
          name: "flag",
          value: 0,
        },
        {
          name: "rf",
          value: 15,
        },
        {
          name: "reqtype",
          value: "0xA4",
        },
        {
          name: "maintime",
          value: "",
        },
        {
          name: "samplecount",
          value: "",
        },
        {
          name: "samplingfreq",
          value: "",
        },
        {
          name: "heartbeat",
          value: "",
        },
      ];
      this.setTermFn(params);
    },
    samplingSet() {
      this.$refs.samplingFormref.validate((valid) => {
        if (valid) {
          console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
          console.log(this.samplingForm);
          console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
          let params = [
            {
              name: "act",
              value: "sampling",
            },
            {
              name: "flag",
              value: 1,
            },
            {
              name: "rf",
              value: 15,
            },
            {
              name: "reqtype",
              value: "0xA4",
            },
            {
              name: "maintime",
              value: this.samplingForm.mainTime,
            },
            {
              name: "samplecount",
              value: this.samplingForm.sampleCount,
            },
            {
              name: "samplingfreq",
              value: this.samplingForm.sampleFrequency,
            },
            {
              name: "heartbeat",
              value: this.samplingForm.heartbeatTime,
            },
          ];
          this.setTermFn(params);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //装置状态报
    runstatusSearch() {
      let params = [
        {
          name: "act",
          value: "runningstatus",
        },
      ];
      this.setTermFn(params);
    },
    setTermFn(dataParams) {
      console.log("点击了统一的接口", "runningstatus");
      setTermCamera({
        termId: this.rowData.id,
        list: dataParams,
      })
        .then((res) => {
          console.log(res);
          this.requestid = res.data.requestId;
          this.getinfo();
          this.timer = window.setInterval(() => {
            this.getinfo();
            this.i++;
          }, 1000);
        })
        .catch((err) => {});
    },
    getinfo() {
      getTermCameraRequest({ requestid: this.requestid })
        .then((res) => {
          if (res.data.success == 1) {
            // && res.data.result == 255
            console.log(JSON.parse(res.data.data));
            this.samplingForm = JSON.parse(res.data.data);
            this.i = 0;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "信息已更新",
              type: "success",
            });
            clearInterval(this.timer);
          } else if (this.i > 9) {
            this.loading = false;
            this.i = 0;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "暂未获取到信息，请稍后再试！！",
              type: "warning",
            });
            clearInterval(this.timer);
          }
        })
        .catch();
    },
    //gps位置查询
    gpsSearch() {
      console.log(this.rowData);
      getTermLastGPSPosition({
        termId: this.rowData.id,
      })
        .then((res) => {
          this.gpsForm = res.data;
          console.log(this.gpsForm);
          $moment().format("YYYY-MM-DD HH:mm:ss");
          // this.$message({
          //   duration: 1500,
          //   showClose: true,
          //   message: "gps信息已更新",
          //   type: "success",
          // });
        })
        .catch((err) => {});
    },
    //装置复位
    handleDeviceReset() {
      this.$confirm("此操作将复位装置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetTerminalApi({ cmId: this.rowData.cmdId })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  duration: 1500,
                  showClose: true,
                  message: "装置已复位",
                  type: "success",
                });
              } else {
                this.$message({
                  duration: 1500,
                  showClose: true,
                  message: res.msg,
                  type: "error",
                });
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          // this.$message({
          //   duration: 1500,
          //   showClose: true,
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    display(val) {
      this.isShow = true;
      this.rowData = val;
      console.log(this.rowData);
    },
    hide() {
      this.isShow = false;
    },
    handleclose() {
      this.isShow = false;
      this.activeName = "2";
      this.tabsActive = "first";
      this.gpsForm = {};
    },
  },
};
</script>
<style lang="less">
.parameterSetDialog {
  .el-tabs__content {
    height: 436px;
    .deviceTime {
      width: 400px;
      margin: 0 auto;
      margin-top: 24px;
      .el-input {
        width: 200px;
      }
    }
    .runform {
      width: 730px;
      margin: 0 auto;
      margin-top: 24px;
      .runformbtn {
        margin-top: 10px;
        width: 100%;
        display: flex;
        .el-form-item__content {
          margin: auto;
        }
      }
      .el-input {
        width: 200px;
      }
    }
    .queryParam {
      width: 400px;
      margin: 0 auto;
      margin-top: 24px;
      .el-input {
        width: 200px;
      }
    }
    .resetDevice {
      h3 {
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: normal;
      }
    }
    .tabsBox {
      .el-tabs__item.is-active {
        color: #fff;
        background-color: #169e8c;
      }
    }
    .el-input.is-disabled .el-input__inner {
      color: #666;
    }
  }
}
</style>
