<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        
        <el-button
          class="filter-item"
          size="mini"
          @click="handleAlertManage"
          >报警值管理</el-button
        >
      </div>
    </div>

    <!--表格-->
    <el-table ref="table" v-loading="loading" :data="tableData" row-key="id">
      <el-table-column
        :show-overflow-tooltip="true"
        prop="equipno"
        label="站点编号"
        width="130px"
        align="center"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="equipname"
        label="测站名称"
        align="center"
      />
     
      <el-table-column
        :show-overflow-tooltip="true"
        prop="time"
        label="报警时间"
        align="center"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="state"
        label="处置状态"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.state==1">
            未处置
          </div>
          <div v-if="scope.row.state==2">已确认</div>
          <div v-if="scope.row.state==3">已忽略</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope" v-if="scope.row.state==1"> 
          <el-button
            size="mini"
            type="text"
            @click="handleSure(scope.row,2)"
            >确认报警</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleSure(scope.row,3)"
            >忽略报警</el-button
          >
        </template>
        <template v-else><div>已经处理</div></template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[10, 20, 50, 100]"
      :current-page.sync="page"
      :page-size.sync="size"
      :total="totalElement"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="报警值管理"
      :visible.sync="open"
      width="580px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form"  label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备" prop="equipno">
              <el-select
                v-model="form.equipno"
                multiple
                placeholder="请选择设备"
              >
                <el-option
                  v-for="dict in equipnoData"
                  :key="dict.equipNo"
                  :label="dict.equipName"
                  :value="dict.equipNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一级报警" prop="onelevelalarm">
              <el-input-number
                v-model="form.onelevelalarm"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="二级报警" prop="twolevelalarm">
              <el-input-number
                v-model="form.twolevelalarm"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="三级报警" prop="threelevelalarm">
              <el-input-number
                v-model="form.threelevelalarm"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="四级报警" prop="fourlevelalarm">
              <el-input-number
                v-model="form.fourlevelalarm"
                controls-position="right"
                :min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog2Show" title="报警处置" width="580px">
      <div>
        <span>是否操作报警数据？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialog2Show=false">取消</el-button>
        <el-button :loading="dialog2Saving" type="primary" @click="dialog2Submit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api/newResource/data.js";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import DateRangePicker from '@/components/DateRangePicker'

export default {
  name: "newResourceDisplaceMachine", // 本页面名
  data() {
    return {
      equipname: '',
      datarealtime: '',
      dialog2Saving:false,
      loading: false,
      tableData: [],
      // 总的个数
      totalElement: 0,
      // 当前页的条数
      size: 10,
      // 当前页码
      page: 0,
      form:{},
      equipnoData:[],
      open:false,
      dialog2Show:false,
      dialog2form:{
        id:null,
        state:null,
      }
    };
  },
  components: { DateRangePicker },
  mounted() {
    this.search()
    this.getsensorList()
  },
  methods: {
    resetForm(){
      this.form={
        equipno:[],
        onelevelalarm:0,
        twolevelalarm:0,
        threelevelalarm:0,
        fourlevelalarm:0,
      }
    },
    getData() {
      this.loading = true;
      API.drybeachequipinforalarmList({
        page: this.page,
        size: this.size,
        deviceType:6,
      })
        .then((response) => {
          this.loading = false;
          this.tableData = response.body.list;
          this.totalElement = response.body.total;

        })
        .catch(() => {
          this.loading = false;
        });
    },
     // 模糊搜索
     search() {
      this.getData();
    },
    getsensorList(){
      API.sensorListrg().then(res=>{
        this.equipnoData = res.body;
      })
    },
    // clearSearch() {
    //   this.equipname = ''
    //   this.datarealtime =  ''
    //   this.size = 10;
    //   this.page = 0;
    //   this.getData();
    // },
    // 当前页的条数变化
    handleSizeChange(val) {
      this.size = val;
      this.getData();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },

    handleSure(row,state){
      console.log(row.id)
      this.dialog2Show = true
      this.dialog2form.id = row.id;
      this.dialog2form.state = state;
    },
    handleAlertManage(){
      this.resetForm;
      this.open = true;
    },
    submitForm(){
      API.drybeachequipinforlevel(this.form).then(res => {
        this.$message.success('设置成功');
        this.open = false;
      })
    },
    dialog2Submit(){
      API.drybeachequipinforalarmListput(this.dialog2form).then(()=>{
        this.$message.success('处置成功');
        this.getData();
        this.dialog2Show = false;
      })
    },
    cancel(){
      this.open = false;
    }
   
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
