<template>
  <div id="RQ_Warning">
    <!-- 左侧 -->
    <div class="leftBox">
      <el-form :model="AllData.form" style="max-width: 100%; padding: 0 40px 0 0px" class="GongDanPaiForm">
        <el-form-item label="事件类型：">
          <el-input v-model="AllData.form.sjlx" placeholder="请输入事件类型" />
        </el-form-item>

        <el-form-item label="提醒类型：">
          <el-radio-group v-model="AllData.form.radio" @change="(active = 1), changeSele(AllData.form.radio)">
            <el-radio label="5">预警</el-radio>
            <el-radio label="4">Ⅳ级</el-radio>
            <el-radio label="3">Ⅲ级</el-radio>
            <el-radio label="2">Ⅱ级</el-radio>
            <el-radio label="1">Ⅰ级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预警开始时间：" prop="queryTimeDay">
          <el-date-picker clearable type="datetime" v-model="AllData.form.queryTimeDay" placeholder="请选择预警开始时间" />
        </el-form-item>

        <el-form-item label="预警结束时间：" prop="queryTimeDay1">
          <el-date-picker clearable type="datetime" v-model="AllData.form.queryTimeDay1" placeholder="请选择预警结束时间" />
        </el-form-item>

        <el-form-item label="可能影响范围：">
          <el-input type="textarea" :rows="4" v-model="AllData.form.knyxfw" placeholder="请输入可能影响范围：" />
        </el-form-item>

        <el-form-item label="警情情况：">
          <el-input v-model="AllData.form.jqqk" placeholder="请输入警情情况：" />
        </el-form-item>

        <el-form-item label="建议措施：">
          <el-input v-model="AllData.form.jycs" placeholder="请输入建议措施：" />
        </el-form-item>

        <el-form-item label="发布单位：">
          <el-button color="#03B6A0" style="width: 110px; height: 34px" @click="(active = 2), FbDialog()">选择接收人</el-button>
        </el-form-item>
        <div class="briefing flex">
          <div class="kind flex">环保局局(2)</div>
        </div>
        <el-form-item label="发布单位：" style="margin-top: 20px">
          <el-input v-model="AllData.form.fbdw" placeholder="请选择发布单位：" />
        </el-form-item>
      </el-form>
      <el-button class="ButtClass flex" @click="(active = 3), QcDialog()">起草通知</el-button>
    </div>
    <!-- 右侧 -->
    <div class="rightBox" v-if="active == '1'">
      <!-- 启动条件 -->
      <div class="Qdtj">
        <div class="headBox flex">Ⅲ级响应(黄色)启动条件</div>
        <div class="Sheet flex">是指重伤或较大损失事故，经济损失在10-50万元以内；</div>
      </div>
      <!-- 基本响应要求 -->
      <div class="jbxq">
        <div class="headBox flex">基本响应要求</div>
        <div class="jbxqSheet flex">
          燃气事故发生后，涉事单位必须迅速作出反应，启动内部应急救援预案，指派有
          关力量进行先期应急处置，尽可能地控制事态发展，组织开展应急救援工作。
          一般事故、较大事故由涉事单位启动内部应急救援预案进行处置；重大事故由涉
          事单位报请市城管局启动《延安市城区燃气事故应急救援预案》进行处置；特大事故由市城管局报请市政府启动《延安市突发公共事件总体应急预案》进行处置。
        </div>
      </div>
      <!-- 基本措施 -->
      <div class="jbcs">
        <div class="headBox flex">基本措施</div>
        <div class="jbcsSheet flex">
          (1)突发事故液化石油气供应处负责先期处置，并及时向指挥部办公室报告救援 情况；
          (2)指挥部接报后启动《延安市城区燃气事故应急救援预案》，同时指挥部领导、各抢险小组负责人在20分钟内进入事故现场，组织确定抢险方案并指挥实施；
          (3)协调指挥组要准确下达指挥部的各种指令，必要时征收、征用局属单位内其
          他急需的物资、设备，确保抢险救援工作安全有序的进行； （4）技术保障组配合抢险救援队迅速制定抢险救援方案；
          (5)抢险救援队尽快消除危害和危险源，并对现场进行不间断监测，终止可能导 致灾害扩大的活动，防止衍生事件发生；
          (6)警戒救护组根据现场情况，划定警戒线，配合涉事单位抢险队警戒分队维持
          秩序，组织救护人员，疏散、撤离、安置安全受到威胁的人员；
          (7)通讯联络组根据事故现场情况，做好信息收集工作，随时将事故信息报告上 级部门；
          (8)抢险过程中，指挥部要随时跟踪事态变化，如发现事态有进一步扩大的趋势，有可能超出自身的控制能力，立即向市应急办请求调配其他应急资源参与处置工作；
          (9)危险排除后，抢险组要保护好现场，由有关部门或机构进行事故原因调查及 损失核定。
        </div>
      </div>
      <!-- 抢险救援方案 -->
      <div class="qxjy">
        <div class="headBox flex">抢险救援方案</div>
        <div class="qxjySheet flex">
          液化气储配站罐区、灌瓶间、槽车装卸台的设施设备发生液化气泄漏时，
          当班运行工立即报告液化气抢险救援队及市城管局城区燃气事故应急抢险救援指挥
          部，同时，储配站值班警卫负责联系消防部门请求支援，指挥部接报后，20分钟内 到达现场，指挥展开抢险救援工作。
        </div>
      </div>
    </div>

    <!-- 选择接收人 -->
    <div class="rightBox" v-if="active == '2'">
      <el-form :inline="true" :model="AllData.Ksform" style="max-width: 60%" class="drainageResponseBox">
        <el-form-item label="科室:" prop="recipient">
          <el-select filterable multiple v-model="AllData.Ksform.recipient" placeholder="请选择科室" style="width: 100%">
            <!-- <el-option v-for="item in psData.userData" :key="item.userId" :label="item.nickName" :value="item.userId" /> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button type="info" @click="cancelForm">取 消</el-button>
        </el-form-item>
      </el-form>
      <el-table @selection-change="handleSelectionChange" v-setHeight :data="tableData" max-height="450">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="#" type="index" width="45" />
        <el-table-column label="姓名" prop="a"></el-table-column>
        <el-table-column label="科室" prop="b"></el-table-column>
        <el-table-column label="职位" prop="c"></el-table-column>
        <el-table-column label="联系手机号" prop="d"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="AllData.total"
        v-model:page="AllData.pageNum"
        v-model:limit="AllData.pageSize"
        @pagination="getDataList"
      />
    </div>

    <!-- 起草通知 -->
    <div class="rightBox" v-if="active == '3'">
      <el-table :data="QctableData" max-height="500">
        <el-table-column label="#" type="index" width="45" />
        <el-table-column label="应急响应名称" prop="a"></el-table-column>
        <el-table-column label="启动时间" prop="b"></el-table-column>
        <el-table-column label="结束时间" prop="c"></el-table-column>
        <el-table-column label="状态" prop="d"></el-table-column>
        <el-table-column label="审核方式" prop="e"></el-table-column>

        <el-table-column label="应急响应操作" width="170" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="rowUpdate(scope.row, 1)" v-if="scope.row.releaseStatus == 0">发布</el-button>
            <el-button link type="primary" @click="rowUpdate(scope.row, 2)">解除</el-button>
            <el-button link type="primary" @click="rowUpdate(scope.row, 3)" v-if="scope.row.releaseStatus == 3">回顾</el-button>
            <el-button link type="primary" @click="rowDown(scope.row)" v-if="scope.row.fileurl != ''">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup name="RQ_Warning">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const active = ref(1); //控制右侧面板
const tableData = ref([
  { a: '张一', b: '城管局', c: '局长', d: '13000000000' },
  { a: '张一', b: '城管局', c: '局长', d: '13000000000' },
]);
const QctableData = ref([
  { a: '燃气-Ⅳ级应急-20240618', b: '2024-06-18 19:00', c: '2024-06-18 19:00', d: '已审核', e: '线下', releaseStatus: '0' },
  { a: '燃气-Ⅳ级应急-20240618', b: '2024-06-18 19:00', c: '2024-06-18 19:00', d: '已审核', e: '线下', releaseStatus: '3' },
]);
const AllData = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  form: {
    radio: '5',
    queryTimeDay: '',
    queryTimeDay1: '',
    knyxfw: '',
    sjlx: '',
    jqqk: '',
    jycs: '',
    fbdw: '',
  },
  Ksform: {
    recipient: '',
  },
});
// 等级
function changeSele(val) {
  console.log(val, '1111');
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  console.log(selection, 'selectionselection');
}
// 取消
function cancelForm() {
  active.value = 1;
}

// 选择接收人
function FbDialog() {}
</script>

<style lang="scss" scoped>
#RQ_Warning {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  // background: yellowgreen;
  display: flex;
  .leftBox {
    width: 40%;
    height: 100%;
    // background: rgb(223, 210, 210);
    .ButtClass {
      background: #15d2fd;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      border: 1px solid #15d2fd;
      margin-left: 40%;
    }
    :deep(.GongDanPaiForm) {
      width: 100%;
      height: calc(100% - 60px);
      overflow: auto;
      .briefing {
        margin-top: -10px;
        margin-left: 18%;
        height: 40px;
        width: 82%;
        // background: red;
        .kind {
          margin-top: 5px;
          width: 100px;
          height: 28px;
          background: #114255;
          border: 1px solid #15d2fd;
          justify-content: center;
          align-items: center;
          justify-content: center;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #c1d3d4;
        }
      }

      .el-radio__label {
        padding-left: 0.04167rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
      }
      .el-form-item__label {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
      }
      .el-textarea__inner {
        background: rgba(14, 69, 89, 0.9);
        border: 1px solid #1cf5fc;
        box-shadow: none;
        color: #c1d3d4;
      }
      .el-input__wrapper {
        background: rgba(14, 69, 89, 0.9);
        border: 1px solid #1cf5fc;
        box-shadow: none;

        .el-input__inner {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #c1d3d4;
        }
      }
    }
  }
  .rightBox {
    width: 60%;
    height: 100%;
    // 响应
    .Qdtj {
      width: 100%;
      height: 60px;
      // background: red;
      .Sheet {
        height: 30px;
        border: 1px solid #1cf5fc;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #c1d3d4;
      }
    }
    .jbxq {
      margin-top: 15px;
      width: 100%;
      height: 140px;
      .jbxqSheet {
        text-indent: 20px;
        height: 110px;
        border: 1px solid #1cf5fc;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #c1d3d4;
        overflow: auto;
        padding-top: 5px;
      }
    }
    .jbcs {
      margin-top: 15px;
      width: 100%;
      height: 250px;
      .jbcsSheet {
        text-indent: 20px;
        height: 220px;
        border: 1px solid #1cf5fc;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #c1d3d4;
        overflow: auto;
        padding-top: 5px;
      }
    }
    .qxjy {
      margin-top: 15px;
      width: 100%;
      height: 140px;
      .qxjySheet {
        text-indent: 20px;
        height: 110px;
        border: 1px solid #1cf5fc;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #c1d3d4;
        overflow: auto;
        padding-top: 5px;
      }
    }
    .headBox {
      height: 30px;
      background: #03b6a0;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
      align-items: center;
      justify-content: center;
    }

    // 接收人
    :deep(.drainageResponseBox) {
      .el-form-item__label {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
      }
      .el-select .el-input__wrapper {
        background: rgba(14, 69, 89, 0.9);
        border: 1px solid #1cf5fc;
        box-shadow: none;
        color: #c1d3d4;
      }
    }

    :deep(.el-table) {
      --el-table-bg-color: rgba(255, 255, 255, 0) !important;
      .el-table__header-wrapper th {
        background: rgb(3 182 160 / 37%) !important;
        color: #39f7ff;
      }
      tr {
        background: rgba(255, 255, 255, 0) !important;
        // font-size: 16px;
        color: #ffffff;
      }
      tr:hover > td {
        background: rgba(255, 255, 255, 0) !important;
        // font-size: 16px;
        color: #ffffff;
      }
    }
  }
}
</style>