<template>
  <el-card>
    <div class="row-box">
      <div class="handle-box">
        <el-button type="primary" class="mr10" @click="handleInsert">新增记录</el-button>
        <el-button type="primary" class="mr10" @click="export2Excel">批量导出</el-button>
        <el-button type="primary" class="mr10" @click="outExe">模板下载</el-button>
        <el-upload class="handle-edit mr10" style=" display: inline;" action="/sharding/scadabj/import"
          :headers="token" :show-file-list="false" :on-success="handleSuccess" :on-progress="handleProgress"
          :on-error="handleError">
          <el-button type="primary" icon="el-icon-lx-top" @click="exportShow = true">
            批量导入</el-button>
        </el-upload>
      </div>
      <div class="handle-box">
        <el-select v-if="!isStation" v-model="query.stationId" placeholder="场站" class="handle-select mr10"
          style="width: 150px" clearable>
          <el-option v-for="item in stationListAll" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <el-input v-model="query.description" placeholder="描述" class="handle-input mr10" clearable></el-input>
        <el-input v-model="query.pointKey" placeholder="测点" class="handle-input mr10" clearable></el-input>
        <el-select v-model="query.enable" placeholder="是否可用" class="handle-select mr10" clearable>
          <el-option key="1" label="启用" value="1" />
          <el-option key="2" label="停用" value="0" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
      </div>
    </div>
    <el-table :data="state.tableData" border class="table" header-cell-name="table-header"
      :highlight-current-row="true">
      <el-table-column prop="pointKey" label="测点" align="center" min-width="200px" />
      <el-table-column prop="description" label="描述" align="left" min-width="120px">
      </el-table-column>
      <el-table-column label="报警类型" align="center" min-width="50">
        <template #default="scope">{{
            category1Convert(scope.row.category1)
        }}</template>
      </el-table-column>
      <el-table-column label="场站" prop="stationName" align="center" />
      <el-table-column label="报警级别" align="center" min-width="40">
        <template #default="scope">{{
            rankConvert(scope.row.rank)
        }}</template>
      </el-table-column>
      <el-table-column label="报警逻辑" align="center" min-width="70">
        <template #default="scope">{{
            alarmTypeConvert(scope.row.alarmType)
        }}</template>
      </el-table-column>
      <el-table-column label="是否启用" align="center" min-width="50" prop="enabled">
        <template #default="scope">
          <span>{{ enabledConvert(scope.row.enabled) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button type="primary" plain round size="mini" icon="el-icon-lx-edit"
            :disabled="notEdit || scope.row.range == 1" @click="handleEditClick(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" hide-on-single-page :current-page="query.pagenum"
        :page-size="query.pagesize" :total="total" @current-change="handlePageChange"></el-pagination>
    </div>
    <scadacomponents @close="dialogclose" :isVisible="state.visible" :form="state.form" />
  </el-card>
</template>
<script setup>
import { scadabj_fetchTableData } from "/@/api/api.js";
import { outExportExcel } from "/@/utils/exportExcel"; //引入文件
import { ref, onMounted, provide, computed, reactive, watch } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import scadacomponents from "./scada_components.vue";
import { common } from "/@/composables/common";
const { notEdit } = common();
const token = { 'token': sessionStorage.getItem('token') }
const store = useStore();
const stationListAll = computed(() => store.state.stationListAll);
const isStation = computed(() => store.getters.isStation);
const state = reactive({
  tableData: [],
  visible: false,
  form: {},
});
const query = reactive({
  pagenum: 1,
  pagesize: 15,
  stationId: "",
  description: "",
  pointKey: "",
  enable: "",
});
let total = ref(0);
onMounted(() => {
  getData();
});
const dialogclose = () => {
  state.visible = false
  getData()
}
const getData = async () => {
  const res = await scadabj_fetchTableData(query);
  console.warn(res);
  state.tableData = res.records;
  total.value = res.total;
};
const handleEditClick = (row) => {
  console.warn(row);
  let obj = Object.assign({},row)
  state.form = obj;
  state.visible = true;
};
const handleInsert = () => {
  state.visible = true;
};


// 分页导航
const handlePageChange = (val) => {
  query.pagenum = val;
  getData();
};
const tableHeader = [
  "id",
  "场站（必填）",
  "测点（必填）",
  "描述",
  "报警类型（必填）",
  "类别2",
  "类别3",
  "类别4",
  "报警级别（必填——1：低；2：中低；3：中；4：中高；5：高）",
  "报警逻辑（必填——0：【0触发，1解除】；1：【1触发，0解除】；2：【变化触发】）",
  "是否可用（必填——1：启用；0：停用）",
  "设备编号",
];

const tableKey = [
  "id",
  "stationId",
  "pointKey",
  "description",
  "category1",
  "category2",
  "category3",
  "category4",
  "rank",
  "alarmType",
  "enabled",
  "deviceId",
];
// 批量导出
const export2Excel = async () => {
  let { stationId, description, pointKey, enable } = query;
  const res = await scadabj_fetchTableData({
    pagenum: 1,
    pagesize: 999999,
    stationId,
    description,
    pointKey,
    enable,
  });
  ElMessage.success(`导出成功!`);
  outExportExcel(tableHeader, tableKey, res.records, "升压站报警导出excel");
};
// 模板下载
const outExe = () => {
  const data = [];
  ElMessage.success(`导出成功!`);
  outExportExcel(tableHeader, tableKey, data, "升压站报警模板");
};
// 批量导入
const handleSuccess = (response, file, fileList) => {
  ElMessage.success("导入成功!");
  getData();
};
const handleProgress = (response, file, fileList) => { };
const handleError = (response, file, fileList) => {
  ElMessage.success("导入失败!");
};
const rankobj = {
  '1': '低',
  '2': '中低',
  '3': '中',
  '4': '中高',
  '5': '高',
}
const rankConvert = (val) => {
  return rankobj[val]
};

// 状态
const enabledConvert = (val) => {
  return val == 0 ? "停用" : "启用"
};
const category1Convert = (val) => {
  return val == "SYZ" ? "升压站" : "光伏"
};
const alarmTypeConvert = (alarmType) => {
  if (alarmType === 0) {
    return "0触发，1解除";
  } else if (alarmType === 1) {
    return "1触发，0解除";
  } else if (alarmType === 2) {
    return "变化触发";
  }
};


</script>
<style scoped>
.handle-box {
  margin-bottom: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.row-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
