<template>
  <div class="manage-container">
    <vab-query-form>
      <h1 class="tigger-title">添加触发器信息</h1>
    </vab-query-form>
    <el-form ref="form" :model="form" label-width="100px" label-position="left">
      <el-form-item :label="$t('trigger.cfqmc')">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item :label="$t('maintenance.sb')">
        <el-select v-model="value1" placeholder="请选择项目">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('dataEnquiry.cgq')">
        <el-select v-model="value2" placeholder="请选择设备">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <vab-query-form>
      <h1 class="tigger-title">触发条件</h1>
    </vab-query-form>
    <el-form ref="form" :model="form" label-width="100px" label-position="left">
      <el-form-item :label="$t('dataEnquiry.cgq')">
        <el-select v-model="value3" placeholder="请选择触发器类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="动作类型">
        <el-checkbox v-model="checked1" label="控制谁被" border></el-checkbox>
        <el-checkbox v-model="checked2" label="微信通知" border></el-checkbox>
        <el-checkbox v-model="checked3" label="短信通知" border></el-checkbox>
        <el-checkbox v-model="checked4" label="邮件通知" border></el-checkbox>
        <el-checkbox v-model="checked5" label="语音通知" border></el-checkbox>
      </el-form-item>
      <el-form-item label="生成报警信息">
        <el-select v-model="value4" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="触发循环间隔">
        <el-input v-model="input" placeholder="单位秒 0不循环触发"></el-input>
      </el-form-item>
      <el-form-item label="是否开启">
        <el-select v-model="value5" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报警恢复触发">
        <el-select v-model="value6" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <vab-query-form>
      <el-button type="primary">保存</el-button>
      <el-button type="primary" plain>返回</el-button>
    </vab-query-form>
  </div>
</template>

<script>
export default {
  name: 'Trigger',
  data() {
    return {
      input: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      options: [
        { value: '选项1', label: '所有设备' },
        { value: '选项2', label: '已连接设备' },
        { value: '选项3', label: '未连接设备' },
        { value: '选项4', label: '已禁用设备' },
        { value: '选项5', label: '已删除设备' },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;

  .el-input {
    width: 205px;
  }
  .tigger-title {
    font-size: 18px;
    border-left: 6px solid #3281fd;
    padding-left: 10px;
    margin-bottom: 20px;
  }
}
</style>
