<template>
  <div class="alarm-configuration">
    <el-card shadow="never" class="config-card">
      <!-- 搜索区域 -->
      <div class="search-area">
        <seek-page
          :seekList="seekList"
          @search="handleSearch"
          @reset="handleReset"
          :formLength="3"
        />
      </div>

      <!-- 列表视图 -->
      <div class="list-view">
        <ele-pro-table
          ref="table"
          row-key="id"
          :columns="columns"
          :datasource="datasource"
          :cache-key="cacheKeyUrl"
          height="calc(100vh - 350px)"
          @columns-change="handleColumnChange"
        >
          <template v-slot:toolbar
            ><el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="handleAdd"
              >新增</el-button
            ></template
          >
          <template v-slot:alarmLevel="{ row }">
            <el-tag
              :type="getAlarmLevelType(row.alarmLevel)"
              size="small"
              effect="dark"
            >
              {{ row.alarmLevel }}
            </el-tag>
          </template>
          <template v-slot:status="{ row }">
            <el-tag
              :type="row.status === '1' ? 'success' : 'info'"
              size="small"
            >
              {{ row.status === '1' ? '启用' : '停用' }}
            </el-tag>
          </template>
          <template v-slot:action="{ row }">
            <el-link type="primary" :underline="false" @click="handleEdit(row)"
              >编辑</el-link
            >
            <el-link
              type="danger"
              :underline="false"
              @click="handleDelete(row)"
              style="margin-left: 8px"
              >删除</el-link
            >
          </template>
        </ele-pro-table>
      </div>

      <!-- 新增/编辑弹窗 -->
      <alarm-dialog ref="alarmDialogRef" @reload="$refs.table.reload()" />
    </el-card>
  </div>
</template>

<script>
  import AlarmDialog from './alarmDialog.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    components: {
      AlarmDialog
    },
    mixins: [tabMixins, dictMixins],

    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            prop: 'alarmName',
            label: '告警名称',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'alarmLevel',
            label: '告警级别',
            align: 'center',
            minWidth: 100,
            slot: 'alarmLevel'
          },
          {
            prop: 'alarmObject',
            label: '告警对象',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'deviceCategory',
            label: '告警设备分类',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'alarmPush',
            label: '告警推送',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            minWidth: 80,
            slot: 'status'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            slot: 'action'
          }
        ],
        cacheKeyUrl: 'ems-alarm-configuration-list'
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '关键词',
            value: 'keyword',
            type: 'input',
            width: 200,
            placeholder: '请输入'
          },
          {
            label: '告警级别',
            value: 'alarmLevel',
            type: 'select',
            width: 120,
            placeholder: '全部',
            planList: [
              { value: '', label: '全部' },
              { value: '严重', label: '严重' },
              { value: '紧急', label: '紧急' },
              { value: '一般', label: '一般' }
            ]
          },
          {
            label: '告警对象',
            value: 'alarmObject',
            type: 'select',
            width: 120,
            placeholder: '全部',
            planList: [
              { value: '', label: '全部' },
              { value: '用电', label: '用电' },
              { value: '用水', label: '用水' },
              { value: '用气', label: '用气' }
            ]
          },
          {
            label: '状态',
            value: 'status',
            type: 'select',
            width: 120,
            placeholder: '全部',
            planList: [
              { value: '', label: '全部' },
              { value: '1', label: '启用' },
              { value: '0', label: '停用' }
            ]
          }
        ];
      }
    },
    methods: {
      // 获取告警级别类型
      getAlarmLevelType(level) {
        const typeMap = {
          严重: 'danger',
          紧急: 'warning',
          一般: 'success'
        };
        return typeMap[level] || 'info';
      },
      // 新增
      handleAdd() {
        this.$refs.alarmDialogRef.open();
      },
      // 编辑
      handleEdit(row) {
        this.$refs.alarmDialogRef.open(row);
      },
      // 删除
      handleDelete(row) {
        this.$confirm('确认删除该告警配置吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message.success('删除成功');
          })
          .catch(() => {});
      },
      // 搜索
      handleSearch(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      // 重置
      handleReset() {
        this.$refs.table.reload({ page: 1 });
      },
      // 表格数据源
      datasource({ page, limit, where, order }) {
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit
        };
        // 这里调用实际的API
        return Promise.resolve({
          list: [
            {
              id: 1,
              alarmName: '用电量超标告警',
              alarmLevel: '严重',
              alarmObject: '用电',
              deviceCategory: '电表',
              alarmPush: '短信、APP推送',
              status: '1'
            },
            {
              id: 2,
              alarmName: '用水量异常告警',
              alarmLevel: '紧急',
              alarmObject: '用水',
              deviceCategory: '水表',
              alarmPush: '短信、APP推送',
              status: '1'
            },
            {
              id: 3,
              alarmName: '设备离线告警',
              alarmLevel: '严重',
              alarmObject: '用电',
              deviceCategory: '电表',
              alarmPush: '短信、APP推送',
              status: '1'
            },
            {
              id: 4,
              alarmName: '用气量超标告警',
              alarmLevel: '一般',
              alarmObject: '用气',
              deviceCategory: '气表',
              alarmPush: 'APP推送',
              status: '1'
            },
            {
              id: 5,
              alarmName: '电表故障告警',
              alarmLevel: '紧急',
              alarmObject: '用电',
              deviceCategory: '电表',
              alarmPush: '短信、APP推送',
              status: '0'
            }
          ],
          total: 5
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .alarm-configuration {
    .config-card {
      height: calc(100vh - 100px);

      ::v-deep .el-card__body {
        height: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
      }
    }

    // 搜索区域
    .search-area {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;
    }

    // 列表视图
    .list-view {
      flex: 1;
      overflow: hidden;

      ::v-deep .ele-pro-table {
        .el-table {
          border: 1px solid #ebeef5;
          border-radius: 4px;
        }
      }
    }
  }
</style>
