<template>
  <div id="RQ_Warning">
    <!-- 左侧 -->
    <div class="leftBox">
      <el-form
        ref="roleRef"
        :model="AllData.form"
        :rules="AllData.rules"
        style="max-width: 100%; padding: 0 40px 0 0px"
        class="GongDanPaiForm"
      >
        <el-form-item label="事件类型：" prop="eventType">
          <el-select filterable v-model="AllData.form.eventType" placeholder="请选择事件类型" style="width: 100%">
            <el-option v-for="item in event_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="提醒类型：">
          <el-radio-group v-model="AllData.form.warningLevel" @change="(active = 1), changeSele(AllData.form.warningLevel)">
            <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="warnStartTime">
          <el-date-picker
            clearable
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetime"
            v-model="AllData.form.warnStartTime"
            placeholder="请选择预警开始时间"
          />
        </el-form-item>

        <el-form-item label="预警结束时间：" prop="warnEndTime">
          <el-date-picker
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            type="datetime"
            v-model="AllData.form.warnEndTime"
            placeholder="请选择预警结束时间"
          />
        </el-form-item>

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

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

        <el-form-item label="建议措施：">
          <el-input v-model="AllData.form.recommendedMeasure" 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" v-for="(item, v) in obj">{{ item.departmentName }} ({{ item.num }})</div>
        </div>
        <el-form-item label="发布单位：" style="margin-top: 20px">
          <el-input v-model="AllData.form.publishingUnit" placeholder="请输入发布单位：" />
        </el-form-item>
      </el-form>
      <el-button class="ButtClass flex" @click="(active = 3), QcDialog()">起草通知</el-button>
    </div>
    <!-- 右侧 -->
    <div class="rightBox" v-show="active == '1'">
      <!-- 启动条件 -->
      <div class="Qdtj">
        <div class="headBox flex">{{ YjGrade }}响应启动条件</div>

        <div class="Sheet flex">{{ YjList.startingConditions || '无' }}</div>
      </div>
      <!-- 基本响应要求 -->
      <div class="jbxq">
        <div class="headBox flex">基本响应要求</div>
        <div class="jbxqSheet flex">
          {{ YjList.responseRequirements || '无' }}
        </div>
      </div>
      <!-- 基本措施 -->
      <div class="jbcs">
        <div class="headBox flex">基本措施</div>
        <div class="jbcsSheet flex">
          {{ YjList.basicMeasures || '无' }}
        </div>
      </div>
      <!-- 抢险救援方案 -->
      <div class="qxjy">
        <div class="headBox flex">抢险救援方案</div>
        <div class="qxjySheet flex">
          {{ YjList.rescuePlan || '无' }}
        </div>
      </div>
    </div>

    <!-- 选择接收人 -->
    <div class="rightBox" v-show="active == '2'">
      <el-form :inline="true" :model="AllData.Ksform" style="max-width: 60%" class="drainageResponseBox">
        <el-form-item label="科室:" prop="recipient">
          <el-select
            clearable
            filterable
            v-model="AllData.queryParams.department"
            placeholder="请选择科室"
            style="width: 100%"
            @change="Kschange"
          >
            <el-option v-for="item in department_type" :key="item.value" :label="item.label" :value="item.value" />
          </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" :data="tableData" ref="multipleTable" 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="name"></el-table-column>
        <el-table-column label="科室" prop="departmentName"></el-table-column>
        <el-table-column label="职位" prop="position"></el-table-column>
        <el-table-column label="联系手机号" prop="phone"></el-table-column>
      </el-table>

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

    <!-- 起草通知 -->
    <div class="rightBox" v-show="active == '3'">
      <el-table :data="QctableData" max-height="500">
        <el-table-column label="#" type="index" width="45" />
        <el-table-column label="应急响应名称" prop="responseName"></el-table-column>
        <el-table-column label="启动时间" prop="warnStartTime"></el-table-column>
        <el-table-column label="结束时间" prop="warnEndTime"></el-table-column>
        <el-table-column label="状态" prop="auditStatus">
          <template #default="scope">
            <span>
              {{ scope.row.auditStatus == '0' ? '已审核' : scope.row.auditStatus == '1' ? '发布' : '解除' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="审核方式" prop="auditMethod"></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.auditStatus == 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)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup name="RQ_Warning">
import {
  warningLevelResposeList,
  personnelPage,
  warningReleaseDatailAdd,
  warningReleaseDatailPage,
  warningReleaseDatailEditfb,
} from '@/api/RQWarning.js';
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const { event_type } = proxy.useDict('event_type');
const { department_type } = proxy.useDict('department_type');
const active = ref(1); //控制右侧面板
const tableData = ref([]);
const QctableData = ref([]);
const YjList = ref([]);
const accept = ref([]);
const YjGrade = ref('');
const total = ref(0);
const AllData = reactive({
  rules: {
    eventType: [{ required: true, message: '请选择事件类型', trigger: 'blur' }],
    warnStartTime: [{ required: true, message: '请选择预警开始时间', trigger: 'blur' }],
    warnEndTime: [{ required: true, message: '请选择预警结束时间', trigger: 'blur' }],
    publishingUnit: [{ required: true, message: '请输入发布单位：', trigger: 'blur' }],
  },
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    department: '',
  },
  queryParams2: {
    pageNum: 1,
    pageSize: 100,
  },

  form: {
    warningLevel: '5',
    warnStartTime: '',
    warnEndTime: '',
    incidence: '',
    eventType: '',
    situation: '',
    recommendedMeasure: '',
    publishingUnit: '',
    warningReleaseDeptartList: [],
    primaryType: '', // 1燃气 2:桥梁3：排水4:隧道
    auditMethod: '线下',
  },
  Ksform: {
    recipient: '',
  },
});
// 预警等级响应
const getYjData = val => {
  warningLevelResposeList({ warningLevel: val }).then(res => {
    YjList.value = res.data[0];
  });
};

//接收人下拉框
function Kschange(val) {
  getRyData();
}
const multipleTable = ref(null);
// 接收人
const getRyData = val => {
  personnelPage(AllData.queryParams).then(res => {
    tableData.value = res.data;
    // total.value = res.data.total;
  });
};

// 等级
function changeSele(val) {
  getYjData(val);
  if (val == '1') {
    YjGrade.value = 'Ⅰ级';
  } else if (val == '2') {
    YjGrade.value = 'Ⅱ级';
  } else if (val == '3') {
    YjGrade.value = 'Ⅲ级';
  } else if (val == '4') {
    YjGrade.value = 'Ⅳ级';
  } else {
    YjGrade.value = '预警';
  }
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  accept.value = JSON.parse(JSON.stringify(selection));
  console.log(accept.value, ' accept.value');
}

const obj = ref({});
//确定
function submitForm() {
  const countObj = {};
  accept.value.forEach(item1 => {
    const key = item1.departmentName;
    if (countObj[key]) {
      countObj[key]++;
    } else {
      countObj[key] = 1;
    }
  });
  const countArr = Object.entries(countObj).sort((a, b) => b[1] - a[1]);
  // 输出列表
  let array = [];
  countArr.forEach(([key, value]) => {
    array.push({
      departmentName: key,
      num: value,
    });
    console.log(`${key}: ${value}`);
  });
  obj.value = JSON.parse(JSON.stringify(array));
  active.value = 1;
}

// 取消
function cancelForm() {
  active.value = 1;
  AllData.queryParams.department = '';
  getRyData();
  obj.value = {};
}

// 选择接收人
function FbDialog() {
  AllData.queryParams.department = '';
}

// 起草通知
function QcDialog() {
  proxy.$refs['roleRef'].validate(valid => {
    console.log(valid, 'valid');
    if (valid) {
      AllData.form.warningReleaseDeptartList = accept.value;
      AllData.form.warningReleaseDeptartList.forEach(item => {
        if (item.id) delete item.id;
      });
      warningReleaseDatailAdd(AllData.form).then(res => {
        proxy.$modal.msgSuccess('起草通知成功');
        AllData.form = {};
        obj.value = {};
        YJDialog();
      });
    }
  });
  active.value = 3;
  YJDialog();
}

// 应急响应接口
function YJDialog() {
  warningReleaseDatailPage(AllData.queryParams2).then(res => {
    QctableData.value = res.data;
  });
}

// 发布
function rowUpdate(data, num) {
  if (num == 1) {
    let formData = new FormData();
    formData.append('id', data.id);
    formData.append('auditStatus', '1');
    warningReleaseDatailEditfb(formData).then(res => {
      proxy.$modal.msgSuccess('发布成功');
      bus.emit('Rq_head', data);
      bus.emit('publicDialog_Close');
    });
  }
  if (num == 2) {
    let formData = new FormData();
    formData.append('id', data.id);
    formData.append('auditStatus', '2');
    warningReleaseDatailEditfb(formData).then(res => {
      proxy.$modal.msgSuccess('解除成功');
      bus.emit('Rq_head', false);
      bus.emit('publicDialog_Close');
    });
  }
}

// 下载
function rowDown(data) {}

onMounted(() => {
  bus.on('RQ_PrimaryType', val => {
    AllData.form.primaryType = val;
  });
  getYjData(AllData.form.warningLevel);
  getRyData();
  YjGrade.value = '预警';
});
onBeforeUnmount(() => {
  bus.off('RQ_PrimaryType');
});
</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: 16%;
        height: 40px;
        width: 83%;
        // background: red;
        .kind {
          margin-top: 5px;
          // width: 120px;
          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: 15px;
          color: #c1d3d4;
          margin-left: 10px;
        }
      }

      .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: 16px;
        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: 16px;
        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: 16px;
        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: 16px;
        color: #c1d3d4;
        overflow: auto;
        padding-top: 5px;
      }
    }
    .headBox {
      height: 30px;
      background: #03b6a0;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      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 {
        font-size: 16px;
        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>