<template>
  <div class="test-5" style="height: 100%;overflow:auto;overflow-x:hidden">
    <!-- 预警信息 -->
    <div>
      <div class="item1">
        <span class="dot">
          <span class="dot-inner"></span>
        </span>
        <span
          style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
          >事件接报列表</span
        >
      </div>
      <div style="width: 100%" v-for="item in receiveList">
        <div class="el-form-div title-div">
          <div v-if="item.status==1" style="width: 80%;margin-left: 5px;">未指派</div>
          <div v-if="item.status==2" style="width: 80%;margin-left: 5px;">待处置<span
            v-if="(item.governmentRead==0&&userType==-2)||(item.companyRead==0&&userType!=-2)" class="massage"> (您有新消息)</span>
          </div>
          <div v-if="item.status==3" style="width: 80%;margin-left: 5px;">已处置<span
            v-if="(item.governmentRead==0&&userType==-2)||(item.companyRead==0&&userType!=-2)" class="massage"> (您有新消息)</span>
          </div>
          <div v-if="item.status==4" style="width: 80%;margin-left: 5px;">已完结</div>
          <div style="height:30px;color: red;cursor:pointer;" v-if="userType==-2" @click="handleDelete(item.id)">取消事件</div>
        </div>
        <div class="content-div" style="margin-top: -5px;">事件名称：{{item.eventName}}</div>
        <div class="content-div">发生时间：{{item.inforTime}}</div>
        <div class="content-div">事件地点：{{item.address}}</div>
        <div class="el-form-div">
          <div v-if="item.status==1 && userType==-2" class="button-div" @click="assignTask(item)">任务指派</div>
          <div v-if="userType==-2" class="button-div" @click="showList(item.id)" >预案指引</div>
          <div v-if="item.status==3 && userType==-2" class="button-div" @click="endevent(item.id)">事件结案</div>
          <div v-if="userType!=-2" class="button-div" @click="showList(item.id)">信息处置</div>
          <div  class="button-div" @click="showDetail(item.id,$event)">详情</div>
        </div>
        <div :id = "item.id" style="display: none;margin-top: 15px;margin-bottom: 20px;">
          <timeline :timeline-list="handleList"></timeline>
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-row  :gutter="10" class="mb8">
        <el-col :span="1.5" v-if="userType!=-2">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增处置信息</el-button>
        </el-col>
        <el-col :span="1.5" v-if="userType==-2">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleUpdate"
          >新增预案指引</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="handleList" >
        <el-table-column label="类型" align="center" prop="eventType" :formatter="getType" width="120px"/>
        <el-table-column label="处置信息/指导意见" align="center" prop="management" />
        <el-table-column label="处置附件/引导方案" align="center" prop="managementEvent" width="150px">
          <template slot-scope="scope">
          <span
            class="dbtn"
            @click="checkFile(scope.row.managementEvent)"
            v-if="scope.row.managementEvent != null && scope.row.managementEvent!=''"
          >
            <i class="el-icon el-icon-view"></i>查看/下载
          </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="指导意见" align="center" prop="guidanceOpinion" />-->
        <!--<el-table-column label="指导方案" align="center" prop="planUrl" >-->
          <!--<template slot-scope="scope">-->
          <!--<span-->
            <!--class="dbtn"-->
            <!--@click="checkFile(scope.row.planUrl)"-->
            <!--v-if="scope.row.planUrl != null && scope.row.planUrl!=''"-->
          <!--&gt;-->
            <!--<i class="el-icon el-icon-view"></i>查看/下载-->
          <!--</span>-->
            <!--<span v-else>-</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <!--<template slot-scope="scope">-->
              <!--<span>{{ parseTime(scope.row.guidanceTime, '{y}-{m}-{d}') }}</span>-->
            <!--</template>-->
        </el-table-column>
        <!--<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">-->
          <!--<template slot-scope="scope">-->
            <!--&lt;!&ndash;<el-button&ndash;&gt;-->
              <!--&lt;!&ndash;size="mini"&ndash;&gt;-->
              <!--&lt;!&ndash;type="text"&ndash;&gt;-->
              <!--&lt;!&ndash;icon="el-icon-edit"&ndash;&gt;-->
              <!--&lt;!&ndash;@click="handleUpdate(scope.row)"&ndash;&gt;-->
              <!--&lt;!&ndash;v-hasPermi="['system:handle:edit']"&ndash;&gt;-->
            <!--&lt;!&ndash;&gt;修改</el-button>&ndash;&gt;-->
            <!--<el-button-->
              <!--v-if="userType==-2"-->
              <!--size="mini"-->
              <!--type="text"-->
              <!--icon="el-icon-edit"-->
              <!--@click="handleUpdate(scope.row)"-->
              <!--&gt;预案指引</el-button>-->
            <!--<el-button-->
              <!--v-if="userType!=-2"-->
              <!--size="mini"-->
              <!--type="text"-->
              <!--icon="el-icon-delete"-->
              <!--@click="handleDelete2(scope.row)"-->
            <!--&gt;删除</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams2.pageNum"
        :limit.sync="queryParams2.pageSize"
        @pagination="getHandleList"
      />
    </el-dialog>
    <!-- 添加或修改事件处置对话框 -->
    <el-dialog :title="title2" :visible.sync="open2" width="550px"  append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="处置信息" prop="management" :style="display">
          <el-input v-model="form.management" type="textarea"  placeholder="请输入处置信息" />
        </el-form-item>
        <el-form-item label="指导意见" prop="management" :style="display2">
          <el-input v-model="form.management" type="textarea" placeholder="请输入指导意见" />
        </el-form-item>
        <el-form-item label="应急预案" prop="planId" :style="display2">
          <el-select v-model="form.planId" placeholder="请选择预案等级"  @change="fananchange" >
            <el-option
              v-for = "dict in planInfoList"
              :key = "dict.planId"
              :label = "dict.planTitle"
              :value = "dict.planId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处置附件" prop="managementEvent"  :style="display">
          <FileUpload
            listType="picture"
            :fileType="fileType"
            @resFun="getFileInfo"
            @remove="listRemove"
            :fileArr="fileList"
          />
          <el-input v-show="false" disabled v-model="form.managementEvent"></el-input>
          <!--<el-input v-model="form.iconUrl" type="textarea" placeholder="请输入内容" />-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listReceive, getReceive, delReceive, addReceive, updateReceive } from "@/api/system/receive";
  import { listHandle, getHandle, delHandle, addHandle, updateHandle, exportHandle } from "@/api/system/handle";
  import { listPlanInfo } from "@/api/system/planInfo";
  import Timeline from "./Timeline";
  import { getUserProfile } from "@/api/system/user";
  import FileUpload from '@/components/FileUpload';
  let uploadfile = require("@/assets/uploadfile.png");
// 当不轮播时候的刷新时间
export default {
   components: {
  //     RightPic,
          FileUpload,
     Timeline
   },
  data() {
    return {
      fileType:['png', 'jpg', 'jpeg',"doc", "xls", "ppt", "txt", "pdf"],
      // 是否显示弹出层
      open: false,
      open2: false,
      fileList:[],
      receiveList:[],
      userType:"",
      readonly1:false,
      display:"display:none",
      display2:"",
      //方案列表
      planInfoList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        status:5,
        enterpriseId:""
      },
      form:'',
      // 遮罩层
      loading: true,
      title:"",
      title2:"",
      // 总条数
      total: 0,
      // 事件处置表格数据
      handleList: [],
      // 查询参数
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        eventId: null,
      },
      dongtai:[
      ],
      // 表单校验
      rules: {
        management: [
          { required: true, message: "请输入处置信息", trigger: "blur" },
        ],
      }
    };
  },
  mounted() {
    // this.$nextTick(()=>{
    //     this.getScrollHeight();
    // })
    getUserProfile().then(response => {
      this.userType = response.data.deptId;
      if(this.userType!=-2){
        this.queryParams.enterpriseId = response.data.deptId;
      }
      this.getList();
    });
    //定时检测新消息
    setInterval(() => {
        var params = this.queryParams;
        if(this.userType==-2){
          params.governmentRead=0
        }else {
          params.companyRead=0
        }
        listReceive(params).then(response => {
             var newList = response.rows;
              newList.forEach((model) => {
                      this.receiveList.forEach((item) => {
                          if(item.id == model.id){
                            console.log("---------------"+item.id)
                            if(this.userType==-2){
                              item.governmentRead =0;
                            }else {
                              item.companyRead =0;
                            }
                        }
                      });
                });
        });
    }, 5000);
  },
  methods: {
    /** 查询事件接报列表 */
    getList() {
      listReceive(this.queryParams).then(response => {
        this.receiveList = response.rows;
        //this.total = response.total;
      console.log(this.receiveList)
    });
    },
    //获取事件处置列表
    getHandleList() {
      this.loading = true;
      listHandle(this.queryParams2).then(response => {
        this.handleList = response.rows;
      this.total = response.total;
      this.loading = false;
      return response.total;
    });
    },
    showList(id) {
      this.open = true;
      this.title = "事件处置";
      this.queryParams2.eventId= id
      this.getHandleList();
    },
    choice() {
      this.getList();
    },
    getType(row){
      if(row.eventType==1){
        return "处置信息"
      }
      return "预案指引"
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.readonly1=false;
      this.display="";
      this.display2="display:none";
      this.open2 = true;
      this.title2 = "添加事件处置";
      this.form.eventId = this.queryParams2.eventId
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.reset();
      this.readonly1=true;
      this.display="display:none";
      this.display2="";
      //this.form = row;
      this.open2 = true;
      this.title2 = "预案指引";
      this.form.eventId = this.queryParams2.eventId
      this.form.eventType=2;
      this.yuanList();
    },
    yuanList(){
      var params ={pageNum: 1,
          pageSize: 1000};
        listPlanInfo(params).then(response => {
          this.planInfoList = response.rows;
      });
    },
    fananchange(value){
        let obj = {};
        obj = this.planInfoList.find((item)=>{
          return item.planId === value;
        ``});
        this.form.planTitle = obj.planTitle;
        this.form.managementEvent = obj.iconUrl;
        this.form.planId = value;
    },
    // 表单重置
    reset() {
      this.form = {
        handleId: null,
        eventId: null,
        enterpriseId: null,
        enterpriseName: null,
        management: null,
        managementEvent:null,
        planId: null,
        planTitle:'',
        planUrl:'',
        guidanceOpinion: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 处置信息*/
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.handleId != null) {
            updateHandle(this.form).then(response => {
              this.msgSuccess("修改成功");
            this.open2 = false;
            this.getHandleList();
          });
          } else {
            addHandle(this.form).then(response => {
              this.msgSuccess("新增成功");
            this.open2 = false;
            this.getHandleList();
            this.upReceive(this.form.eventId);
          });
          }
        }
      });
    },
    upReceive(id){
      var receiveform = {id:id,status:3}
      if(this.form.eventType==2){
        receiveform.companyRead=0;
      }else {
        receiveform.governmentRead=0;
      }
      updateReceive(receiveform).then(response => {
      });
    },
    updateend(id){
      var receiveform = {id:id,status:4}
      updateReceive(receiveform).then(response => {
      });
    },
    // 取消按钮
    cancel() {
      this.open2 = false;
      this.reset();
    },
    endevent(id){
      var that = this;
      this.$confirm('是否确认事件结案?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return that.updateend(id);
      }).then(() => {
        this.getList();
      this.msgSuccess("处理成功");
    }).catch(() => {});
    },
    /** 删除按钮操作 */
    handleDelete2(row) {
      const handleIds = row.handleId || this.ids;
      this.$confirm('是否确认删除事件处置数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delHandle(handleIds);
      }).then(() => {
        this.getHandleList();
      this.msgSuccess("删除成功");
    }).catch(() => {});
    },
    /** 删除按钮操作 */
    handleDelete(id) {
      this.$confirm('是否确认取消事件接报数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delReceive(id);
      }).then(() => {
        this.getList();
      this.msgSuccess("删除成功");
    }).catch(() => {});
    },
    assignTask(item){
      this.$parent.handleUpdate(item);
    },
    async showDetail(id,event){
      var that = this;
      that.queryParams2.eventId= id
      that.queryParams2.pageSize=100;
      if(event.target.innerText=="详情"){
                await listHandle(that.queryParams2).then(response => {
                    this.handleList = response.rows;
                    if(response.total==0){
                      this.msgSuccess("暂无详情");
                    }else{
                      event.target.innerText="关闭";
                      document.getElementById(id).style.display="";
                      that.updateRead(id);
                    }
              });
      }else {
        event.target.innerText="详情";
        document.getElementById(id).style.display="none";
      }


    },
    //更改读取状态
    updateRead(id){
      var receiveform = {id:id}
      if(this.userType==-2){
        receiveform.governmentRead = 1;
      }else {
        receiveform.companyRead = 1;
      }
      updateReceive(receiveform).then(response => {
      });
      this.receiveList.forEach((item) => {
        if(item.id == id){
            if(this.userType==-2){
              item.governmentRead =1;
            }else {
              item.companyRead =1;
            }
        }
      });
    },
    //上传
    getFileInfo(res){
      //this.form.dealPlan = res.fileName;
      this.form.managementEvent = res.url;
      this.fileList.push({
        name: res.fileName,
        url: uploadfile,
      });
    },
    listRemove(e) {
      this.form.managementEvent = "";
      this.fileList = [];
    },
    checkFile(url) {
      window.open(url,'_blank');
    },
  },
};
</script>

<style lang="scss" scoped>
.item1 {
  width: 93%;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  padding-left: 10px;
  font-weight: 700;
  font-style: italic;
  margin-left: 10px;
  background-image: linear-gradient(
    to left,
    #112238,
    rgb(49 151 195 / 70%) 50%,
    #112238
  );
}
.dot {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  background: rgb(30, 185, 190);
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 2px;
}

.dot-inner {
  background: #44d7dc;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: vabDot 1.2s ease-in-out infinite;
  animation: vabDot 1.2s ease-in-out infinite;
}
  .content-div{
    color: white;
    font-size: 30;
    height: 40px;
    line-height: 50px;
    margin-left: 10px;
  }
.el-form-div{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  width: 100%;
}
  .button-div{
    cursor:pointer;
    color: #339CC9;
    margin-bottom: 5px;
    border-radius: 2px;
    width: 100px;
    border: 1px solid #339CC9;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 15;
    margin-left: 10%;
    margin-top: 10px;
  }
  .title-div{
    width: 100%;
    margin-left: 10px;
    border-left: 5px solid #e6a700;
    border-bottom: 2px solid #1c84c6;
    border-top: 1px solid #1c84c6;
    height: 30px;
    color: white;
    line-height: 30px;
  }
.test-5::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-5::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: #1c84c6;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.dbtn {
  display: inline-block;
  line-height: normal;
  padding-left: 2px;
  padding-right: 2px;
  cursor: pointer;
  border-radius: 3px;
  border-style: solid;
  border-width: 0;
  color: rgb(48, 180, 107);
}
.massage{
  color: #00ffff;
}
.test-5::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #112238;
  border-radius: 10px;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 13vh !important;
  min-height: 500px;
}
</style>
