<template>
  <div>
    <el-card class="no-bottom">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        inline
      >
        <el-form-item label="设备类型:">
          <el-select v-model="form.deviceType" @change="onDeviceTypeChange">
            <el-option label="全部" :value="null" />
            <el-option
              v-for="(deviceType, index) in deviceTypeList"
              :key="index"
              :label="deviceType.name"
              :value="deviceType.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备实例:" prop="deviceInstance">
          <el-select v-model="form.deviceInstance" placeholder="请选择">
            <el-option label="全部" :value="null" />
            <el-option
              v-for="(deviceInstance, index) in deviceInstanceList"
              :key="index"
              :label="deviceInstance.name"
              :value="deviceInstance.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="告警等级:"
          prop="alarmLevel"
        >
          <el-select v-model="form.alarmLevel">
            <el-option label="故障" :value="1" />
            <el-option label="警告" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getTableData(1)">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="margin-top-20">
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="50px"
          align="center"
        />
        <el-table-column
          prop="deviceTypeName"
          label="设备类型"
          min-width="120"
        />
        <el-table-column
          prop="deviceName"
          label="设备名称"
          min-width="120"
        />
        <el-table-column
          prop="dataModelName"
          label="模型名称"
        />
        <el-table-column
          prop="propertyCode"
          label="属性代码"
          min-width="90"
        />
        <el-table-column
          prop="propertyName"
          label="属性名称"
        />
        <el-table-column
          prop="ruleExpression"
          label="判定规则"
          :formatter="ruleExpressionFormatter"
        />
        <el-table-column
          prop="alarmLevel"
          label="告警等级"
          :formatter="alarmLevelFormatter"
        />
        <el-table-column
          prop="threshold"
          label="阈值"
        />
        <el-table-column
          prop="reportValue"
          label="上报值"
        />
        <el-table-column
          prop="reportTime"
          label="上报时间"
          :formatter="$moment"
          min-width="155px"
        />
        <el-table-column
          prop="alarmTime"
          label="告警时间"
          :formatter="$moment"
          min-width="155px"
        />
        <el-table-column
          label="详情"
          width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="editItem(scope.row)">详情</el-button>
            <!--            <el-popconfirm-->
            <!--              title="确定要删除此条记录吗？"-->
            <!--              style="margin-left: 10px"-->
            <!--              @onConfirm="deleteItem(scope.row.id)"-->
            <!--            >-->
            <!--              <el-button slot="reference" type="text">删除</el-button>-->
            <!--            </el-popconfirm>-->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="margin-top-20 text-align-right"
        :current-page="pageForm.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog
      title="告警详情"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <descriptions
        label-position="top"
        label-width="80px"
      >
        <descriptions-item label="设备类型" :value="detailItem.deviceTypeName" />
        <descriptions-item label="设备名称" :value="detailItem.deviceName" />
        <descriptions-item label="模型名称" :value="detailItem.dataModelName" />
        <descriptions-item label="属性代码" :value="detailItem.propertyCode" />
        <descriptions-item label="属性名称" :value="detailItem.propertyName" />
        <descriptions-item label="判定规则" :value="$_dictionaryFormat(detailItem.ruleExpression, 'expression')" />
        <descriptions-item label="告警等级" :value="$_dictionaryFormat(detailItem.alarmLevel, 'alarm_level')" />
        <descriptions-item label="阈值" :value="detailItem.threshold" />
        <descriptions-item label="上报值" :value="detailItem.reportValue" />
        <descriptions-item label="上报时间" :value="$moment(detailItem.reportTime, 'YYYY-MM-DD HH:mm:ss')" />
        <descriptions-item label="告警时间" :value="$moment(detailItem.alarmTime, 'YYYY-MM-DD HH:mm:ss')" />
      </descriptions>
      <span slot="footer" class="dialog-footer">
        <!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTableData } from '@/api/device-alarm/alarm-show'
import dictionary from '@/utils/dictionary'
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
export default {
  name: 'AlarmShow',
  mixins: [
    dictionary
  ],
  props: {},
  data() {
    return {
      form: {
        deviceType: null,
        deviceInstance: null,
        deviceName: null,
        alarmLevel: null
      },
      add: true,
      deviceTypeList: [],
      deviceInstanceList: [],
      dialogVisible: false,
      tableData: [],
      detailItem: {
        deviceTypeName: null,
        deviceName: null,
        dataModelName: null,
        propertyCode: null,
        propertyName: null,
        ruleExpression: null,
        alarmLevel: null,
        threshold: null,
        reportValue: null,
        reportTime: null,
        alarmTime: null
      },
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    }
  },
  watch: {
    'form.deviceType'(val) {
      if (!val) {
        this.form.deviceInstance = null
        this.deviceInstanceList = []
      }
    }
  },
  created() {
    const { deviceTypeId, deviceInstanceId } = this.$route.query
    getAllDeviceModel()
      .then(res => {
        this.deviceTypeList = res.data
        this.form.deviceType = deviceTypeId || null
      })
      .then(_ => {
        return this.form.deviceType ? getAllInstanceByDeviceTypeId({ deviceTypeId: this.form.deviceType }) : { data: [] }
      })
      .then(res => {
        this.deviceInstanceList = res.data
        this.form.deviceInstance = deviceInstanceId || null
      })
      .then(_ => this.getTableData(1))
      .catch(e => console.error(e))
  },
  mounted() {},
  methods: {
    onDeviceTypeChange(val) {
      this.getAllInstanceByDeviceTypeId(val)
    },
    getAllInstanceByDeviceTypeId(val, deviceInstanceId) {
      getAllInstanceByDeviceTypeId({ deviceTypeId: val })
        .then(res => {
          this.deviceInstanceList = res.data
          this.form.deviceInstance = deviceInstanceId || this.deviceInstanceList.length ? this.deviceInstanceList[0].id : null
        })
        .catch(_ => {})
    },
    getTableData(pageNum) {
      const params = {
        ...this.form,
        pageNum: pageNum,
        pageSize: this.pageForm.pageSize
      }
      getTableData(params)
        .then(res => {
          const { records, total } = res.data
          this.tableData = records
          this.pageForm.total = total
        })
        .catch(err => console.error(err))
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    addRow() {
      this.add = true
      this.dialogVisible = true
    },
    editItem(item) {
      this.add = false
      this.detailItem = item
      this.dialogVisible = true
    },
    deleteItem(id) {},
    saveSystem() {},
    handleSizeChange(val) {
      this.pageForm.pageSize = val
      this.getTableData(1)
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
      this.getTableData(val)
    },
    ruleExpressionFormatter(row, column, cellValue, index) {
      return this.$_dictionaryFormat(row, column, cellValue, index, 'expression')
    },
    alarmLevelFormatter(row, column, cellValue, index) {
      return this.$_dictionaryFormat(row, column, cellValue, index, 'alarm_level')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
