<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>
        <el-descriptions title="事件信息" :border="true" :column="24">
          <el-descriptions-item label="事件种类" :span="8"
            ><el-tag
              v-for="item in form.cates_"
              :key="item.id"
              type="warning"
              >{{ item.name }}</el-tag
            ></el-descriptions-item
          >
          <el-descriptions-item label="事件标记" :span="8"
            >{{ mark_options2[form.mark] }}
          </el-descriptions-item>
          <el-descriptions-item label="发生时间"  :span="8">{{
            form.create_time
          }}</el-descriptions-item>
          <el-descriptions-item label="发生区域" :span="8" v-if="form.area_">{{
            form.area_.name
          }}</el-descriptions-item>
          <el-descriptions-item label="事件对象"  span=8>
            <span v-if="form.obj_cate==='opl'">作业</span>
						<span v-else-if="form.obj_cate==='people'">人员</span>
						<span v-else>其他</span>
          </el-descriptions-item>
          <el-descriptions-item label="触发人" v-if="form.obj_cate==='people'"  span=8>
            <span v-if="form.employee">{{ form.employee_.name }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="触发作业"  v-else-if="form.obj_cate==='opl'"  span=8>
            <span v-if="form.employee">{{ form.operation_name }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="抓拍设备" v-if="form.vchannel"  span=8>
            {{ form.vchannel_.code }}-{{ form.vchannel_.name }}
          </el-descriptions-item>
          <el-descriptions-item label="图片" span=16 >
            <div style="display: flex">
              <sc-upload
                v-model="form.global_img"
                title="全景照"
                :disabled="true"
                style="margin-right: 8px; width: auto;flex: 1;"
              ></sc-upload>
              <sc-upload
                v-model="form.face_img"
                title="人脸照"
                :disabled="true"
                style="width: auto"
              ></sc-upload>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </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"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="处理描述">
            <el-input
              v-model="form.handle_desc"
              clearable
              type="textarea"
            ></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">
              <el-span v-if="scope.row.handle_user == null">未处理</el-span>
              <el-span v-else>已处理</el-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">
              <el-span v-if="scope.row.can_handle">是</el-span>
              <el-span v-else>否</el-span>
            </template>
          </el-table-column>
          <el-table-column label="是否已读" prop="is_read">
            <template #default="scope">
              <el-span v-if="scope.row.is_read" color="green">已读</el-span>
              <el-span v-else>未读</el-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() {
      this.$API.ecm.event.handle.req(this.form.id, this.form).then((res) => {
        this.$router.go(-1);
        this.$message.success("操作成功");
        return res;
      });
    },
  },
};
</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%;
}
</style>
