<template>
    <el-drawer
    :title="titleMap[mode]"
    v-model="visible"
    size="60%"
    destroy-on-close
    @closed="$emit('closed')"
  >
  <el-container v-loading="loading">
    <el-main>
      <el-card header="事件信息">
        <el-form id="infoForm" label-width="100px">
          <el-row>
            <el-col :span='10'>
              <el-form-item label="事件种类：">
                <el-tag
                  v-for="item in form.cates_"
                  :key="item.id"
                  type="warning"
                  >{{ item.name }}</el-tag>
              </el-form-item>
            </el-col>
           <el-col :span="5">
            <el-form-item label="事件标记："><span>{{ mark_options2[form.mark] }}</span></el-form-item>
           </el-col>
           <el-col :span="9">
            <el-form-item label="发生时间："><span>{{ form.create_time }}</span></el-form-item>
           </el-col>
           <el-col :span="10">
            <el-form-item label="发生区域："><span v-if="form.area_">{{ form.area_.name }}</span></el-form-item>
           </el-col>
           <el-col :span="5">
            <el-form-item label="事件类型：">
              <span v-if="form.obj_cate=='opl'">作业</span>
              <span v-else-if="form.obj_cate=='people'">人员</span>
              <span v-else-if="form.obj_cate=='area'">区域</span>
              <span v-else>其他</span>
            </el-form-item>
           </el-col>
           <el-col :span="9">
            <el-form-item v-if="form.obj_cate=='people'" label="触发人：">
              <span v-if="form.employee_">{{ form.employee_.name }}</span>
              <el-tag v-if="form.employee_">{{ form.employee_.belong_dept_name }}</el-tag>
            </el-form-item>
            <el-form-item v-if="form.obj_cate=='opl'" label="触发作业:"><span @click="oplClick(form.opl)">{{ form.operation_name }}</span></el-form-item>
            <el-form-item v-if="form.obj_cate=='area'" label="触发区域:"><span v-if="form.area_">{{ form.area_.name }}</span></el-form-item>
           </el-col>
           <el-col :span="10">
            <el-form-item label="抓拍设备：">
              <span v-if="form.vchannel"> {{ form.vchannel_.code }}-{{ form.vchannel_.name }}</span>
              <span v-else> 未设置</span>
            </el-form-item>
           </el-col>
            <el-col :span="14">
              <el-form-item label="抓拍图片：">
              <div style="display: flex" v-if="form.global_img!=null" id="eventImgWrap">
                <el-image
                    style="margin-right: 8px;height: 146px;flex: 1;"
                    :src="form.global_img"
                    :preview-src-list="[form.global_img]"
                    :initial-index="1"
                    fit="cover"
                  />
                  <el-image
                    style="margin-right: 8px;height: 146px;"
                    :src="form.face_img"
                    :preview-src-list="[form.face_img]"
                    :initial-index="1"
                    fit="cover"
                  />
            </div>
            <div v-else>无抓拍</div>
            </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card v-if="form.handle_user" style="margin-top: 8px">
        <el-descriptions title="事件处理" :border="true">
          <el-descriptions-item label="事件标记"
            >{{ mark_options2[form.mark] }}
          </el-descriptions-item>
          <el-descriptions-item label="处理人">
            <span v-if="form.handle_user"></span>{{ form.handle_user_name }}
          </el-descriptions-item>
          <el-descriptions-item label="处理时间">
            {{ form.handle_time }}
          </el-descriptions-item>
          <el-descriptions-item label="处理描述" column="3">
            {{ form.handle_desc }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card header="事件处理" v-else style="margin-top: 8px">
        <el-form :inline="true">
          <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-form-item label="处理描述">
            <el-input
              v-model="form.handle_desc"
              clearable
              type="textarea"
              :disabled="mode==='show'"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="mode==='edit'">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </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-main>
  </el-container>
</el-drawer>
</template>

<script>
export default {
  name: "eventfrom",
  emits: ["success", "closed"],
  props: {
    eventID: {
				type: String,
				default: ""
			}
		},
  data() {
    return {
      loading: false,
      visible: false,
      isSaveing: false,
      mode: "show",
      titleMap: {
        edit: "事件处理",
        show: "事件信息查看",
      },
      type_options: [
        { id: "employee", name: "正式员工" },
        { id: "remployee", name: "相关方" },
        { id: "visitor", name: "访客" },
      ],
      type_options2: {
        employee: "正式员工",
        remployee: "相关方",
        visitor: "访客",
      },
      mark_options2: {
        10: "正常",
        20: "误报",
      },
      mark_options: [
        { id: 10, name: "正常" },
        { id: 20, name: "误报" },
      ],
      form: {},
      remindData: [],
      eventId: "",
    };
  },
  mounted() {
    this.eventId = this.eventID; //事件的ID
    this.getEvent();
    this.getRemind();
  },
  methods: {
    //显示
    open(mode = "show") {
      debugger;
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
    },
    getEvent() {
      this.loading = true;
      this.$API.ecm.event.item
        .req(this.eventId)
        .then((res) => {
          this.loading = false;
          this.form = res;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    getRemind() {
      this.$API.ecm.remind.list
        .req({ event: this.eventId, page: 0 })
        .then((res) => {
          this.remindData = res;
        });
    },
    onSubmit() {
      let params = {};
      params.mark = this.form.mark;
      params.handle_desc = this.form.handle_desc;

      this.$API.ecm.event.handle.req(this.form.id, params).then((res) => {
        this.$emit("success");
        this.$message.success("操作成功");
        return res;
      });
    },
    oplClick(opl){
      this.$emit("oplDetail",opl);
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
#infoForm .el-form-item--default .el-form-item__label {
    width: 150px;
    height: 50px;
    background: #fafafa;
    line-height: 50px;
    text-align: center!important;
    border: 1px solid #dddddd;
}
</style>