<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="reVisible"
      title="事件详情"
      :show-close="false"
      :close-on-click-modal="false"
      append-to-body
    >
      <!--事件详情-->
      <div class="camerasMg">
        <div>事件详情</div>
        <el-table :data="collectResult" stripe border style="width:100%;">
          <el-table-column width="50" type="index" label="序号"></el-table-column>
          <el-table-column prop="eventName" label="事件名称"></el-table-column>
          <el-table-column prop="eventLevel" label="事件等级">
            <template slot-scope="scope">
              <font>{{scope.row.eventLevel + '级'}}</font>
            </template>
          </el-table-column>
          <el-table-column prop="eventType" label="事件类型"></el-table-column>
          <el-table-column prop="eventAddress" label="事发地点"></el-table-column>
          <el-table-column prop="alarmTime" label="报案时间"></el-table-column>
          <el-table-column prop="alarmPeople" label="报案人"></el-table-column>
          <el-table-column prop="eventContent" label="事件描述" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <!-- 事件处置 -->
      <el-form
        label-width="100px"
      >
        <div v-if="stepArr.length > 0">
          <div style="margin: 10px">事件处置</div>
          <el-steps :space="100" finish-status="success" direction="vertical">
            <el-step
              v-for="(it, index) in stepArr"
              :key="index"
              :description="it.handleTime"
              @click.native="stepClick(it)"
              :class="{'active': it.id == currenstepId}"
            >
				<el-tooltip slot="title" :content="it.handleContent" class="item" effect="dark" placement="bottom" >
				     <!-- <div slot="content" :content="it.handleContent" style="width: 150px;word-wrap: break-word;word-break: break-all;overflow: hidden;"></div> -->
					<p style="width: 150px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{it.handleContent}}</p>
				</el-tooltip>
			</el-step>
          </el-steps>
        </div>
      </el-form>
      <!--事件评估-->
      <div>事件评估</div>
      <el-form
              label-width="100px"
      >
        <el-form-item label="评估内容" prop="evaluateContent">
          <!--<el-input type="textarea" v-model="editFormA.evaluateContent" disabled></el-input>-->
          <div id="editorF" ref="editorF"></div>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="editFormA.remarks" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('redialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss">
@import '@/utils/default.scss';
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import METHOD from "@/utils/methods";
@Component({
  components: {}
})
export default class EventDetailView extends Vue {

  @Prop(String) eventId!: String;
  @Prop(Boolean) reVisible!: Boolean;
  @Prop(String) eventStatus!: string;
  @Provide() editorF: any;
  @Provide() editFormA: any = {};
  @Provide() stepArr: any = [];
  @Provide() currenstepId: string = '';//当前选中step
  @Provide() tableData: Object = {};
  @Provide() collectResult: any=[];
    //创建编辑器
  creatEditor() {
      this.editorF = new ice.editor("editorF");
      //自定义编辑器工具栏菜单（默认展示所有功能）
      this.editorF.menu = [
          "fontSize",
          "foreColor",
          "bold",
          "italic",
          "underline",
          "strikeThrough",
          "line",
          "justifyLeft",
          "justifyCenter",
          "justifyRight",
          "line",
          "table",
          "insertImage",
          "insertOrderedList",
          "insertUnorderedList",
          "indent"
      ];
      this.editorF.height = "100px";
      this.editorF.create();
      document.body.contentEditable = false;
  }
  getTableData() {
      let that = this;
      (that as any).$axios.get(`/eventInfo/getEventInfoById/${that.eventId}`).then(
          (res:any) => {
              if(res){
                  that.collectResult.push(res);
              }
          }
      )
  }
  getCLdata(){
    let that = this;
    (that as any).$axios.get(`/eventInfo/getEventHandleProcessListByEventId/${that.eventId}`).then(
      (res:any) => {
        if(res){
          that.stepArr =  res
        }
      }
    )
  }

  stepClick(item: any){
    console.log(item)
    let that = this;
    that.currenstepId = item.id;
  }

    getPGdata(){
        let that = this;
        (that as any).$axios.get(`/eventInfo/getEventEvaluateInfoByEventId/${that.eventId}`).then(
            (res:any) => {
                if(res){
                    that.editFormA = Object.assign({}, res);
                    that.editorF.setValue(res.evaluateContent)
                    that.$refs.editorF.getElementsByClassName('iceEditor-noselect')[1].contentWindow.document.body.attributes.contenteditable.value=false;
                }
            }
        )
    }

  created() {
    let that = this;
      that.$nextTick(() => {
          that.creatEditor();
      });
      that.getPGdata();

      that.getCLdata();

      that.getTableData();

  }
}
</script>