<template>
  <div class="device-alarm-config">
    <!-- <el-row style="margin-bottom: 10px">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-refresh"
          size="mini"
          :disabled="disabledAck"
          @click="handleSendAck"
          >同步</el-button
        >
      </el-col>
    </el-row> -->
    <el-table
      border
      :loading="loading"
      :data="list"
      class="alarm-table"
      :height="list.length >= 3 ? '202' : ''"
      :highlight-pageNum-row="true"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="80"
        :index="
          (val) => {
            return ++val;
          }
        "
      ></el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        align="center"
        width="300"
        :formatter="alarmTypeFormatter"
      ></el-table-column>
      <el-table-column prop="alarmSta" label="开启告警" align="center">
        <template slot-scope="scope">
          <el-switch
            size="mini"
            v-model="scope.row.alarmSta"
            active-text="开启"
            inactive-text="关闭"
            :disabled="!updateGenTable"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            class="switch-wrap"
          />
        </template>
      </el-table-column>
      <el-table-column prop="warnSta" label="开启预警" align="center">
        <template slot-scope="scope">
          <el-switch
            size="mini"
            v-model="scope.row.warnSta"
            active-text="开启"
            inactive-text="关闭"
            :disabled="!updateGenTable"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            class="switch-wrap"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="alarmValue"
        label="告警值"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="warnValueMin"
        label="最小告警值"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="warnValueMax"
        label="最大告警值"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row, scope.$index)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <dialog-template
      :title="title"
      @close="open = false"
      :visible="open"
      width="500px"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        slot="dialog-center"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="开启告警:" prop="alarmSta">
              <el-switch
                size="mini"
                v-model="form.alarmSta"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#dcdfe6"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开启预警:" prop="warnSta">
              <el-switch
                size="mini"
                v-model="form.warnSta"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#dcdfe6"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="最小预警值:" prop="warnValueMin">
          <el-input
            v-model="form.warnValueMin"
            :disabled="!form.warnSta"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="最大预警值:" prop="warnValueMax">
          <el-input
            v-model="form.warnValueMax"
            :disabled="!form.warnSta"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="告警值:" prop="alarmValue">
          <el-input
            v-model="form.alarmValue"
            :disabled="!form.alarmSta"
            placeholder="请输入"
          />
        </el-form-item>
        <el-row>
          <div>
             <span style="display: block; width: 100%; color: red;">注意*:</span>
            <span style="color: red;">
                欠压：报警值 < 最小预警值 < 最大预警值 < 正常值 </br>
                过压：正常值 < 最小预警值 < 最大预警值 < 报警值
            </span>
          </div>

        </el-row>
      </el-form>
      <div slot="dialog-footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button size="mini" @click="cancel">取 消</el-button>
      </div>
    </dialog-template>
  </div>
</template>

<script>
import {
  getDeviceAlarmConfig,
  updateDeviceAlarmConfig,
  deviceSendAlarmConfig,
} from "@/api/iot/device";
import DialogTemplate from "@/components/DialogTemplate";
export default {
  name: "DeviceAlarmConfig",
  props: {
    deviceKey: {
      type: String,
      require: true,
    },
    deviceId: {
      type: [String, Number],
      require: true,
    },
  },
  components: {
    DialogTemplate,
  },
  data() {
    return {
      list: [],
      alarmParamOption: [],
      loading: false,
      updateGenTable: false,
      title: "修改",
      open: false,
      form: {},
      updateIndex: null,
      isAck: false,
      disabledAck: false,
      uvpList: ["ul_cfg"],
      rules: {
        warnValueMin: [
          {
            required: true,
            validator: this.warnValueMin,
            trigger: "blur",
          },
        ],
        alarmValue: [
          {
            required: true,
            validator: this.alarmValue,
            trigger: "blur",
          },
        ],
        warnValueMax: [
          {
            required: true,
            validator: this.warnValueMax,
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getDicts("alarm_param_type").then((response) => {
      this.alarmParamOption = response.data;
    });
    this.getList();
  },
  watch: {
    deviceKey() {
      this.getList();
    },
  },
  methods: {
    alarmValue(rule, value, callback) {
      if (!this.form.alarmSta) {
        callback();
      }

      const isExp =
        /^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;

      if (this.form.alarmValue && !isExp.test(this.form.alarmValue)) {
        callback(new Error("只可以输入数字类型！"));
      }

      if (!this.form.warnSta) {
        callback();
      }

      if (this.uvpList.indexOf(this.form.type) >= 0) {
        if (
          (this.form.warnValueMin || this.form.warnValueMin === 0) &&
          +this.form.warnValueMin < +this.form.alarmValue
        ) {
          callback(new Error("需要小于最小预警值！"));
        }
      } else {
        if (
          (this.form.warnValueMax || this.form.warnValueMax === 0) &&
          +this.form.warnValueMax > +this.form.alarmValue
        ) {
          callback(new Error("需要大于最大预警值！"));
        }
      }
      callback();
    },

    warnValueMax(rule, value, callback) {
      if (!this.form.warnSta) {
        callback();
      }

      const isExp =
        /^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;

      if (this.form.warnValueMax && !isExp.test(this.form.warnValueMax)) {
        callback(new Error("只可以输入数字类型！"));
      }

      if (
        (this.form.warnValueMin || this.form.warnValueMin === 0) &&
        +this.form.warnValueMax < +this.form.warnValueMin
      ) {
        callback(new Error("需要大于最小预警值！"));
      }

      callback();
    },

    warnValueMin(rule, value, callback) {
      if (!this.form.warnSta) {
        callback();
      }

      const isExp =
        /^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
      if (this.form.warnValueMin && !isExp.test(this.form.warnValueMin)) {
        callback(new Error("只可以输入数字类型！"));
      }

      if (
        (this.form.warnValueMax || this.form.warnValueMax === 0) &&
        +this.form.warnValueMin > +this.form.warnValueMax
      ) {
        callback(new Error("需要小于最大预警值！"));
      }

      callback();
    },
    handleSendAck() {
			var deviceId = this.deviceId;
      this.$prompt("请输入登录密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[a-z A-z 0-9 $.]+/,
        inputType: "password",
        inputErrorMessage: "登录密码不能为空",
      }).then(({ value }) => {
        let params = {
          data: {},
          deviceId: deviceId,
          verifyKey: value,
        };

        deviceSendAlarmConfig(params).then((res) => {
          this.msgSuccess(res.msg);
        });
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    cancel() {
      this.updateIndex = null;
      this.open = false;
    },
    submitForm() {
      this.$refs["form"].validate((file) => {
        if (file) {
          const list = this.list.map((v) => {
            return v.type === this.form.type ? Object.assign(v, this.form) : v;
          });
          updateDeviceAlarmConfig({
            devKey: this.deviceKey,
            params: [...list],
          }).then((res) => {
            this.getList();
            // this.disabledAck = true;
            this.open = false;
            this.$forceUpdate();
          });
        }
      });
    },
    handleUpdate(row, idx) {
      this.reset();
      this.updateIndex = idx;
      this.form = JSON.parse(JSON.stringify(row));
      this.open = true;
    },
    // 执行状态字典翻译
    alarmTypeFormatter(row, column) {
      return this.selectDictLabel(this.alarmParamOption, row.type);
    },
    getList() {
      console.log(this.deviceKey);
      if (!this.deviceKey && this.deviceKey !== "0") {
        return;
      }
      this.loading = true;
      getDeviceAlarmConfig(this.deviceKey)
        .then((response) => {
          this.list = response.data.alarmCfg;
          this.isAck = response.data.isAck === 1 ? true : false;
          this.loading = false;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss">
.device-alarm-config {
  /* switch按钮样式 */
  .switch-wrap .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
  }
  /*打开时文字位置设置*/
  .switch-wrap .el-switch__label--right {
    z-index: 1;
  }
  /* 调整打开时文字的显示位子 */
  .switch-wrap .el-switch__label--right span {
    margin-left: -10px;
  }
  /*关闭时文字位置设置*/
  .switch-wrap .el-switch__label--left {
    z-index: 1;
  }
  /* 调整关闭时文字的显示位子 */
  .switch-wrap .el-switch__label--left span {
    margin-left: 20px;
  }
  /*显示文字*/
  .switch-wrap .el-switch__label.is-active {
    display: block;
  }
  /* 调整按钮的宽度 */
  .switch-wrap.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 60px !important;
    margin: 0;
  }
}
</style>
