<template>
  <div class="manage-container">
    <el-dialog
      v-model="dialogFormVisible"
      :title="title"
      width="500px"
      @close="close"
    >
      <vab-query-form>
        <h1 class="tigger-title">添加触发器信息</h1>
      </vab-query-form>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item :label="$t('dataEnquiry.cgq')" prop="sensorName">
          <el-select v-model="form.sensorName" placeholder="请选择传感器">
            <el-option
              v-for="item in sensorData"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('trigger.cfqmc')" prop="triggerName">
          <el-input
            v-model="form.triggerName"
            placeholder="请输入触发器名称"
          ></el-input>
        </el-form-item>
        <vab-query-form>
          <h1 class="tigger-title">触发条件</h1>
        </vab-query-form>
        <el-form-item label="条件类型" prop="triggerCondition">
          <el-select
            ref="condition"
            v-model="form.triggerCondition"
            placeholder="请选择条件类型"
            @change="condition"
          >
            <el-option
              v-for="item in conditionData"
              :key="item.dataCode"
              :label="item.dataValue"
              :value="item.dataCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="mShow == true" label="M">
          <el-input v-model="data.m" placeholder="M"></el-input>
        </el-form-item>
        <el-form-item v-if="xShow == true" label="X">
          <el-input v-model="data.x" placeholder="X"></el-input>
        </el-form-item>
        <el-form-item v-if="yShow == true" label="Y">
          <el-input v-model="data.y" placeholder="Y"></el-input>
        </el-form-item>
        <el-form-item :label="$t('trigger.cfzq')" prop="triggerCycle">
          <el-input
            v-model="form.triggerCycle"
            placeholder="请输入触发周期"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否发送报警信息" prop="alarmFlag">
          <el-select v-model="form.alarmFlag" placeholder="是否发送">
            <el-option
              v-for="item in alarmFlagData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('alarm.bjjb')" prop="alarmLevel">
          <el-select v-model="form.alarmLevel" placeholder="请选择报警级别">
            <el-option
              v-for="item in levelData"
              :key="item.dataCode"
              :label="item.dataValue"
              :value="item.dataCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <vab-query-form>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" plain @click="close">返回</el-button>
        </vab-query-form>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { doEdit, doAdd, getSensorsData } from '@/api/triggerRule';
import { selectAllAlarmLevel, selectAllTriggerCondition } from '@/api/trigger';
export default {
  name: 'TriggerEdit',
  data() {
    return {
      form: {
        id: '',
        name: '',
        projectId: '',
        sensorName: '',
        triggerName: '',
        triggerCondition: '',
        triggerConditionParams: '',
        triggerCycle: '',
        alarmFlag: '', // 1
        alarmLevel: '', //1
      },
      data: {
        x: '',
        y: '',
        m: '',
      },
      title: '',
      projectId: '',
      dialogFormVisible: false,
      levelData: [],
      triggerData: [],
      sensorData: [],
      conditionData: [],
      alarmFlagData: [
        { label: '不发送', value: '0' },
        { label: '发送', value: '1' },
      ],
      rules: {
        triggerName: [
          { required: true, trigger: 'blur', message: '请输入触发器名称' },
        ],
        sensorName: [
          { required: true, trigger: 'change', message: '请选择传感器' },
        ],
        triggerCycle: [
          { required: true, trigger: 'blur', message: '请输入出发周期' },
        ],
        alarmLevel: [
          { required: true, trigger: 'change', message: '请选择报警级别' },
        ],
      },
      xShow: false,
      yShow: false,
      mShow: false,
      isControl: false,
      isUser: false,
      isLevel: false,
    };
  },
  created() {},
  methods: {
    //传感器列表
    async getSensorData() {
      const { data } = await getSensorsData({
        projectId: this.projectId,
      });
      this.sensorData = data;
    },
    controlUserShow(type) {
      if (
        (type.indexOf('0') !== -1 && type.indexOf('1') !== -1) ||
        (type.indexOf('0') !== -1 && type.indexOf('2') !== -1) ||
        (type.indexOf('0') !== -1 && type.indexOf('3') !== -1)
      ) {
        this.isControl = true;
        this.isUser = true;
      } else if (type.indexOf('0') != -1) {
        this.isControl = true;
        this.isUser = false;
      } else if (type.indexOf('1') != -1 || type.indexOf('2') != -1) {
        this.isControl = false;
        this.isUser = true;
      } else {
        this.isControl = false;
        this.isUser = false;
      }
    },
    xymShow(code = '') {
      if (code.indexOf('x') != -1 && code.indexOf('y') != -1) {
        this.xShow = true;
        this.yShow = true;
        this.mShow = false;
      } else if (code.indexOf('x') != -1 && code.indexOf('m') != -1) {
        this.xShow = true;
        this.yShow = false;
        this.mShow = true;
      } else if (code.indexOf('x') != -1) {
        this.xShow = true;
        this.yShow = false;
        this.mShow = false;
      } else if (code.indexOf('y') != -1) {
        this.xShow = false;
        this.yShow = true;
        this.mShow = false;
      } else if (code.indexOf('m') != -1) {
        this.xShow = false;
        this.yShow = false;
        this.mShow = true;
      }
      this.data.x = '';
      this.data.y = '';
      this.data.m = '';
    },
    condition(e) {
      let obj = {};
      obj = this.conditionData.find(item => {
        return item.dataCode === e;
      });
      const code = obj.dataValue;
      this.xymShow(code);
    },
    //报警级别
    async getLevel() {
      const { data } = await selectAllAlarmLevel();
      this.levelData = data;
    },
    //触发条件
    async getCondition() {
      const { data } = await selectAllTriggerCondition();
      this.conditionData = data;
    },
    showEdit(row, status) {
      this.getLevel();
      this.getCondition();
      this.projectId = this.form.projectId =
        sessionStorage.getItem('projectId');
      this.deviceData = {};
      if (status == 0) {
        this.title = '添加触发器规则';
      } else {
        this.title = '编辑触发器规则';
        this.getTriggerData(row);
      }
      this.getSensorData();
      this.dialogFormVisible = true;
    },
    getTriggerData(row) {
      const data = row;
      this.form.id = data.id;
      this.form.triggerName = data.triggerName;
      this.form.sensorName = data.sensorName;
      this.form.triggerCycle = data.triggerCycle;
      this.form.alarmFlag = data.alarmFlag;
      if (data.triggerCondition !== undefined) {
        this.form.triggerCondition = data.triggerCondition.dataCode;
        this.xymShow(data.triggerCondition.dataValue);
        const triggerConditionParams = data.triggerConditionParams.split(',');
        if (this.mShow == true) {
          this.data.m =
            triggerConditionParams[2] == undefined
              ? triggerConditionParams[1]
              : triggerConditionParams[2];
        }
        if (this.xShow == true) {
          this.data.x =
            triggerConditionParams[0] == undefined
              ? ''
              : triggerConditionParams[0];
        }
        if (this.yShow == true) {
          this.data.y =
            triggerConditionParams[1] == undefined
              ? ''
              : triggerConditionParams[1];
        }
      }
      if (data.alarmLevel !== undefined) {
        this.form.alarmLevel = data.alarmLevel.dataCode;
      }
    },
    arrToSrt(data, field = '') {
      if (undefined != data && data.length != 0) {
        let str = '';
        for (let i = 0; i < data.length; i++) {
          if (field) {
            str += data[i].id + ',';
          } else {
            str += data[i] + ',';
          }
        }
        return str.substring(0, str.length - 1);
      }
    },
    close() {
      this.$refs['form'].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
      this.$emit('fetch-data');
    },
    save() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          const data = this.data;
          let dataObj = '';
          if (data.m != '') {
            dataObj += data.m + ',';
          }
          if (data.x != '') {
            dataObj += data.x + ',';
          }
          if (data.y != '') {
            dataObj += data.y + ',';
          }
          this.form.triggerConditionParams = dataObj.substring(
            0,
            dataObj.length - 1
          );
          if (this.form.id) {
            const { msg } = await doEdit(this.form);
            this.$notify({
              title: msg,
              type: 'success',
            });
          } else {
            delete this.form.id;
            const { msg } = await doAdd(this.form);
            this.$notify({
              title: msg,
              type: 'success',
            });
          }
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false;
          this.$parent.fetchData();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tigger-title {
  font-size: 18px;
  border-left: 6px solid #3281fd;
  padding-left: 10px;
  margin-bottom: 20px;
}
</style>
