<template>
    <div class="right">
      <div class="event_div" @click="handleAdd">
        <img class="add"  src="@/assets/image/Frame.png" alt="" />
        添加事件接报
      </div>

      <div class="item1" >
        <span
          style="letter-spacing: 3px; color: #000000; cursor: pointer"
        >事件接报列表</span
        >
      </div>

      <div class="list-info">

        <div v-for="item in eventList">
          <div class="list-title">
            事件名称：{{item.title}}
          </div>
          <div class="list-content">
            <div style="flex: 1.2">
              上报时间: {{ item.reportTime }}
            </div>
            <div style="flex: 1">
              上报人：{{ item.nickName }}
            </div>
          </div>

          <div class="list-content">
            <div style="flex: 1.2">
              状态：{{ responseStatusFormat(item) }}
            </div>
            <div style="flex: 1;display: flex">
              <div> 照片：</div>
              <el-image
                v-if="item.photoUrl"
                style="width: 18px;height: 18px"
                :src="item.photoUrl"
                :preview-src-list="[item.photoUrl]"
                :z-index="9999"
              />
              <span v-else>-</span>
            </div>
          </div>

          <div class="list-content">
            地址: {{ item.address }}
          </div>

          <div class="list-content new">
            最新进展: {{ item.newStep ? item.newStep.disposeContent : "-" }}
          </div>

          <div class="list-operate">
            <div class="button-div" v-if="item.responseStatus == '0'" @click="handleDealEvent(item)">事件处置</div>
            <div class="button-div" @click="handleDetail(item)">详情</div>
            <div class="button-div" v-if="item.responseStatus == '0'" style="background:#FA6767" @click="handleCloseEvent(item)">关闭事件</div>
          </div>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 添加或修改应急响应对话框 -->
      <el-dialog :title="title" :z-index="9999" :visible.sync="open" width="900px" append-to-body destroy-on-close :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="title">
                <el-input v-model="form.title" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上报人" prop="reportBy">
                <el-select
                  v-model="form.reportBy"
                  placeholder="请选择上报人"
                  style="width: 100%"
                >
                  <el-option
                    v-for="user in userList"
                    :key="user.userId"
                    :label="user.nickName"
                    :value="user.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="上报时间" prop="reportTime">
                <el-date-picker clearable size="small"
                                v-model="form.reportTime"
                                type="datetime"
                                style="width: 100%"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择上报时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入地址" />
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="24">
              <el-form-item label="经纬度坐标" prop="longitude">
                <el-col :span="8">
                  <el-input v-model="form.longitude" placeholder="请输入经度"/>
                </el-col>
                <el-col :span="8" style="margin-left: 20px">
                  <el-input v-model="form.latitude" placeholder="请输入纬度"/>
                </el-col>
                <el-col :span="4" style="margin-left: 30px">
                  <el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="描述" prop="description">
            <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="照片" prop="photoUrl">
            <ImageUpload v-model="form.photoUrl"/>
          </el-form-item>

          <el-form-item label="备注" prop="remarks">
            <el-input v-model="form.remarks" 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>

      <GetPos
        :dialogVisible.sync="dialogTableVisibles"
        :devicePos="devicePos"
        @close="dialogcancelFun"
        @getPath="getPath"
        style="z-index: 3000"
      />

      <el-dialog title="处置步骤" :z-index="9999" :visible.sync="stepOpen" width="900px" append-to-body destroy-on-close :close-on-click-modal="false">
        <Dispose v-if="stepOpen" :responseId="responseId"/>
      </el-dialog>

      <el-dialog title="关闭事件" :z-index="9999" :visible.sync="closeOpen" width="900px" append-to-body destroy-on-close :close-on-click-modal="false">
        <el-form ref="closeForm" :model="form" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="事件总结"
                prop="eventSummary"
                :rules='[{ required: true, message: "事件总结不能为空", trigger: "blur" }]'
              >
                <el-input type="textarea" v-model="form.eventSummary" :autosize="{ minRows: 6 }" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCloseForm">确 定</el-button>
          <el-button @click="closeOpen = false">取 消</el-button>
        </div>
      </el-dialog>

      <DetailInfo ref="detail"/>

    </div>
</template>

<script>
  import { listResponse, getResponse, delResponse, addResponse, updateResponse, exportResponse } from "@/api/emergency/response";
  import GetPos from '@/components/GetPos';
  import ImageUpload from "@/components/ImageUpload";
  import { userInfoList } from "@/api/system/user";
  import Dispose from "./Dispose";
  import DetailInfo from "./DetailInfo";
  export default {
    name: "emergency-right",
    components:{
      GetPos,
      ImageUpload,
      Dispose,
      DetailInfo
    },
    data(){
        return{
          total: 0,
          queryParams: {
            pageNum: 1,
            pageSize: 10
          },
          eventList: [],
          open: false,
          title: "",
          form: {},
          rules:{
            title: [
              { required: true, message: "名称不能为空", trigger: "blur" }
            ],
            description: [
              { required: true, message: "描述不能为空", trigger: "blur" }
            ],
            address: [
              { required: true, message: "地址不能为空", trigger: "blur" }
            ],
            reportBy: [
              { required: true, message: "请选择上报人", trigger: "change" }
            ],
            reportTime: [
              { required: true, message: "请选择上报时间", trigger: "change" }
            ],
          },
          dialogTableVisibles: false,
          devicePos: [],
          userList: [],
          responseStatusOptions: [],
          stepOpen: false,
          responseId: null,
          closeOpen: false
        }
    },
    created(){
      this.getList();
      this.getDicts("t_response_status").then(response => {
          this.responseStatusOptions = response.data;
      });
    },
    methods:{
      getList(){
        listResponse(this.queryParams).then(res => {
          this.eventList = res.rows;
          this.total = res.total;
        });
      },
      // 响应状态字典翻译
      responseStatusFormat(row, column) {
        return this.selectDictLabel(this.responseStatusOptions, row.responseStatus);
      },
      getUserInfo(){
        userInfoList().then(res =>{
          if(res.code == 200){
            this.userList = res.data;
          }
        })
      },
      handleAdd(){
        this.reset();
        this.getUserInfo();
        this.open = true;
        this.title = "添加事件接报";
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.responseId != null) {
              updateResponse(this.form).then(response => {
                this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
            } else {
              addResponse(this.form).then(response => {
                this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
            }
          }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          responseId: null,
          title: null,
          address: null,
          description: null,
          photoUrl: null,
          reportTime: null,
          reportBy: null,
          longitude: null,
          latitude: null,
          eventSummary: null,
          responseStatus: "0",
          remarks: null
        };
        this.resetForm("form");
      },
      /**
       * 经纬度坐标方法
       */
      MapdialogFun() {
        this.dialogTableVisibles = true;
      },
      /**
       * 地图关闭方法
       */
      dialogcancelFun() {
        this.dialogTableVisibles = false;
      },
      /**
       * 经纬度 选择
       * @param res
       */
      getPath(res){
        //确认选择经纬度
        this.form.longitude = res[0];
        this.form.latitude = res[1];
      },
      handleDealEvent(item){
        this.responseId = item.responseId;
        this.stepOpen = true;
      },
      handleCloseEvent(item){
        this.reset();
        this.closeOpen = true;
        this.form.responseId = item.responseId;
      },
      submitCloseForm(){
        this.$refs["closeForm"].validate(valid => {
          if (valid) {
            this.form.responseStatus = '1';
            updateResponse(this.form).then(response => {
              this.msgSuccess("事件已关闭");
              this.closeOpen = false;
              this.getList();
            });
          }
        });
      },
      handleDetail(item){
        this.$refs.detail.getDetailInfo(item.responseId);

      }
    }
  }
</script>

<style scoped lang="scss">
  .right{
    //border: 1px solid;
    margin-left: 3px;
    width: 30%;
  }

  .event_div{
    color: white;
    background: #118ce6 ;
    line-height: 50px;
    text-align: center;
    cursor:pointer;
    font-size: 20px;
  }

  .add{
    vertical-align:middle;
    margin-top: -5px
  }

  .item1 {
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    font-weight: 700;
    background: url(~@/assets/images/chuzhilist.png) repeat-x 50px 10px;
    background-size:360px 7px;
    background-repeat: no-repeat;
    text-align: center;
  }

  .list-info{
    height: 90%;
    overflow-y: auto;
    padding: 0px 9px;
    &::-webkit-scrollbar {
      width: 3px;
      background: #dfe4ed;
      position: absolute;
      top: 0;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      // border-radius: 10px;
      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #cccccc;
      border-radius: 5px;
    }
  }

  .list-title{
    padding: 5px;
    width: 100%;
    color: #ffffff;
    background: url(~@/assets/images/yjcz.png);
    background-repeat: no-repeat;
  }

  .list-content{
    display: flex;
    margin: 8px 0px;
    font-size: 14px;
  }

  .button-div{
    cursor:pointer;
    color: #ffffff;
    margin-bottom: 8px;
    border-radius: 2px;
    width: 88px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    margin-left: 22px;
    margin-top: 10px;
    background: #4091F7;
  }

  .list-operate{
    display: flex;
    justify-content: center
  }

  .new{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; // 自定义行数
    -webkit-box-orient: vertical;
  }

  .tooltip-content{
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 3px;
      background: #dfe4ed;
      position: absolute;
      top: 0;
    }
    &::-webkit-scrollbar-thumb {
      background: #cccccc;
      border-radius: 5px;
    }
  }


</style>
