<template>
  <div class="manage-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <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-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-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="primary">{{ $t('defalult.cx') }}</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-button type="primary">{{ $t('trigger.tjcfq') }}</el-button>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column
        prop="id"
        :label="$t('trigger.xh')"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        :label="$t('trigger.mc')"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="relation"
        label="关联传感器"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="condition"
        :label="$t('trigger.cftjlx')"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="parameter"
        :label="$t('trigger.cs')"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="implement"
        label="执行类型"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="loop"
        label="循环"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="state"
        :label="$t('dataEnquiry.zt')"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('defalult.cz')"
        width="160"
        align="center"
      >
        <el-button type="text" size="small">{{ $t('defalult.bj') }}</el-button>
        <el-button type="text" size="small">{{ $t('defalult.sc') }}</el-button>
      </el-table-column>
    </el-table>
    <vab-query-form>
      <vab-query-form-left-panel></vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </vab-query-form-right-panel>
    </vab-query-form>
  </div>
</template>

<script>
export default {
  name: 'Addproject',
  data() {
    return {
      input: '',
      value1: '',
      value2: '',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      options: [
        { value: '选项1', label: '所有设备' },
        { value: '选项2', label: '已连接设备' },
        { value: '选项3', label: '未连接设备' },
        { value: '选项4', label: '已禁用设备' },
        { value: '选项5', label: '已删除设备' },
      ],
      tableData: [
        {
          id: '1',
          name: '太湖过滤装置',
          relation: '关联设置',
          condition: '数值高于{X}',
          parameter: '100',
          implement: '控制设备，微信通知',
          loop: '100',
          state: '正常',
        },
        {
          id: '2',
          name: '太湖过滤装置',
          relation: '关联设置',
          condition: '数值高于{X}',
          parameter: '100',
          implement: '控制设备，微信通知',
          loop: '100',
          state: '正常',
        },
        {
          id: '3',
          name: '太湖过滤装置',
          relation: '关联设置',
          condition: '数值高于{X}',
          parameter: '100',
          implement: '控制设备，微信通知',
          loop: '100',
          state: '正常',
        },
      ],
    };
  },
};
</script>

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

  .vab-query-form {
    margin-bottom: 30px;

    .el-input {
      width: 180px;
    }
    .el-select {
      margin-right: 10px;
    }
  }
}
</style>
