<template>
  <el-container v-loading="loading">
    <!--<sc-title title="详细信息"></sc-title>-->
    <el-main style="padding: 0 20px 20px 20px">
      <el-card class="box-card">
         <sc-title title="事件基本信息"> </sc-title>
      
        <el-form :model="form"  label-width="120px">
          <el-row>
            <el-col :md="4" :sm="24">
              <el-form-item label="事件种类"  prop="cates">
                <el-tag
                  v-for="item in form.cates_"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  >{{ item.name }}</el-tag
                >
              </el-form-item>
            </el-col>
              <el-col :md="4" :sm="24" >
              <el-form-item label="当事人" prop="employee">
                 <el-tag v-if="form.employee"  clearable>{{ form.employee_.name }}</el-tag>
				 <el-tag v-else clearable>未知人员</el-tag>
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="24" v-if="form.area">
              <el-form-item label="发生区域" prop="area">
                <el-input v-model="form.area_.name" clearable :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          
            
            <el-col
              :md="8"
              :sm="24"
              v-if="form.employee && form.employee_.type"
            >
              <el-form-item label="人员类型" prop="employee">
                <el-select v-model="form.employee_.type" style="width: 100%" :disabled="true">
                  <el-option
                    v-for="item in type_options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :md="8" :sm="24">
              <el-form-item label="发生时间">
                <el-input v-model="form.create_time" clearable :disabled="true"></el-input>
              </el-form-item>
            </el-col>

          
           
            <el-col :md="8" :sm="24">
              <el-form-item label="是否超时">
                <el-switch v-model="form.is_timeout"  :disabled="true"/>
              </el-form-item>
            </el-col>

            <el-col :md="8" :sm="24">
              <el-form-item label="人脸照">
                <sc-upload v-model="form.face_img" title="人脸照" :disabled="true"></sc-upload>
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="24">
              <el-form-item label="全景照">
                <sc-upload v-model="form.global_img" title="全景照" :disabled="true"></sc-upload>
              </el-form-item>
            </el-col>
             
              <el-col :md="6" :sm="24">
              <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-col>
              <el-col :md="8" :sm="24">
              <el-form-item label="处理描述">
                <el-input v-model="form.handle_desc" clearable ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row><el-col>  <el-button type="primary" style="float:right" @click="submit()">提交</el-button></el-col></el-row>
        </el-form>
         
      <sc-title title="事件推送列表"></sc-title>
      <scTable
        ref="table"
        :data="remindData"
        row-key="id"
        height="300px"
        fit
        stripe
        @resetQuery="resetQuery"
		hidePagination
      >
        <el-table-column label="#" type="index" width="50"></el-table-column>
        <el-table-column label="事件种类">
          <template #default="scope">
            <el-span
              v-for="item in scope.row.event_.cates_"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              >{{ item.name }}</el-span
            >
          </template>
        </el-table-column>

        <el-table-column
          label="警报信息"
          prop="event_.voice_msg"
        ></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>
</template>

<script>
export default {
  name: "eventfrom",
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      visible: false,
      isSaveing: false,

      mode: "show",
      titleMap: {
        show: "事件信息查看",
      },
      type_options: [
        { id: "employee", name: "企业员工" },
        { id: "remployee", name: "相关方" },
        { id: "visitor", name: "访客" },
      ],
      mark_options: [
        { id: 10, name: "正常" },
        { id: 20, name: "误报" },
      ],
      form: [],
      remindData: [],
      eventID: "",
    };
  },
  mounted() {
    this.eventID = this.$route.query.id; //事件的ID
    this.getEvent();
    this.getRemind();
  },
  methods: {
    getEvent() {
      this.$API.ecm.event.item.req(this.eventID).then((res) => {
        this.form = res;
      });
    },
    getRemind() {
      this.$API.ecm.remind.list
        .req({ event: this.eventID, page: 0 })
        .then((res) => {
          this.remindData = res;
        });
    },
    submit(){

     
       this.$API.ecm.event.handle.req(this.form.id, this.form)
              .then((res) => {
                this.isSaveing = false;
                this.visible = false;
                this.$emit("success", this.form, this.mode);
                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>
