<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">查询</el-button>
              <el-button type="primary">设置</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">
            <el-tab-pane label="查询实际参数" name="first">
              <div class="queryParam">
                <el-form
                  :model="deviceTimeForm"
                  label-position="right"
                  label-width="124px"
                >
                  <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"
                      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="采集周期（分钟）">
                    <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="上位机" 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">装置运行状态</el-tab-pane>
      <el-tab-pane label="GPS位置" name="8">GPS位置</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 } 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: "1",
      deviceTimeForm: {
        zztime: "", //装置时间
        newzztime: "", //新装置时间
      },
      tabsActive: "first",
      rowData: {},
    };
  },
  mounted() {},
  created() {},
  watch: {},
  methods: {
    //tab被触发
    handleClick(tab, event) {
      console.log(tab, event);
      //每次切换重置选项卡
      this.tabsActive = "first";
    },
    //装置复位
    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;
    },
  },
};
</script>
<style lang="less">
.parameterSetDialog {
  .el-tabs__content {
    height: 479px;
    .deviceTime {
      width: 400px;
      margin: 0 auto;
      margin-top: 24px;
      .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;
      }
    }
  }
}
</style>
