<template>
  <div>
    <!-- 标题 -->
    <el-row>
      <el-col
        :span="24"
        class="first-row"
      >
        <div class="tag">系统设置</div>
      </el-col>
    </el-row>

    <!-- 分割线 -->
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;">
    <div style="margin: 20px 0;"></div>

    <!-- 内容区域 -->
    <el-row>
      <el-col :span="5">
        管理端推送时间间隔
      </el-col>

      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput"
        >{{inputValue}}</el-button>
        分钟
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      inputVisible: false, //输入框和按钮切换控制
      inputValue: "", //输入框绑定数据
      id: "", //修改id
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 失去焦点或者回车 切换回按钮框 并更新数据
    handleInputConfirm() {
      this.inputVisible = false;
      this.inputValue = this.inputValue;
      this.amendData();
    },
    // 点击按钮 切换输入框 并聚焦
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 获取 管理端推送时间间隔 信息
    async getData() {
      let res = await this.$axios({
        url: "/diseaseRight/warningOfSmokeRecord/setting/info",
        method: "get",
      });
      // console.log(res);
      if (res.data.success) {
        this.inputValue = res.data.data.pushFrequency / 60;
        this.id = res.data.data.id;
      } else {
        console.log("获取 管理端推送时间间隔 请求失败");
      }
    },
    // 修改 管理端推送时间间隔
    async amendData() {
      let data = {
        id: this.id,
        pushFrequency: this.inputValue * 60,
      };
      let res = await this.$axios({
        url: "/diseaseRight/warningOfSmokeRecord/setting/update",
        method: "put",
        data,
        headers: {
          "Admin-Token": sessionStorage.getItem("token"),
        },
      });
      // console.log(res);
      if (res.data.success) {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "修改失败",
          type: "error",
        });
      }
      this.getData();
    },
  },
};
</script>

<style scoped>
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.tag {
  width: 108px;
  height: 40px;
  font-size: 24px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: bold;
  color: #000000;
  line-height: 54px;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: middle;
}
.button-new-tag {
  width: 90px;
  margin-left: 10px;
  height: 32px;
  vertical-align: middle;
}
</style>