<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="发生时间始"
          end-placeholder="发生时间止" style="margin-right:10px" value-format="YYYY-MM-DD HH:mm:ss" @change="handleQuery"
          clearable />
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
        <el-button type="danger" @click="handleDelete">批量删除</el-button>
      </div>
      <div class="right-panel">
        <el-button type="primary" @click="eventSetting">提醒配置
        </el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="id" :params="query" fit stripe
        @selection-change="handleSelectionChange" @resetQuery="resetQuery" @row-click="rowClick">
        <el-table-column type="selection" width="55" />
        <el-table-column label="发生类型">
          <template #default="scope">
            <el-tag v-for="item in scope.row.cates_" :key="item.id" type="warning" effect="plain">{{ item.name
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="事件信息" width="300" show-overflow-tooltip>
          <template #default="scope">
            <el-link type="primary">{{ scope.row.voice_msg }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="所属工段" prop="mgroupName">
          <template #default="scope">
            <span v-if="scope.row.enm_data">{{ scope.row.enm_data.mgroup_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发生时间" prop="happen_time">
        </el-table-column>
        <el-table-column label="处理超时">
          <template #default="scope">
            <el-tag v-if="scope.row.is_timeout" type="warning">是</el-tag>
            <el-tag v-else type="success" effect="plain">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.mark" type="warning">是</el-tag>
            <el-tag v-else type="success" effect="plain">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="处理人">
          <template #default="scope">{{ scope.row.handle_user_name }}</template>
        </el-table-column>
        <el-table-column label="处理时间">
          <template #default="scope">{{ scope.row.handle_time }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="120px">
          <template #default="scope">
            <el-link type="primary" @click.stop="table_handle(scope.row)" v-auth="'equipment.update'">处理
            </el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="danger" @click.stop="table_del(scope.row)" v-auth="'equipment.delete'">删除
            </el-link>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
    <el-drawer :size="'50%'" v-model="showLimited" title="事件处理" :close-on-click-modal="false">
      <el-card header="基础信息">
        <el-form :model="eventItem" label-width="100px">
          <el-row>
            <el-col :span='12' v-if="eventItem.belong_dept!==null">
              <el-form-item label="所属部门：">{{ eventItem.belong_dept}}</el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="所属工段：">{{ eventItem.enm_data.mgroup_name }}</el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="发生时间：">{{ eventItem.create_time }}</el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="发生类型：">{{ eventItem.cates_[0].name }}</el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="处理人：">
                <span  v-if="eventItem.handle_user_name==null" style="color: #dddddd;">待处理</span>
                <span v-else>{{ eventItem.handle_user_name }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card header="事件信息" style="margin-top: 8px">
        <el-form :model="eventItem" label-width="100px">
          <el-row>
            <el-col>
              <el-form-item label="详细分类：">{{ eventItem.enm_data.type_chin }}</el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="目标值：">{{ eventItem.enm_data.goal_val }}</el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="当前值：">{{ eventItem.enm_data.val }}</el-form-item>
            </el-col>
            
          </el-row>
        </el-form>
      </el-card>
      <el-card v-if="eventItem.handle_user" style="margin-top: 8px">
        <el-descriptions title="事件处理" :border="true">
          <el-descriptions-item label="事件标记">{{ mark_options2[eventItem.mark] }}
          </el-descriptions-item>
          <el-descriptions-item label="处理人">
            <span v-if="eventItem.handle_user_name"></span>{{ eventItem.handle_user_name }}
          </el-descriptions-item>
          <el-descriptions-item label="处理时间">
            {{ eventItem.handle_time }}
          </el-descriptions-item>
          <el-descriptions-item label="异常分析/处理" column="3">
            {{ eventItem.handle_desc }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card header="事件处理" v-else style="margin-top: 8px">
        <el-form :model="form" label-width="150px">
          <el-row>
            <el-col :span='12'>
              <el-form-item label="事件标记">
                <el-select v-model="form.mark" style="width: 100%">
                  <el-option v-for="item in mark_options" :key="item.id" :label="item.name" :value="item.id"
                    :disabled="mode === 'show'" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span='12'>
              <el-form-item label="异常分析/处理">
                <el-input v-model="form.handle_desc" clearable type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="width: 50%;text-align: center;">
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
      </el-card>
      <!-- <el-card header="事件推送情况" style="margin-top: 8px">
        <scTable ref="table" :data="remindData" row-key="id" fit stripe hidePagination hideRefresh hideDo>
          <el-table-column label="#" type="index" width="50"></el-table-column>
          <el-table-column label="事件种类" width="200">
            <template #default="scope">
              <el-tag v-for="item in scope.row.event_.cates_" :key="item.id" type="warning">{{ item.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="事件处理状态" prop="can_handle">
            <template #default="scope">
              <span v-if="scope.row.handle_user == null">未处理</span>
              <span v-else>已处理</span>
            </template>
          </el-table-column>

          <el-table-column label="警报信息" prop="event_.voice_msg" width="200"></el-table-column>

          <el-table-column label="接收人" prop="recipient_.name"></el-table-column>

          <el-table-column label="是否可处理" prop="can_handle">
            <template #default="scope">
              <span v-if="scope.row.can_handle">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column label="是否已读" prop="is_read">
            <template #default="scope">
              <span v-if="scope.row.is_read" color="green">已读</span>
              <span v-else>未读</span>
            </template>
          </el-table-column>

          <el-table-column label="发送时间" prop="create_time"></el-table-column>
        </scTable>
      </el-card> -->
    </el-drawer>
    <el-dialog title="提醒配置" width="50%" v-model="visible" :append-to-body="true">
      <el-form :model="cateItem" label-width="100px">
        <el-form-item label="告警间隔">
          <el-input-number v-model="cateItem.unhandled_push_interval" :min="0" style="width: 90%;"
            controls-position="right"></el-input-number>
          <span>（毫秒）</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" :loading="isSaveing" @click="submitSetting">保 存</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>
<script>
import { CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons-vue";
export default {
  name: "event",
  components: {
    CircleCheckFilled,
    CircleCloseFilled
  },
  data() {
    return {
      visible: false,
      dLoading: false,
      showLimited: false,
      defaultTime: ['00:00:00', '23:59:59'],
      timeRange: [],
      apiObj: this.$API.ecm.event.list,
      query: {
        cates__code__in: 'consume_exceed'
      },
      cateItem: {},
      eventItem: {},
      userName: '',
      eventID: '',
      mark_options2: {
        10: "正常",
        20: "误报",
      },
      form: {
        mark: 10,
        handle_desc: ''
      },
      mark_options: [
        { id: 10, name: "正常" },
        { id: 20, name: "误报" },
      ],
      remindData: [],
    };
  },
  created() {
    this.getSetting();
  },
  mounted() { 
    var userInfo = this.$TOOL.data.get("USER_INFO");
		this.userName = userInfo.username;
  },
  methods: {
    rowClick(row, column, event){
      let mgroup_name = row.enm_data.mgroup_name;
      let path = '';
      if(mgroup_name=='电石渣'){
        path = 'enm_slag/report';
      }else if(mgroup_name=='原料磨'){
        path = 'enm_rm/report';
      }else if(mgroup_name=='煤磨'){
        path = 'enm_coal/report';
      }else if(mgroup_name=='回转窑'){
        path = 'enm_kiln/report';
      }else if(mgroup_name=='水泥磨'){
        path = 'enm_mill/report';
      }else if(mgroup_name=='水泥包装'){
        path = 'enm_pack/report';
      }
      this.$router.push({path:path })
    },
    getSetting() {
      this.$API.ecm.event_cate.list.req({ page: 0 }).then((res) => {
        let that = this;
        res.filter((item) => {
          if (item.code == 'consume_exceed') {
            that.cateItem = item;
            // that.query.cates = item.id;
          }
        })
      }).catch((err) => {
        this.$message.warning(err);
      });
    },
    //提醒配置
    eventSetting() {
      this.visible = true;
    },
    //过呢更改配置
    submitSetting() {
      let that = this;
      if (that.cateItem.unhandled_push_interval !== null && that.cateItem.unhandled_push_interval !== undefined) {
        that.visible = true;
        this.$API.ecm.event_cate.update.req(that.cateItem.id, that.cateItem).then(res => {
          debugger;
          that.visible = false;
          that.isSaveing = false;
          that.$message.success("操作成功");
        })
      }
    },

    //处理
    table_handle(row) {
      this.eventID = row.id;
      this.showLimited = true;
      this.eventItem = row;
      console.log(row);
      // this.$nextTick(() => {
      //   this.$refs.handleDialog.open("edit").setData(row);
      // });
    },
    handleSelectionChange(val) {
      this.selectionList = val;
    },
    //删除事件
    table_del(row) {
      this.$confirm(`确定删除该事件吗？`, "提示", { type: "warning" }).then(() => {
        this.$API.ecm.event.delete.req(row.id).then((res) => {
          this.$message.success("删除成功");
          this.$refs.table.refresh();
          return res;
        }).catch((err) => {
          this.$message.warning(err);
        });
      })
    },
    handleDelete() {
      let that = this;
      if (that.selectionList.length > 0) {
        that.$confirm(`确定删除选中的${that.selectionList.length}条数据吗？`, "提示", { type: "warning" }).then(() => {
          let ids = [];
          that.selectionList.forEach(function (item) {
            ids.push(item.id);
          });
          that.$API.ecm.event.delete.req('bulk', { ids: ids }).then((res) => {
            that.$message.success("批量删除成功");
            that.$refs.table.refresh();
            return res;
          }).catch((err) => {
            that.$message.warning(err);
          });
        })
      }
    },
    //查看
    table_show(row) {
      this.eventID = row.id;
      this.dialog.handle = true;
      this.$nextTick(() => {
        this.$refs.handleDialog.open("show").setData(row);
      });
    },
    //搜索
    handleQuery() {
      if (this.timeRange) {
        this.query.start_create = this.timeRange[0]
        this.query.end_create = this.timeRange[1]
      } else {
        this.query.end_create = null
        this.query.start_create = null
      }
      if (this.query.cates) {

      } else {
        this.query.cates = null
      }
      this.$refs.table.queryData(this.query);
    },
    onSubmit() {
      this.$API.ecm.event.handle.req(this.eventItem.id, this.params).then((res) => {
        this.$emit("success");
        this.$message.success("操作成功");
        return res;
      });
    },
    //本地更新数据
    resetQuery() {
      this.query = {};
    },
    exportList() {
      this.dLoading = true;
      this.$API.ecm.event.export_excel
        .req(this.query)
        .then(res => {
          window.open(res.path, "_blank");
          this.dLoading = false;
        }).catch(e => { this.dLoading = false; })
    }
  },
};
</script>