<template>
  <div class="pumpContentBox flex">
    <div class="elForm">
      <el-form
          ref="ruleForm"
          :model="form"
          label-width="120"
          :rules="rules"
        >
        <el-form-item label="预测情况">
          <el-input
            v-model="form.remark"
            :disabled='true'
          ></el-input>
        </el-form-item>
        <el-form-item label="解决建议" prop="commandOpenPump">
          <el-select 
            v-model="form.commandOpenPump"
            placeholder="请选择解决建议"
            style="width:100%">
              <el-option v-for="item in pupNum"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开泵数量" prop="commandOpenNumber">
          <el-select 
            v-model="form.commandOpenNumber"
            placeholder="请选择开泵数"
            style="width:100%">
              <el-option v-for="item in pumpArray"
                :key="item"
                :label="item"
                :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="起抽水">
          <div>{{form.commandQpz}}m(吴淞)</div>
        </el-form-item>
        <el-form-item label="停抽水">
          <div>{{form.commandTcz}}m(吴淞)</div>
        </el-form-item>
        <el-form-item label="希望执行时间" prop="executeTime">
          <el-date-picker
            v-model="form.executeTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择执行时间"
            style="width:100%"
          />
        </el-form-item>
        <el-form-item label="通知人员">
          <div>{{form.commandUsers}}{{(serveData.value?.dutyPersonPhone)}}</div>
          <!-- <el-tree-select
            style="width: 100%"
            v-model="form.recipient"
            :data="userData"
            placeholder="请选择接收人员"
            node-key="id"
            filterable
            multiple
            show-checkbox
            collapse-tags
            :render-after-expand="false"
            clearable
            :props="{
              value: 'id',
              label: 'name',
              children: 'children',
            }"
          /> -->
        </el-form-item>
        <el-form-item label="调度指令" prop="commandContent">
          <el-input
            type="textarea"
            v-model="form.commandContent"
            :autosize="{ minRows: 4, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="现场图片" prop="fileList">
          <ImageFileUpload :limit="4" :listType="'picture-card'" :saveFileArr="form.fileList"></ImageFileUpload>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">下发调度建议</el-button>
          <!-- <el-button type="primary" @click="">视频通话</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="elTable">
      <el-table :data="tableData.rainHistoryList" height="100%" class="dispatchTable" stripe>
        <el-table-column label="时间" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.time }}
          </template>
        </el-table-column>
        <el-table-column label="累计降雨量(mm)" prop="rain"/>
                <el-table-column label="应急响应级别">
          <template #default="scope">
            {{
              scope.row.warnGrade == "1"
                ? "Ⅰ"
                : scope.row.warnGrade == "2"
                ? "Ⅱ"
                : scope.row.warnGrade == "3"
                ? "Ⅲ"
                : scope.row.warnGrade == "4"
                ? "Ⅳ"
                : scope.row.warnGrade == "5"
                ? "预警"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="最大开泵数/泵机总个数" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.maxOpenNum }}/{{ row.pumpNum }}
          </template>
        </el-table-column>
        <el-table-column label="总台时" prop="kjts"/>
        <el-table-column label="当日抽排量(万方)" prop="dayCpl"/>
        <el-table-column label="日处理规模" prop="dailyHandleScale"/>
        <!-- <el-table-column label="状态" prop="status" width="90">
          <template #default="{ row }">
            <span :class="row.status==1?'blue':''">{{row.status==0?'未执行':'已执行'}}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="操作">
          <template #default="scope">
            <span @click="handleClick(scope.row)" class="pointer">选用</span>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script setup name="bengzhandiaodu">
import { ElMessageBox } from 'element-plus';
import { drainageDispatchRainAnalysisByBz} from "@/api/MonitorAssetsOnMap.js";
import { watchAreaDutyPumpScheduling,pumpDispatchCommandPublish,dispatchOutbound} from '@/api/FloodControlAndDrainage.js';
// import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
const { proxy } = getCurrentInstance();
const emit = defineEmits(["closePop"]);
const props = defineProps({
  Getproperties: {
    type: Object,
  },
  // 数据id
  dataID: {
    type: [String, Number],
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefreshName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
});
const pupNum = [
  {
    label:'开泵',
    value:'1'
  },
  {
    label:'关泵',
    value:'0'
  }
]
const rules = reactive({
  commandOpenPump: [
    { required: true, message: '请选择决策建议', trigger: 'change' },
  ],
  executeTime: [
    { required: true, message: '请选择执行时间', trigger: 'change' },
  ],
  commandContent: [
    { required: true, message: '请输入调度指令', trigger: 'blur' },
  ],
})
let serveData =ref({})
let userData =ref([])
let tableData =ref([])
let pumpArray =ref(['暂无推荐'])
let form =ref({})
function onSubmit(){
  proxy.$refs["ruleForm"].validate(valid => {
    if (valid) {
      ElMessageBox.confirm(
        '审核通过后调度指令后系统将向APP发送调度指令并通过语音外呼自动语音拨打电话提醒!',
        `确认要将调度指令下发给${serveData.value.name}值班及带班领导吗？`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
      .then(() => {
        debugger
        pumpDispatchCommandPublish(form.value).then(res => {
          if (res && res.code == 200) {
            if(serveData.value.dutyPersonPhone!=''){
              let params={
                phones:serveData.value.dutyPersonPhone,
                // phones:'15927167920',
                title:serveData.value.name,
                notice:form.value.commandContent
              }
              dispatchOutbound(params).then(res => {
                if (res && res.code == 200) {
                  proxy.$modal.msgSuccess("已下发")
                  getInfo()
                }else{
                  proxy.$modal.msgError(res.msg)
                }
              });
            }
          }else{
            proxy.$modal.msgError(res.msg)
          }
        });

      })
      .catch(() => {
      })
    }
  })
}

/** 查询用户tree列表 */
function getInfo() {
  let params={
    id:props.Getproperties.id,
    code:props.Getproperties.stCode
  }
  watchAreaDutyPumpScheduling(params).then(res => {
    if (res && res.code == 200) {
      serveData.value=res.data
      serveData.value.dataList.forEach(element => {
        if(element.warningInfo==serveData.value.warningInfo){
          serveData.value.serverPubNum=element.openPumpNum
        }
      });
      for(let i=1;i<=serveData.value.pumpNumber;i++){
        pumpArray.value.push(i)
      }
      form.value={
        commandState:'1',
        pumpSiteId:serveData.value.id,
        siteType:'bz',
        remark:`${serveData.value.warningInfo=='warn_blue'?'启动大雨暴雨蓝色预警':serveData.value.warningInfo=='warn_yellow'?'启动暴雨黄色预警':serveData.value.warningInfo=='warn_orange'?'启动暴雨橙色预警':serveData.value.warningInfo=='red_orange'?'启动暴雨红色预警':'启动小雨中雨预警'}建议提前开泵`,
        commandOpenPump:'1',
        commandOpenNumber:serveData.value.serverPubNum,
        commandUsers:serveData.value.dutyPerson,
        commandQpz:serveData.value.startLevel,
        commandTcz:serveData.value.stopLevel,
        commandContent:`根据历史调度经验及平台辅助研判，${serveData.value.name}过往在${serveData.value.warningInfo=='warn_blue'?'蓝色预警':serveData.value.warningInfo=='warn_yellow'?'雨黄色预警':serveData.value.warningInfo=='warn_orange'?'雨橙色预警':serveData.value.warningInfo=='red_orange'?'红色预警':'无预警'}下需要开启泵机${serveData.value.serverPubNum}/${serveData.value.pumpNumber}，起抽水位${serveData.value.startLevel}m(吴淞)，水位降至${serveData.value.stopLevel}m(吴淞)，建议立即开泵。`,
        // fileList:[]
      }
      getData()
    }
  })
}
function getData() {
  drainageDispatchRainAnalysisByBz({id:props.Getproperties.id,}).then(res=>{
    if(res.code==200){
      tableData.value=res.data
    }
  })
}

function handleClick(row) {
  form.value.commandOpenNumber=row.actualOpenNumber
}

watch(
  () => form.value.commandOpenNumber,
  (value) => {
    form.value.commandContent=`根据历史调度经验及平台辅助研判，${serveData.value.name}过往在${serveData.value.warningInfo=='warn_blue'?'蓝色预警':serveData.value.warningInfo=='warn_yellow'?'雨黄色预警':serveData.value.warningInfo=='warn_orange'?'雨橙色预警':serveData.value.warningInfo=='red_orange'?'红色预警':'无预警'}下需要开启泵机${value}/${serveData.value.pumpNumber}，起抽水位${serveData.value.startLevel}m(吴淞)，水位降至${serveData.value.stopLevel}m(吴淞)，建议立即开泵。`
  }
);
onMounted(() => {
  getInfo();
});
</script>

<style lang="scss" scoped>
.pumpContentBox{
  height:600px;
  overflow: hidden;
  .elForm{
    width: 40%;
    overflow: auto;
    color: #CCDFFF;
  }
  .elTable{
    width: 60%;
    height:calc(100% - 10px);
    overflow: hidden;
    padding-left: 20px;
  }
}
:deep(.el-textarea__inner){
  background: none;
  box-shadow:0 0 1px #4364ac;
}
:deep(.el-form-item__label){
  color: #CCDFFF !important;
}
:deep(.el-textarea__inner){
  color: #CCDFFF !important;
}
:deep(.el-input__inner){
  color: #CCDFFF !important;
}
.pointer{cursor: pointer;}
</style>