<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-button type="warning" plain size="medium" @click="refresh">{{ $t('message.alarmValueSet.refresh') }}</el-button>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="List">
        <el-table-column width="200" prop="deviceName" align="center" :label="$t('message.alarmValueSet.deviceName')"></el-table-column>

        <el-table-column prop="deviceId" :label="$t('message.alarmValueSet.deviceId')" align="center"></el-table-column>
        <el-table-column prop="devOnline" :label="$t('message.alarmValueSet.isClosed')" align="center">
          <template slot-scope="scope">{{ scope.row.devOnline == 1 ? '在线' : '离线' }}</template>
        </el-table-column>
        <el-table-column prop="address" width="100" :label="$t('message.alarmValueSet.address')" align="center"></el-table-column>
        <el-table-column prop="realTime" width="200" :label="$t('message.alarmValueSet.createTime')" align="center"></el-table-column>
        <el-table-column :label="$t('message.alarmValueSet.operation')" align="center">
          <template slot-scope="scope">
            <div class="tableBtns">
              <div @click="yu(scope.row, 2)" class="operationText">
                <img src="@/assets/images/yu.png" alt="" />{{ $t('message.alarmValueSet.yjz') }}
              </div>
              <div @click="bao(scope.row, 1)" class="operationText">
                <img src="@/assets/images/bao.png" alt="" />{{ $t('message.alarmValueSet.bjz') }}
              </div>
              <div @click="edit(scope.row)" class="operationText">
                <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                <span>{{ $t('message.alarmValueSet.edit') }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :title="$t('message.alarmValueSet.Popup_title')[Popup.type]"
      :visible.sync="Popup.show"
      width="667px"
      @closed="closeDialog"
    >
      <div class="dialog_content">
        <el-form
          v-show="Popup.type === 'edit'"
          size="medium"
          ref="addEditForm"
          :model="addEditForm"
          :rules="addEditRules"
          label-width="120px"
          class="dialogFormBox"
        >
          <!--<el-form-item :label="$t('message.alarmValueSet.dialog_edit.contactNumber')" >
                        <el-input v-model="addEditForm.devName"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                    </el-form-item>-->
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.deviceId')" prop="deviceId">
            <el-input v-model="addEditForm.deviceId" disabled :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
          </el-form-item>
          <!--<el-form-item label="接收时间" prop="realTime">
                        <el-date-picker
                                v-model="addEditForm.realTime"
                                type="datetime"
                                value-format="yyyy-MM-dd hh:mm:ss"
                                placeholder="选择日期">
                            &lt;!&ndash;value-format="yyyy-MM-dd hh:mm:ss"&ndash;&gt;
                        </el-date-picker>
                    </el-form-item>-->
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.isEnable')" prop="isEnable">
            <el-radio-group v-model="addEditForm.isEnable">
              <el-radio :label="0">{{ $t('message.alarmValueSet.dialog_edit.isEnableArr')[0] }}</el-radio>
              <el-radio :label="1">{{ $t('message.alarmValueSet.dialog_edit.isEnableArr')[1] }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.name')" prop="deviceName">
            <el-input v-model="addEditForm.deviceName" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.address')">
            <el-input v-model="addEditForm.address" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.lng')">
            <el-input v-model="addEditForm.lng" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.lat')">
            <el-input v-model="addEditForm.lat" :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.pusher')">
            <el-select
              v-model="addEditForm.alarmPushWorkerId"
              multiple
              filterable
              :placeholder="$t('message.alarmValueSet.placeholder_select')"
            >
              <el-option v-for="item in options" :key="item.workerId" :label="item.workerName" :value="item.workerId"> </el-option>
            </el-select>
          </el-form-item>
          <div class="dialog-footer">
            <el-button class="cancleBtn" @click="Popup.show = false" icon="el-icon-circle-close" size="medium"
              >{{ $t('message.alarmValueSet.cancel') }}
            </el-button>
            <el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium"
              >{{ $t('message.alarmValueSet.save') }}
            </el-button>
          </div>
        </el-form>
        <el-form
          v-if="Popup.type === 'ybj' || Popup.type === 'bjz'"
          size="medium"
          ref="warningForm"
          label-width="140px"
          class="dialogFormBox yj-dialogFormBox"
        >
          <el-form-item :label="$t('message.alarmValueSet.early.pm25')" prop="pm25Warning">
            <el-input
              v-model="warningInfo.pm25Warning"
              :placeholder="$t('message.alarmValueSet.placeholder')"
              type="number"
              oninput="if(value.length>20)value=value.slice(0,20)"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.early.pm10')" prop="pm10Warning">
            <el-input
              v-model="warningInfo.pm10Warning"
              :placeholder="$t('message.alarmValueSet.placeholder')"
              type="number"
              oninput="if(value.length>20)value=value.slice(0,20)"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.early.tis')" prop="realTimeTsp">
            <el-input
              v-model="warningInfo.realTimeTsp"
              :placeholder="$t('message.alarmValueSet.placeholder')"
              type="number"
              oninput="if(value.length>20)value=value.slice(0,20)"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.early.windSpeed')" prop="windSpeed">
            <el-input
              v-model="warningInfo.windSpeed"
              :placeholder="$t('message.alarmValueSet.placeholder')"
              type="number"
              oninput="if(value.length>20)value=value.slice(0,20)"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.early.noise')" prop="noiseWarning">
            <el-input
              v-model="warningInfo.noiseWarning"
              :placeholder="$t('message.alarmValueSet.placeholder')"
              type="number"
              oninput="if(value.length>20)value=value.slice(0,20)"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.early.humidity')" prop="realTimeHumidity">
            <el-input
              v-model="warningInfo.realTimeHumidity"
              :placeholder="$t('message.alarmValueSet.placeholder')"
              type="number"
              oninput="if(value.length>20)value=value.slice(0,20)"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.early.MinTemperature')" prop="minTemperature">
            <el-input
              v-model="warningInfo.minTemperature"
              :placeholder="$t('message.alarmValueSet.placeholder')"
              type="number"
              oninput="if(value.length>20)value=value.slice(0,20)"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.early.maxTemperature')" prop="maxTemperature">
            <el-input
              v-model="warningInfo.maxTemperature"
              :placeholder="$t('message.alarmValueSet.placeholder')"
              type="number"
              oninput="if(value.length>20)value=value.slice(0,20)"
            >
            </el-input>
          </el-form-item>
          <!-- pm2.5预警是否推送   pm2.5报警是否推送-->
          <el-form-item :label="type == 2 ? $t('message.projectInfo.PM25warning') : $t('message.projectInfo.PM25alarm')">
            <el-radio-group v-model="warningInfo.isNotPush">
              <el-radio :label="1">{{ $t('message.alarmValueSet.early.isNotPushArr')[0] }}</el-radio>
              <el-radio :label="2">{{ $t('message.alarmValueSet.early.isNotPushArr')[1] }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="dialog-footer">
            <el-button class="cancleBtn" @click="Popup.show = false" icon="el-icon-circle-close" size="medium"
              >{{ $t('message.alarmValueSet.cancel') }}
            </el-button>
            <el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium"
              >{{ $t('message.alarmValueSet.save') }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  environmentDevEdit,
  environmentDevList,
  environmentWarningEdit,
  getEnvironmentWarningInfo
} from '../../../assets/js/api/environmentManage'
import { getProjectChilderSystemUserListApi } from '@/assets/js/api/configManage'
export default {
  mounted() {
    this.getList()
    this.getLaborManagementList()
  },
  data() {
    return {
      props: {
        multiple: true
      },
      addEditRules: {
        deviceName: [
          { required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: 'blur' },
          { required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: 'change' }
        ]
      },
      options: [
        /*{realName: "曾祥万", value: 1},
                    {realName: "李先生", value: 2},*/
      ],
      warningInfo: {},
      addEditForm: {},
      List: [],
      Popup: {
        type: 'edit',
        show: false
      },
      type: ''
    }
  },
  methods: {
    closeDialog() {
        console.log("关闭弹窗")
        this.warningInfo = {}
        this.addEditForm = {}
    },
    handle(type, show) {
      //打开弹窗前的统一处理
      this.Popup = {
        type: type,
        show: show
      }
    },
    setWarningType(warningType) {
      this.warningInfo.warningType = warningType
      environmentWarningEdit(this.warningInfo).then(result => {
        if (result.success) {
          this.$message.success(result.message)
          console.log('预警值/报警值设置成功', result)
        }
      })
    },
    submit() {
      if (this.Popup.type === 'ybj') {
        console.log('打印预警设置', this.warningInfo)
        this.setWarningType(2)
        this.Popup.show = false
      } else if (this.Popup.type === 'bjz') {
        this.setWarningType(1)
        this.Popup.show = false
      } else if (this.Popup.type === 'edit') {
        this.$refs.addEditForm.validate(valid => {
          if (valid) {
            let params = this.addEditForm
            if (this.addEditForm.alarmPushWorkerId) {
              params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(',')
            }

            params.projectSn = this.$store.state.projectSn
            console.log('编辑信息', this.addEditForm)
            environmentDevEdit(params).then(result => {
              if (result.success) {
                // console.log('信息编辑成功', result);
                this.$message.success(result.message)
                this.getList()
                this.Popup.show = false
              }
            })
          } else {
            return false
          }
        })
      }
    },
    Change() {},
    yu(obj, type) {
      console.log('预警', obj)
      this.handle('ybj', true)
      obj.warningType = 2
      this.type = type
      this.getWarningInfo(obj)
      // this.warningInfo.id = obj.id;
      // this.warningInfo.deviceId = obj.deviceId;
      // this.warningInfo.projectSn = obj.projectSn;
    },
    bao(obj, type) {
      this.type = type
      console.log('报警', obj)
      // this.warningInfo.id = obj.id;
      /*this.warningInfo.deviceId = obj.deviceId;
                this.warningInfo.projectSn = obj.projectSn;*/
      this.handle('bjz', true)
      obj.warningType = 1
      this.getWarningInfo(obj)
    },
    edit(obj) {
      console.log('编辑', obj)
      this.addEditForm = JSON.parse(JSON.stringify(obj))
      if (typeof obj.alarmPushWorkerId === 'string' && obj.alarmPushWorkerId != '') {
        this.addEditForm.alarmPushWorkerId = obj.alarmPushWorkerId.split(',')
      }
      this.handle('edit', true)
    },
    getList() {
      environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
        if (result.success) {
          this.List = result.result
          console.log('列表', result)
        }
      })
    },
    refresh() {
      this.getList()
    },
    getWarningInfo(obj) {
      let { deviceId, projectSn, warningType } = obj
      getEnvironmentWarningInfo({
        deviceId: deviceId,
        projectSn: projectSn,
        warningType: warningType
      }).then(result => {
        if (result.result) {
          this.warningInfo = result.result
          console.log('预警信息', result)
        }
      })
    },
    getLaborManagementList() {
      getProjectChilderSystemUserListApi({ projectSn: this.$store.state.projectSn }).then(result => {
        this.options = result.result
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tableBtns {
  display: flex;
  justify-content: center;
}

.yj-dialogFormBox {
  width: 462px;
}
::v-deep .el-input__inner {
  line-height: 1px !important;
}
</style>
