<!--  -->
<template>
  <div class="baselistbox">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title">
        <p>墒情监测</p>
        <div class="warningInfo" v-if="warningList.length !== 0">
          <div class="title" @click="showWarningInfo">
            <div>
              <i class="iconfont el-icon-s-order" style="margin-right: 10px"></i
              >{{ onewarning.device_id | subDeviceId }}
              {{ onewarning.warning_content }}
            </div>
            <i class="el-icon-bell"></i>
          </div>
          <ul
            class="warningInfoList"
            v-if="isWarningList"
            v-infinite-scroll="load"
            infinite-scroll-delay="200"
            infinite-scroll-immediate="false"
          >
            <li @click="oneWarningList()">
              <div style="padding-left: 10px">
                <i class="iconfont el-icon-s-promotion"></i>一键已读
              </div>
            </li>
            <li v-for="(item, index) in warningList" :key="index">
              <el-popover placement="left" trigger="click" style="">
                <div style="padding: 5px 0px; width: 500px">
                  设备编号：{{ item.device_id }}
                </div>
                <div style="padding: 5px 0px; width: 500px; line-height: 30px">
                  详细信息：{{
                    setData(
                      item.ekey,
                      item.current_value,
                      item.warning_content,
                      item.set_value
                    )
                  }}
                </div>
                <el-button
                  slot="reference"
                  @click="yidu(item.d_id)"
                  style="background-color: transparent"
                >
                  <i class="circle" v-if="item.status == 0"></i>
                  <div
                    style="width: 60%; text-align: left"
                    :class="item.status == 0 ? 'active' : ''"
                  >
                    {{ item.device_id | subDeviceId }}
                    {{ item.warning_content }}
                  </div>
                  <span :class="item.status == 0 ? 'active' : ''">{{
                    (item.upltime * 1000) | formatTime
                  }}</span>
                </el-button>
              </el-popover>
            </li>
          </ul>
        </div>
      </div>
      <p class="baselistbox_top_line"></p>
      <div class="baselistbox_top_search">
        <div class="left_search">
          <div class="firstsearch">
            <span class="biaoti">设备ID或名称</span>
            <el-input
              v-model="queryInfo.f_id"
              size="mini"
              placeholder="请输入设备ID或名称"
            ></el-input>
          </div>
          <div class="secsearch">
            <span class="biaoti">设备状态</span>
            <el-select
              v-model="queryInfo.is_online"
              size="mini"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="right_search">
          <div class="btnbox" @click="searchChange">查询</div>
          <div class="btnbox2" @click="empty">重置</div>
        </div>
      </div>
    </div>
    <div class="baselistbox_table">
      <el-table
        v-loading="loading"
        :data="equipList"
        stripe
        style="width: 100%"
        height="560px"
        :default-sort="{ order: 'uptime' }"
      >
        <el-table-column label="设备名称" width="180">
          <template slot-scope="scope">{{
            (scope.row.equip_name == "" ? "无" : scope.row.equip_name)
              | ellipsisname
          }}</template>
        </el-table-column>
        <el-table-column
          prop="equip_id"
          label="设备ID"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="volt"
          label="电压（V）"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="rssi"
          label="信号强度"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="uptime"
          sortable
          label="最新上报时间"
          width="200"
        >
          <template slot-scope="scope">{{
            (scope.row.uptime * 1000) | formatTime
          }}</template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
          <template slot-scope="scope">{{
            scope.row.address || "无" | ellipsis
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="350" fixed="right">
          <template slot-scope="scope">
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="
                equipSet(
                  scope.row.d_id,
                  scope.row.equip_id,
                  scope.row.equip_name
                )
              "
              >设备控制</span
            >
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="check24Data(scope.row.equip_id)"
              >24小时数据</span
            >
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="goHistoryData(scope.row.equip_id, scope.row.d_id)"
              >历史数据</span
            >
            <span
              style="color: #4f71ff; margin-right: 15px; cursor: pointer"
              @click="dataWarning(scope.row.equip_id)"
              >预警设置</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="totalNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryInfo.page_size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-size.sync="queryInfo.page"
          :key="queryInfo.pagekey"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 参数设置对话框 -->
    <el-dialog
      title="设备控制"
      :visible.sync="setDialogVisible"
      @close="equipControlDialogClosed"
      width="600px"
      v-loading="parameterLoading"
      :element-loading-text="setDialogTxt"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="set_item">
        <span>设备编号</span><span>{{ equipInfo.equip_id }}</span>
      </div>
      <div class="set_item">
        <span>设备名称</span> <el-input size="mini" v-model="equipInfo.equip_name" placeholder="请输入内容" style="width:200px;" :maxlength="10"></el-input>
      </div>
      <div class="tit">上传时间间隔</div>
      <div class="set_item">
        <span>上传时间间隔</span>
        <div class="sliderParent" style="margin-left: 8px">
          <div class="block">
            <el-slider
              v-model="setFrom.interval"
              show-input
              :min="1"
              :max="359"
              size="mini"
            ></el-slider>
          </div>
        </div>
        <span style="margin-left: 15px">min</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDialogVisible = false" size="small"
          >取 消</el-button
        >
        <el-button type="primary" @click="equipSetSubm()" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="短信预警" :visible.sync="simCodeVisible" width="570px">
      <template>
        <el-tabs v-loading="simLoading" element-loading-text="数据请求中">
          <!-- 预警手机号 -->
          <div class="warningMessage-box">
            <div class="warningMessage-phone">预警手机号</div>
            <el-input
              class="warningMessage-ipt"
              placeholder="请输入手机号"
              v-model="phoneNumberA"
              maxlength="11"
              clearable
              size="mini"
            >
            </el-input>
            <el-button
              @click="confirmPhone"
              class="warningMessage-btn"
              type="primary"
              size="mini"
              >确定</el-button
            >
          </div>

          <el-table
            :data="tableData"
            border
            style="width: 100%; margin: 0.25rem 0 0 0"
          >
            <el-table-column prop="ekey" label="通道号"></el-table-column>
            <el-table-column prop="name" label="要素"></el-table-column>
            <el-table-column prop="type" label="类型" width="180">
              <template slot-scope="scope">
                <el-switch
                  class="switch"
                  v-model="scope.row.type"
                  active-text="大于"
                  inactive-text="小于"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="switchChangeFin(scope.$index, scope.row.type)"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column
              :render-header="renderHeader"
              prop="alarmVal"
              label="阈值"
              width="180"
            >
              <template slot-scope="scope">
                <el-input
                  class="warningMessage-ipt"
                  v-model="scope.row.alarmVal"
                  type="number"
                  clearable
                >
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-tabs>
      </template>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  filters: {
    ellipsisname(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 14) {
        return value.slice(0, 13) + "...";
      }
      return value;
    },
    subDeviceId(data) {
      if (!data) return "";
      let id = data.substring(data.length - 6);
      return id;
    },
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      queryInfo: {
        page_size: "10",
        page: "1",
        is_online: "",
        f_id: "",
        pagekey:1
      },
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "在线",
        },
        {
          value: "0",
          label: "离线",
        },
      ],
      equipList: [],
      loading: false,
      setDialogVisible: false,
      parameterLoading: false,
      setFrom: {},
      equipInfo: {},
      setDialogTxt: "请求中",
      simCodeVisible: false,
      phoneNumberA: "",
      tableData: [],
      simLoading: false,
      id: "",
      totalNum: 0,
      isWarningList: false,
      warningList:[],
      onewarning: {
        warning_status: "",
        device_id: "",
      },
      hjjcWarningPage:"",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //获取设备列表
    getEquipList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=weather.weather.qxz_page",
        data: this.qs.stringify({
          page: this.queryInfo.page,
          device_id: this.queryInfo.f_id,
          page_size: this.queryInfo.page_size,
          device_status: this.queryInfo.is_online,
          device_type: "8",
        }),
      })
        .then((res) => {
          console.log(res);
          if (res.data) {
            let _this = this;
            this.equipList = [];
            let data = res.data.data.ids;
            if (data.length > 0) {
              // getList(0, data.length);
              this.equipList = data;
            } else {
              _this.equipList = [];
            }
            console.log(this.equipList);
            this.totalNum = Number(res.data.data.nums);
            // this.totalNum = res.data.data.nums;
          }
          this.loading = false;
          // this.$nextTick(() => {
          //   document.getElementsByClassName("number")[0].innerText = "首页";
          //   var length = document.getElementsByClassName("number").length;
          //   document.getElementsByClassName("number")[length - 1].innerText =
          //     "末页";
          // });
        })
        .catch(() => {
          this.$message.error("获取数据失败！");
          this.loading = false;
        });
    },
    handleSizeChange(e) {
      this.queryInfo.page_size = e;
      this.getEquipList();
    },
    handleCurrentChange(e) {
      this.queryInfo.page = e;
      this.getEquipList();
    },
    searchChange() {
      this.queryInfo.page = 1;
      this.queryInfo.pagekey = Math.random()*10+1;
      this.getEquipList();
    },
    empty() {
      this.queryInfo.page = 1;
      this.queryInfo.pagekey = Math.random()*10+1;
      this.queryInfo.is_online = "";
      this.queryInfo.f_id = "";
      this.getEquipList();
    },
    equipSet(d_id, equip_id, equip_name) {
      this.equipInfo = { d_id, equip_id, equip_name };
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.device_control_info",
        data: this.qs.stringify({
          d_id,
          cmd: "config",
        }),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data) {
          this.setFrom.interval = res.data.data.interval;
          if (res.data.data.admin == 1) {
            this.upgradeTF = true;
          } else {
            this.upgradeTF = false;
          }
        } else {
          // this.$message.warning(res.data.message);
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: res.data.message,
              type: "warning",
              duration: 1500,
              customClass: "zZindex",
            });
          }
          this.upgradeTF = false;
        }
        this.setDialogVisible = true;
      });
    },
    equipControlDialogClosed() {
      this.setFrom = {
        //设备控制
        content: "",
        timeout: null,
        interval: 0,
      };
    },
    equipSetSubm() {
      console.log(this.setFrom);
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.device_control",
        data: this.qs.stringify({
          device_type_id: 8,
          d_id: this.equipInfo.d_id,
          config: JSON.stringify(this.setFrom),
           device_name:this.equipInfo.equip_name
        }),
      }).then((res) => {
        if (res.data.message == "") {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.success("操作成功");
          }
          this.getEquipList()
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.err("操作失败");
          }
        }
        this.setDialogVisible = false;
      });
    },
    showTimeControlDialog(d_id, id) {
      this.device_id = id;
      this.$router.push({
        path: `/index/pestsStats`,
        query: { d_id: d_id, identify_model: "A" },
      });
    },
    // 数据预警
    dataWarning(id) {
      this.simCodeVisible = true;
      this.warningAxios(id);
      this.id = id;
    },
    warningAxios(id) {
      var that = this;
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_early_warning",
          data: that.qs.stringify({
            device_id: id,
            status: "see", //当status == see查看  status == save 保存
            alarm: "", //配置信息
            device_type: "8",
          }),
        })
        .then((res) => {
          // 测试
          var data = res.data.data.conf;
          var arr = [];
          var len = Object.keys(data).length;
          if (res.data.data.alarm) {
            var phone = res.data.data.alarm;
            this.phoneNumber = phone;
          } else {
            var phone = {};
            this.phoneNumber = phone;
          }
          that.phoneNumberA = res.data.data.phone;
          for (var i = 1; i <= len; i++) {
            var key = "e" + i;
            if (data[key]) {
              var conftxt = data[key].split("#")[0];
              if (phone.dat) {
                if (phone.dat[key]) {
                  var type = phone.dat[key].split("#")[0]==0?false:true;
                  var alarmVal = phone.dat[key].split("#")[1];
                  console.log(111111111);
                } else {
                  var type = false;
                  var alarmVal = "";
                  console.log(222222222);
                }
              }
              arr.push({
                ekey: key,
                name: conftxt,
                type: type,
                alarmVal: alarmVal,
              });
            }
          }
          this.tableData = arr;
          console.log(arr);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //确定手机号
    confirmPhone() {
      var that = this;
      var number = that.phoneNumberA; //手机号
      if (number == "") {
        alert("手机号码不能为空");
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "手机号码不能为空",
            type: "warning",
            duration: 1500,
          });
        }
      } else {
        if (
          !/^[1][345789]\d{9}$/.test(number) ||
          !/^[1-9]\d*$/.test(number) ||
          number.length !== 11
        ) {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "手机号码不符合规范",
              type: "warning",
              duration: 1500,
            });
          }
        } else {
          // 手机号码符合规范,操作下步请求
          console.log("手机号码符合规范");
          var obj = {};
          var bb = {};
          for (var i = 0; i < this.tableData.length; i++) {
            var typ = this.tableData[i].type == true ? 1 : 0;
            var num =
              this.tableData[i].alarmVal == undefined
                ? ""
                : this.tableData[i].alarmVal;
            bb["e" + (i + 1)] = typ + "#" + num;
          }
          // console.log(bb);
          obj["dat"] = bb; //配置
          obj["tel"] = this.phoneNumberA; // 手机号
          obj["equip_id"] = ""; //设备id
          console.log(obj);

          // 请求配置接口
          var postData = this.qs.stringify({
            device_id: this.id,
            status: "save", //当status == see查看  status == save 保存
            alarm: JSON.stringify(obj), //配置信息
          });
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=weather.weather.qxz_early_warning",
            data: postData,
          })
            .then((res) => {
              // console.log(res.data.data.code);
              if (res.data.data.code == 0) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "设置成功",
                    type: "success",
                    duration: 1500,
                  });
                }
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "设置失败",
                    type: "error",
                    duration: 1500,
                  });
                }
              }
            })
            .catch((err) => {
              console.log(err);
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "设置失败",
                  type: "error",
                  duration: 1500,
                });
              }
            });
        }
      }
    },
    // render 事件
    renderHeader(h, { column }) {
      // h即为cerateElement的简写，具体可看vue官方文档
      return h("div", [
        h("span", column.label),
        h("i", {
          class: "el-icon-edit",
          style: "color:#409eff;margin-left:5px;",
        }),
      ]);
    },
    check24Data(id) {
      this.$router.push(`/index/sqzData24/${id}`);
    },
    //跳转到历史数据页面
    goHistoryData(id, d_id) {
      this.itemId = id;
      this.$router.push(`/index/sqzHistoryData/${id}/${d_id}`);
    },
    // 点击预警信息
    showWarningInfo() {
      this.isWarningList = !this.isWarningList;
    },
    // 一键已读
    oneWarningList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          status: "yes",
          device_type:"8",
        }),
      }).then((res) => {
        if (res.data.data == true) {
          // this.warningList = []
          // this.hjjcWarningPage = 1
          // this.hjjcWarningList();
        }
      });
    },
    // 单条信息已读
    yidu(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          d_id: id,
          device_type:"8",
        }),
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.data == true) {
          // this.warningList = []
          // this.hjjcWarningPage = 1
          // this.hjjcWarningList();
        }
      });
    },
    // 测报灯信息预警
    hjjcWarningList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.qxz_warning",
        data: this.qs.stringify({
          page: this.hjjcWarningPage,
          device_type:"8",
        }),
      }).then((res) => {
        var data = res.data.data.data;
        for (var i = 0; i < data.length; i++) {
          this.warningList.push(data[i]);
        }
        // this.warningList = res.data.data.data;
        this.onewarning = this.warningList[0];
      });
    },
    load() {
      this.hjjcWarningPage++;
      this.hjjcWarningList();
    },
    setData(data1, data2, data3, data4) {
      const dw = data1.split("#")[1];
      const res = `当前${data1.replace("#", data2)}${data3.replace(
        "预警",
        "用户设置预警值"
      )}${data4}${dw}`;
      return res;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getEquipList();
    this.hjjcWarningList();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.baselistbox {
  width: 100%;
  height: 100%;
  .baselistbox_top {
    width: 100%;
    height: 130px;
    background-color: #fff;
    border-radius: 10px;
    .baselistbox_top_title {
      width: 100%;
      height: 65px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      line-height: 25px;
      justify-content: space-between;
      p:first-child {
        font-size: 18px;
        font-weight: 700;
      }
      .warningInfo {
        width: 30%;
        font-size: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: relative;
        border: 1px solid #C0C4CC;
        border-radius: 25px;
        padding: 0 15px;
        .title {
          width: 100%;
          // padding: 5px 10px;
          border-radius: 15px;
          margin-bottom: 10px;
          // background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .title > i {
          color: #ccc !important;
        }
        .warningInfoList {
          position: absolute;
          right: 0px;
          top: 45px;
          z-index: 9;
          width: 100%;
          max-height: 310px;
          padding: 5px 0px;
          background: #fff;
          box-shadow: 0px 5px 18px 0px #999;
          overflow-y: scroll;
          overflow-x: hidden;
        }
        /deep/ .el-button:focus {
          border: none !important;
          font-weight: 600 !important;
          // font-size: 15px !important;
          color: black !important;
          background: #fff !important;
          padding: 0;
        }
        /deep/ .el-button {
          width: 100%;
          font-size: 15px !important;
          padding: 10px 10px !important;
          color: rgb(26, 25, 25) !important;
          border: none !important;
        }
        /deep/ .el-button > span {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        /deep/ .el-button > span .circle {
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: red;
        }
        .active {
          color: red;
        }
      }
    }
    .baselistbox_top_line {
      width: 100%;
      height: 1px;
      background-color: #f2f2f2;
    }
    .baselistbox_top_search {
      width: 100%;
      height: 68px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      line-height: 28px;
      justify-content: space-between;
      .left_search {
        display: flex;
        .firstsearch,
        .secsearch {
          display: flex;
          margin-right: 40px;
          /deep/.el-input {
            width: 240px;
          }
          .biaoti {
            font-size: 14px;
            margin-right: 20px;
          }
        }
      }
      .right_search {
        display: flex;
        .btnbox,
        .btnbox2 {
          width: 68px;
          height: 28px;
          border: 1px solid #4f71ff;
          text-align: center;
          border-radius: 3px;
          font-size: 14px;
          margin-left: 20px;
          cursor: pointer;
        }
        .btnbox {
          background-color: #4f71ff;
          color: #fff;
        }
        .btnbox2 {
          color: #4f71ff;
        }
      }
    }
  }
  .baselistbox_table {
    width: 100%;
    // height: calc(100% - 140px);
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    // position: relative;
    border-radius: 10px;
    /deep/.el-table__header {
      th {
        background-color: #f1f1f3;
      }
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      /deep/.el-pager {
        .active {
          background-color: #4f71ff !important;
        }
      }
      /deep/.el-input__inner:hover {
        border-color: #4f71ff;
      }
    }
  }
}
.tit {
  font-size: 16px;
  color: #333;
  margin: 16px 0 32px 0;
  font-weight: 800;
}
.set_item {
  display: flex;
  justify-content: flex-start;
  padding-left: 73px;
  margin-bottom: 16px;
  span {
    margin-right: 8px;
    line-height: 32px;
  }
  .sliderParent {
    flex: 1;
  }
}
/deep/.el-slider__button {
  border: 2px solid #4f71ff;
}
.setBtnBox {
  margin-left: 73px;
}
// 短信预警弹框样式
.warningMessage-box {
  display: flex;
  margin: 0 0 16px 0;
  .warningMessage-phone {
    // line-height: 0.5rem;
    line-height: 25px;
  }
  .warningMessage-ipt {
    // width: 2.5rem;
    width: 180px;
    margin: 0px 8px;
  }
}
</style>