<template>
  <div id="deviceAlarmRecord">
    <el-container>

      <el-main>
        <div style="margin-bottom: 10px">
          <el-button size="medium" icon="el-icon-back" type="text" @click="back">返回</el-button>
          <span style="margin-left: 20px; font-size: 18px">报警记录列表</span>
        </div>

        <el-button size="medium" icon="el-icon-search" style="margin-bottom: 15px" @click="search(searchFormData)">
          查询
        </el-button>
        <el-button size="medium" icon="el-icon-plus" @click="showAdd" style="margin-left: 0">新增</el-button>


        <div style="padding: 10px;background-color: white">
          <el-form :inline="true" :model="searchFormData" style="background-color: white;">
            <el-form-item label="报警名称">
              <el-input placeholder="报警名称" size="mini" v-model="searchFormData.alarmName"></el-input>
            </el-form-item>
            <el-form-item label="报警类型">
              <el-input placeholder="设备类型" size="mini" v-model="searchFormData.alarmType"></el-input>
            </el-form-item>

            <el-form-item label="变量id" style="margin-top: 6px" size="mini">
              <el-select v-model="searchFormData.variableId" placeholder="变量id" style="width: 180px"
                         clearable>
                <el-option :value="i.variableId" v-for="(i,index) in deviceAlarmConfigs" :key="index"
                           :label="i.variableId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="开始时间" size="mini" style="margin-top: 6px;margin-right: 0px">
              <el-date-picker type="datetime" placeholder="开始时间" v-model="searchFormData.startTime"
                              style="width: 85%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" size="mini" style="margin-top: 7px ;margin-left: 0px">
              <el-date-picker type="datetime" placeholder="结束时间" v-model="searchFormData.endTime"
                              style="width: 85%;"></el-date-picker>
            </el-form-item>

            <el-row style="margin-top: 0px">
              <el-form-item label="运营商编号" style="margin-top: 6px" size="mini">
                <el-select v-model="searchFormData.operatorNumber" placeholder="运营商编号" style="width: 180px"
                           clearable>
                  <el-option :value="i.number" v-for="(i,index) in operators" :key="index"
                             :label="i.number"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目编号" style="margin-top: 6px" size="mini">
                <el-select v-model="searchFormData.projectNumber" placeholder="项目编号" style="width: 180px;" clearable
                           :disabled="!searchFormData.operatorNumber">
                  <el-option v-for="(item) in projects" :key="item.number" :label="item.number"
                             :value="item.number"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="网关编号" style="margin-top: 6px" size="mini">
                <el-select v-model="searchFormData.gatewayNumber" placeholder="网关编号" style="width: 180px;" clearable
                           :disabled="!searchFormData.projectNumber">
                  <el-option v-for="(item) in gateways" :key="item.number" :label="item.number"
                             :value="item.number"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="设备SN" style="margin-top: 6px" size="mini">
                <el-select v-model="searchFormData.sn" placeholder="设备SN" style="width: 180px"
                           clearable :disabled="!searchFormData.gatewayNumber">
                  <el-option :value="i.sn" v-for="(i,index) in devices" :key="index" :label="i.sn"></el-option>
                </el-select>
              </el-form-item>
            </el-row>


            <el-dialog title="报警记录" :visible.sync="dialogFormVisible" style="width: 70% ; margin-left: 300px ;">
              <el-form label-position="left" :model="formData" :rules="rules" ref="formData">
                <el-row style="margin-left: 30px">
                  <el-form-item label="变量Id" prop="operatorNumber">
                    <el-select v-model="formData.variableId" placeholder="变量Id" style="width: 202px"
                               clearable>
                      <el-option :value="i.variableId" v-for="(i,index) in deviceAlarmConfigs" :key="index"
                                 :label="i.variableId"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="告警内容" prop="content">
                    <el-input v-model="formData.content"></el-input>
                  </el-form-item>
                </el-row>

                <el-row>
                  <el-form-item label="运营商编号" prop="operatorNumber">
                    <el-select v-model="formData.operatorNumber" placeholder="运营商编号" style="width: 202px"
                               clearable>
                      <el-option :value="i.number" v-for="(i,index) in operators" :key="index"
                                 :label="i.number"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="项目编号" prop="projectNumber">
                    <el-select v-model="formData.projectNumber" placeholder="项目编号" style="width: 202px"
                               :disabled="!formData.operatorNumber" clearable>
                      <el-option :value="i.number" v-for="(i,index) in projects" :key="index"
                                 :label="i.number"></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>

                <el-row style="margin-left: 14px">
                  <el-form-item label="网关编号" prop="gatewayNumber" style="margin-right: 22px">
                    <el-select v-model="formData.gatewayNumber" placeholder="网关编号" style="width: 202px"
                               :disabled="!formData.projectNumber" clearable>
                      <el-option :value="i.number" v-for="(i,index) in gateways" :key="index"
                                 :label="i.number"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="设备sn" prop="sn">
                    <el-select v-model="formData.sn" placeholder="设备sn" style="width: 202px"
                               :disabled="!formData.gatewayNumber" clearable>
                      <el-option :value="i.sn" v-for="(i,index) in devices" :key="index"
                                 :label="i.sn"></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>

              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="addOrEditMehtond('formData')">确 定</el-button>
              </div>
            </el-dialog>

          </el-form>


          <el-table :data="tableData">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="sn" label="设备sn"></el-table-column>
            <el-table-column prop="alarmName" label="报警名称"></el-table-column>
            <el-table-column prop="alarmType" label="报警类型"></el-table-column>
            <el-table-column prop="content" label="告警内容"></el-table-column>
            <el-table-column prop="startTime" label="开始时间">
              <template slot-scope="scope">
                {{ scope.row.startTime | timeFilter }}
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间">
              <template slot-scope="scope">
                {{ scope.row.endTime | timeFilter }}
              </template>
            </el-table-column>

            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-button
                    style="color:white;background-color: rgb(128,138,135);border: 0px"
                    type="primary"
                    size="small"
                    class="delBut non"
                    @click="statusHandle(scope.row)"
                >
                  {{ scope.row.status == '已处理' ? '已处理' : '未处理' }}
                </el-button>
              </template>
            </el-table-column>


            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="showEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="medium" @click="manage(scope.row)">查看</el-button>
                <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</el-button>
              </template>
            </el-table-column>

          </el-table>


          <el-pagination
              style="margin-top: 15px;text-align: center"
              background
              layout="prev, pager, next"
              :page-size="pager.pageSize"
              :current-page="pager.pageIndex"
              :total="pager.itemCount"
              @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-main>

    </el-container>
  </div>
</template>


<script>
import moment from 'moment'

export default {
  name: 'deviceAlarmRecord',
  data() {
    return {
      test: 1,
      rules: {
        operatorNumber: [
          {required: true, message: '请输入运营商编号', trigger: 'change'}
        ],
        projectNumber: [
          {required: true, message: '请输入项目编号', trigger: 'change'}
        ],
        gatewayNumber: [
          {required: true, message: '请输入网关编号', trigger: 'change'}
        ],
        sn: [
          {required: true, message: '请输入设备sn', trigger: 'change'}
        ],

        variableId: [
          {required: true, message: '请输入变量Id', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '请输入报警内容', trigger: 'blur'}
        ],

      },

      gateways: [],
      projects: [],
      operators: [],
      devices: [],
      deviceAlarmConfigs: [],

      operatorProject: '',
      projectGateway: '',
      gatewayDevice: '',


      api: {
        list: this.$api.deviceAlarmRecord.list,
        delete: this.$api.deviceAlarmRecord.delete,
        add: this.$api.deviceAlarmRecord.add,
        update: this.$api.deviceAlarmRecord.update,
      },

      value: true,

      addOrEdit: 1,

      dialogFormVisible: false,

      pager: {
        pageSize: 2,
        pageIndex: 1,
        itemCount: 0,
      },

      tableData:
          [{
            alarmName: '',
            alarmType: '',
            content: '',
            startTime: '',
            endTime: '',
          }],
      formData: {
        alarmName: '',
        alarmType: '',
        content: '',
        startTime: '',
        endTime: '',

        sn: '',
        variableId: '',
        operatorNumber: '',
        projectNumber: '',
        gatewayNumber: ''
      },
      searchFormData:
          {
            alarmName: '',
            alarmType: '',
            content: '',
            startTime: '',
            endTime: '',

            sn: '',
            variableId: '',
            operatorNumber: '',
            projectNumber: '',
            gatewayNumber: ''
          }
    }
  },

  created: function () {
    this.loadData();
    this.getOperator();
    this.getVariableId();


  },

  filters: {
    timeFilter(data) {
      if (data !== '') {
        let time = moment(data).format("YYYY-MM-DD HH:mm:ss")
        return time
      }
    }
  },

  watch: {

    'searchFormData.operatorNumber'(oldValue, newValue) {

      console.log(oldValue)
      console.log(newValue)

      this.searchFormData.projectNumber = ''

      this.operatorProject = oldValue;

      console.log(this.operatorProject)

      this.getProjectNumber();
    },

    'searchFormData.projectNumber'(oldValue, newValue) {

      console.log(oldValue)
      console.log(newValue)

      this.searchFormData.gatewayNumber = ''

      this.projectGateway = oldValue;

      console.log(this.projectGateway)

      this.getGateway();
    },
    'searchFormData.gatewayNumber'(oldValue, newValue) {

      console.log(oldValue)
      console.log(newValue)

      this.searchFormData.sn = ''

      this.gatewayDevice = oldValue;

      console.log(this.gatewayDevice)

      this.getDevice();
    },


    'formData.operatorNumber'(oldValue, newValue) {

      console.log(oldValue)
      console.log(newValue)


      if (newValue == '') {
        this.operatorProject = oldValue;
      } else {
        this.operatorProject = oldValue;
        this.formData.projectNumber = ''
      }

      console.log(this.operatorProject)

      this.getProjectNumber();
    },

    'formData.projectNumber'(oldValue, newValue) {

      console.log(oldValue)
      console.log(newValue)


      if (newValue == '') {
        this.projectGateway = oldValue;
      } else {
        this.projectGateway = oldValue;
        this.formData.gatewayNumber = ''
      }

      console.log(this.projectGateway)

      this.getGateway();
    },

    'formData.gatewayNumber'(oldValue, newValue) {

      console.log(oldValue)
      console.log(newValue)

      if (newValue == '') {
        this.gatewayDevice = oldValue;
      } else {
        this.gatewayDevice = oldValue;
        this.formData.sn = ''
      }

      console.log(this.gatewayDevice)

      this.getDevice();
    }
  },

  methods: {
    //切换页码
    handleCurrentChange(index) {
      this.loadData(index)
    },

    getVariableId() {
      const vm = this;
      vm.$http.get(vm.$api.deviceAlarmConfig.list).then((resp) => {
        vm.deviceAlarmConfigs = resp.data.data.deviceAlarmConfigs
      })
    },


    getOperator() {
      const vm = this;
      vm.$http.get(vm.$api.operator.list).then((resp) => {
        vm.operators = resp.data.data.operators
      })
    },

    getProjectNumber() {
      const vm = this;
      vm.$http.get(vm.$api.project.list, {
        params: {
          operatorNumber: this.operatorProject,
        }
      }).then((resp) => {
        console.log(resp.data.data.projects)
        vm.projects = resp.data.data.projects
      })
    },

    getGateway() {
      const vm = this;
      vm.$http.get(vm.$api.gateway.list, {
        params: {
          projectNumber: this.projectGateway,
        }
      }).then((resp) => {
        console.log(resp.data.data.gateways)
        vm.gateways = resp.data.data.gateways
      })
    },

    getDevice() {
      const vm = this;
      vm.$http.get(vm.$api.device.list, {
        params: {
          gatewayNumber: this.gatewayDevice,
        }
      }).then((resp) => {
        console.log(resp.data.data.devices)
        vm.devices = resp.data.data.devices
      })
    },

    loadData(index) {
      const vm = this;
      vm.$http.get(vm.api.list, {
        params: {
          pageSize: 5,
          pageIndex: index ? index : 1,

          alarmName: this.searchFormData.alarmName,
          alarmType: this.searchFormData.alarmType,

          operatorNumber: this.searchFormData.operatorNumber,
          projectNumber: this.searchFormData.projectNumber,
          gatewayNumber: this.searchFormData.gatewayNumber,
          sn: this.searchFormData.sn,
          variableId: this.searchFormData.variableId,
        }
      })
          .then((response) => {
            // vm.paper = response.data.data.paper;
            console.log(response.data.data);

            vm.pager = response.data.data.pager

            vm.tableData = response.data.data.deviceAlarmRecords;
          })
    },
    search() {
      //console.log(this.searchFormData)
      this.loadData();
    },
    showAdd() {
      this.dialogFormVisible = true;

      this.formData.alarmName = '',
          this.formData.alarmType = '',
          this.formData.content = '',
          this.formData.startTime = '',
          this.formData.endTime = '',

          this.formData.operatorNumber = '',
          this.formData.projectNumber = '',
          this.formData.gatewayNumber = ''
      this.formData.sn = ''
      this.formData.variableId = ''
    },

    showEdit(row) {
      console.log(row)

      this.dialogFormVisible = true;

      this.editRow = JSON.parse(JSON.stringify(row));
      this.formData = this.editRow


      this.addOrEdit = 2
    },


    addOrEditMehtond(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const vm = this;
          if (this.addOrEdit == 2) {
            vm.$http.get(vm.api.update, {
              params: {
                alarmName: this.formData.alarmName,
                alarmType: this.formData.alarmType,
                content: this.formData.content,
                startTime: this.formData.startTime,
                endTime: this.formData.endTime,

                status: '1',

                operatorNumber: this.formData.operatorNumber,
                projectNumber: this.formData.projectNumber,
                gatewayNumber: this.formData.gatewayNumber,
                sn: this.formData.sn,
                variableId: this.formData.variableId,

                operatorCode: this.formData.operatorCode,
                projectCode: this.formData.projectCode,
                gatewayCode: this.formData.gatewayCode,
              }
            })
                .then((response) => {
                  console.log(response)

                  if (response.data.status == 200) {

                    this.$message({
                      type: 'success',
                      showClose: true,
                      message: response.data.desc
                    })
                  }

                  this.dialogFormVisible = false;

                  this.loadData();

                })
                .catch(() => {
                });
          }

          if (this.addOrEdit == 1) {
            vm.$http.get(vm.api.add, {
              params: {
                alarmName: this.formData.alarmName,
                alarmType: this.formData.alarmType,
                content: this.formData.content,
                startTime: this.formData.startTime,
                endTime: this.formData.endTime,

                operatorNumber: this.formData.operatorNumber,
                projectNumber: this.formData.projectNumber,
                gatewayNumber: this.formData.gatewayNumber,
                sn: this.formData.sn,
                variableId: this.formData.variableId,

                operatorCode: this.formData.operatorCode,
                projectCode: this.formData.projectCode,
                gatewayCode: this.formData.gatewayCode,
              }
            })
                .then((response) => {
                  if (response.data.status == 200) {

                    this.dialogFormVisible = false;

                    this.$message({
                      type: 'success',
                      showClose: true,
                      message: response.data.desc
                    })

                    this.loadData();
                  }
                })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    del(row) {
      const vm = this;
      this.$confirm('确认删除', '提示', {
        type: 'warning'
      }).then(() => {
        vm.$http.get(vm.api.delete, {
          params: {
            code: row.code,
          }
        })
            .then((response) => {
              console.log(response)
              if (response.data.status == 200) {
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })


              }
              this.loadData();
            })
      })
          .catch(() => {
            this.$message({
              type: 'info',
              showClose: true,
              message: '取消删除'
            })
          });
    },
    cancel() {
      this.$message({
        message: '操作取消',
        showClose: true,
        type: 'info'
      });
      this.formData.operatorNumber = '';
      this.formData.projectNumber = '';
      this.formData.gatewayNumber = '';
      this.formData.sn = '';

      this.$refs.formData.clearValidate();
      this.dialogFormVisible = false;
    },


    statusHandle(row) {
      console.log(row)
      const vm = this;
      this.$confirm('是否进行此操作', '提示', {
        type: 'warning'
      }).then(() => {
        vm.$http.get(vm.api.update, {
          params: {
            alarmName: row.alarmName,
            alarmType: row.alarmType,
            content: row.content,
            startTime: row.startTime,
            endTime: row.endTime,

            sn: row.sn,
            variableId: row.variableId,
            recordCondition: row.condition,
            operatorNumber: row.operatorNumber,
            projectNumber: row.projectNumber,
            gatewayNumber: row.gatewayNumber,

            operatorCode: row.operatorCode,
            projectCode: row.projectCode,
            gatewayCode: row.gatewayCode,
            deviceCode: row.deviceCode,
            alarmConfigCode: row.alarmConfigCode,


            code: row.code,
            valid: row.valid,
            status: row.status == '未处理' ? '已处理' : '未处理',
          }
        })
            .then((response) => {
              console.log(row)
              // console.log(response)
              if (response.data.status == 200) {
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })

              }
              this.loadData();
            })
      })
          .catch(() => {
            this.$message({
              type: 'info',
              showClose: true,
              message: '操作取消'
            })
          });

    },

    manage() {
      let vm = this;
      vm.$router.push('/deviceAlarmRecordDetail')
    },
    back() {
      let vm = this;
      vm.$router.back()
    },

  }
}
</script>

<style scoped>
.el-form-item {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 0px;
}

.el-row {
  margin-top: 20px;
}


</style>
